顯示多個相同的視頻<video>標籤

我有一個視頻（讓我們稱之爲複合視頻）由多個其他視頻連接使用某種模式組成。例如，請參見下面的視頻的屏幕截圖，由通過兩個和四個其它影片，分別爲：顯示多個相同的視頻<video>標籤

然而，我需要不同地顯示它：一個主要的，更大，視頻和N-1視頻縮略圖，其中N是視頻的總數。下面是對應於視頻高於這個其他顯示：

要顯示我使用的HTML和CSS的組合，我想要的視頻位置在較大DIV爲主。無論合成視頻中的視頻數量如何，它都能流暢運行。

要顯示縮略圖，我使用<canvas>畫出我想要的部分：

video.addEventListener('play', function() { 
    (function loop() { 
    drawThumbnails(); 
    setTimeout(loop, 1000/30); // drawing at 30fps 
    })(); 
}, false); 

function drawThumbnails() { 
    for (var i = thumbs.length - 1; i >= 0; i--) { 
    drawThumbnail(thumbs[i]); 
    }; 
} 

function drawThumbnail(thumb) { 
    var thumbNumber = Number(thumb.id.match(/\d+/g)); 
    var canvasContext = thumb.getContext('2d'); 
    var thumbCoordinates = getVideoCoordinates(thumbNumber); 
    var srcX = thumbCoordinates.column * videoWidth; 
    var srcY = thumbCoordinates.row * videoHeight; 

    canvasContext.drawImage(
     video, srcX, srcY, videoWidth, videoHeight, // Source 
     0, 0, thumb.width, thumb.height); // Destination 
}

它是爲3（有時4）視頻工作良好。但是，隨着複合視頻中的視頻數量的增加，縮略圖中的視頻開始凍結並且運行不平穩。這可能是因爲同時進行了太多的圖像處理。

我認爲正確的做法是，不知何故，使用<video>和方法特定的視頻，而不是圖像。我還嘗試在多個<video>標記中使用相同的src標記（每個縮略圖一個標記），並添加eventListeners以在主視頻播放/暫停後播放/暫停縮略圖中的視頻。這不是非常有效，特別是因爲在尋找/緩衝時，視頻有時會失去同步。

是否有一種方法只使用多個<video>標籤中的一個視頻，並只使用其中的一個（在我的情況下，包含主視頻的視頻）來控制所有其他視頻？如果沒有辦法做到這一點，是否有替代方法來解決我的問題？

非常感謝，

附：在我的情況下，擁有多個分開的視頻不是一種選擇。處理輸入視頻並將其分成多個視頻需要很長時間。

來源

2016-01-29 Amaury Medeiros

您當然可以在多個視頻元素中引用相同的視頻。克隆原始文件並將它們添加爲縮略圖視頻可能會緩解一些枯燥乏味的內容。

遍歷縮略圖和.play()荷蘭國際集團作爲你之前播放設置其currentTime與主視頻的，以儘量減少漂移它們應該被罰款這麼久。根據您要傳送的確切體驗，可能需要等待canplay才能觸發主視頻和/或縮略圖。

如果每個縮略圖都有一個父容器，您可以將視頻元素定位爲縮略圖，這樣只有您關心看到的視頻部分可見，剩下的部分會被裁剪掉。

如果FWIW，CSS masking有助於合成性能，可能會將其作爲性能優化的一部分。

您需要手動協調播放/暫停所有視頻元素，但這應該很容易處理所有「鏈接」視頻元素的播放暫停的外觀對象。

來源

2016-01-29 21:25:43 mczepiel

主視頻的格式是什麼？這是一個隨需應變的mp4/webm文件嗎？

如果您仍然想要採用抓取框架並對其進行繪製但面臨性能問題的方法，請考慮使用網絡工作人員處理繁重的工作。 Here你可以找到一些web工作者的視頻/畫布操作的例子。

來源

2016-01-29 21:45:57 flavioribeiro

Web工作人員受到限制，因爲我無法在其任務上操作DOM。因此，主線仍然存在瓶頸。但是，謝謝！ –

我知道我發佈的很晚，而且您可能已經找到了答案。但是，如果有其他人遇到此問題，這裏是我的答案：

您可以使用具有相同來源的多個視頻元素。做到這一點的方式是與CSS。

.wrapper { 
    height: /*height of one video*/; 
    width: /*width of one video*/; 
    overflow: hidden; 
} 
video { 
    position: relative; 
    top: /*height offset*/; 
    left: /*width offset*/; 
}

和HTML

<div class="wrapper"> 
    <video src="myvideo.mp4"></video> 
</div>

所以，如果我是做右上方的視頻，並通過250像素每一個爲250像素，我會成立我的包裝height和width到250px和我視頻top到0px和我的視頻left到250px

來源

2016-07-10 04:13:28 jlynch630

顯示多個相同的視頻<video>標籤

回答

相關問題