Wyświetl to samo wideo w wielu tagach <video>

Question

Mam wideo (nazwijmy to kompozytowe wideo) skomponowane przez wiele innych filmów połączonych za pomocą jakiegoś wzorca. Na przykład, patrz zrzut ekranu poniżej wideo, składający się z dwóch i czterech innych filmów, odpowiednio:

Jednak muszę wyświetlić go różnie: jeden główny, większy, wideo i N-1 miniaturki wideo, gdzie N to łączna liczba filmów. Oto ten drugi wyświetlacz odpowiadające filmy powyżej:

aby wyświetlić główne używam kombinacji HTML i CSS, aby umieścić film chcę w większych div. Działa płynnie, bez względu na liczbę filmów w złożonych filmach.

Aby wyświetlić miniatury, używam <canvas> wyciągnąć części chcę:

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 
} 

To działa dobrze dla 3 (czasem 4) filmów. Jednak wraz ze wzrostem liczby filmów w złożonym wideo, filmy w miniaturach zaczynają zamarzać i nie działają płynnie. Dzieje się tak prawdopodobnie dlatego, że w tym samym czasie wykonuje się zbyt dużo przetwarzania obrazu.

Myślę, że właściwym sposobem na to jest, w jaki sposób, używając <video> i metod specyficznych dla filmów, nie dla obrazów. Próbowałem też użyć tego samego src w wielu tagach <video> (po jednym dla każdej miniatury) i dodać eventListeners, aby odtwarzać/wstrzymywać filmy w miniaturach po odtworzeniu/zatrzymaniu głównego wideo. To niezbyt wydajne, zwłaszcza że czasami filmy mogą się zsynchronizować podczas wyszukiwania/buforowania.

Czy istnieje sposób użycia tylko jednego filmu w wielu tagach <video> i używania tylko jednego z nich (w moim przypadku zawierającego główny film) do kontrolowania wszystkich innych? Jeśli nie ma sposobu, aby to zrobić, czy istnieje alternatywne podejście do mojego problemu?

Dzięki dużo,

PS: Posiadanie wielu oddzielnych filmów nie jest możliwe w mojej sytuacji. Przetworzenie wideo wejściowego zajmie bardzo dużo czasu i podzielenie go na wiele filmów.

Answer 1

Z pewnością można użyć tego samego filmu wideo w wielu elementach wideo. Klonowanie oryginału i dołączanie ich jako miniaturek filmowych może złagodzić niektóre z nudów.

Powtarzające się miniatury i .play() Powinny być w porządku, o ile przed odtwarzaniem ustawiono ich currentTime z głównym filmem, aby zminimalizować dryf. Być może trzeba będzie poczekać, aż canplay wystrzeli na główny film i/lub miniatury w zależności od dokładnego doświadczenia, które chcesz dostarczyć.

Jeśli każda miniatura otrzyma pojemnik nadrzędny, możliwe jest umieszczenie elementu wideo służącego jako miniatura tak, aby widoczna była tylko część widocznego filmu, a resztę przycina.

FWIW, CSS masking może Cię zainteresować jako optymalizacja wydajności, jeśli pomaga w osiągnięciu kompozycji.

Musisz ręcznie koordynować odtwarzanie/wstrzymywanie wszystkich elementów wideo, ale to powinno być łatwe do zrobienia z obiektem elewacji, który obsługuje zatrzymanie odtwarzania wszystkich "połączonych" elementów wideo.

Answer 2

Jaki jest format głównego filmu wideo? Czy jest to plik mp4/webm na żądanie?

Jeśli nadal chcesz zastosować podejście polegające na chwytaniu ramek i malowaniu ich, ale napotykasz problemy z wydajnością, pomyśl o korzystaniu z pracowników sieci w przypadku ciężkich zadań. Here można znaleźć przykłady manipulacji wideo/płótno z pracownikami WWW.

Answer 3

Wiem, że jestem spóźniony i być może znalazłeś już odpowiedź. Jeśli jednak ktoś inny natrafi na to pytanie, oto moja odpowiedź:

Możesz użyć wielu elementów wideo z tego samego źródła. Sposobem na to jest css.

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

i HTML

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

Tak więc, jeśli robię prawy górny wideo, a każdy z nich był 250px przez 250px, chciałbym ustawić moje opakowanie height i width do 250px i mój film top do 0px i moje wideo left do 250px