Tôi có video (gọi là video tổng hợp) được tạo bởi nhiều video khác được nối bằng một số mẫu. Ví dụ, xem ảnh chụp màn hình của các đoạn video dưới đây, sáng tác bởi hai đến bốn định dạng video khác, tương ứng:Hiển thị cùng một video trong nhiều thẻ <video>
Tuy nhiên, tôi cần phải hiển thị một cách khác: Một chính, lớn, video và N-1 hình thu nhỏ video, trong đó N là tổng số video. Dưới đây là màn hình này khác tương ứng với các đoạn video trên:
Để hiển thị chính Tôi đang sử dụng một sự kết hợp của HTML và CSS để xác định vị trí các đoạn video tôi muốn trong div lớn hơn. Nó chạy trơn tru, bất kể số lượng video trong video tổng hợp.
Để hiển thị hình thu nhỏ, tôi đang sử dụng <canvas> để vẽ những phần tôi muốn:
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
}
Nó được làm việc tốt cho 3 (đôi khi 4) video. Tuy nhiên, do số lượng video trong video tổng hợp tăng lên nên các video trong hình thu nhỏ bắt đầu đóng băng và không chạy một cách trơn tru. Điều này có thể xảy ra vì có quá nhiều xử lý hình ảnh đang được thực hiện cùng một lúc.
Tôi nghĩ rằng cách thích hợp để làm điều đó là, bằng cách nào đó, sử dụng <video> và các phương pháp cụ thể cho video chứ không phải cho hình ảnh. Tôi cũng đã cố gắng sử dụng cùng một src trong nhiều thẻ <video> (một cho mỗi hình thu nhỏ) và thêm eventListeners để phát/tạm dừng video trong hình thu nhỏ khi video chính được phát/tạm dừng. Điều đó không hiệu quả lắm, đặc biệt vì thỉnh thoảng các video có thể bị đồng bộ khi tìm kiếm/lưu vào bộ đệm.
Có cách nào chỉ sử dụng một video trong nhiều thẻ <video> và chỉ sử dụng một trong số chúng (trong trường hợp của tôi, video chứa video chính) để kiểm soát tất cả các video khác không? Trong trường hợp không có cách nào để làm điều đó, có cách tiếp cận thay thế nào cho vấn đề của tôi không?
Cảm ơn rất nhiều,
P.S. Có nhiều, tách biệt, video không phải là một tùy chọn trong tình huống của tôi. Sẽ mất rất nhiều thời gian để xử lý video đầu vào và chia nó thành nhiều video.
Nhân viên web bị giới hạn bởi vì tôi không thể thao tác DOM trên nhiệm vụ của họ. Do đó, nút cổ chai vẫn còn trên sợi chính. Nhưng cảm ơn! –