Czy ktoś wie, czy wideo HTML5 pozwala obiektów takich jak przyciski, menu, itp. Podłączone do osi czasu?Wideo interaktywne html5
Flash Player YouTube Wykonaj następujące czynności: w określonym momencie, pokaż obiekt (baner, linki, komentarze) na filmie przez określone sekundy.
dzięki
tak i nie, Jest możliwe, aby stworzyć bardzo interaktywne prezentacje wideo oparte na użyciu obiektów HTML5 video jednakże wymaga znacznie więcej niż samego obiektu wideo. Możesz zagnieździć wideo do obiektu canvas, a następnie zepsuć rzeczywiste klatki obrazu wideo, możesz nakładać dowolny wizualny element html na sam obiekt wideo, a następnie animować je, możesz sterować odtwarzaniem wideo za pomocą przycisków, zdarzeń kliknięcia itp. Możesz nawet obiekt wideo kontroluje resztę strony za pomocą słuchaczy opartych na czasie.
Popcorn.js jest naprawdę bardzo dobry i łatwy do nauczenia, pozwalając ci zrobić wszystko, o czym wspomniałeś. http://popcornjs.org
Domyślam się, że filmy na płótnie są najbardziej kompletnymi rozwiązaniami. – Mike
Tak, jest to bardziej kontrolowane środowisko niż dom jest również generalnie mniej zasobów ciężkich, jak elementy dom są renderowane nieco inaczej przez przeglądarkę i podlegają wielu globalnych słuchaczy i wydarzeń. byłoby jednak łatwiej dostępne dzięki domenie. – Alex
To nie jest częścią standardu wideo HTML5, ale jest to łatwe do wykonania ręcznie przez okablowanie trochę włączony do zdarzenia progress. Patrząc na właściwość obiektu wideo, można zdecydować, kiedy pokazać/ukryć dodatkowe elementy.
przykład pokazujący element na szczycie wideo pomiędzy 1 i 2 sekundy do video:
<video id="v">...</div>
<div id="overlay" style="position: relative; top: -80px;">HELLO</div>
<script type="text/javascript">
var overlay= document.getElementById('overlay');
var video= document.getElementById('v');
video.addEventListener('progress', function() {
var show= video.currentTime>=1 && video.currentTime<2;
overlay.style.visibility= show? 'visible' : 'hidden';
}, false);
</script>
Ponadto, jeśli byłby po prostu statycznym tekstem WebVTT (i jedną z wielu wielopunktów), mógł być użyty. –
X2TV (www.x2.tv) ma przeciągnij i upuść studio, gdzie można nakładania ikony i dodatkową zawartość w warstwie HTML5.
Jeśli chcesz użyć bardziej ogólnej struktury https://github.com/nise/vi-two, może być dla Ciebie interesujące.
Tag wideo HTML5 odtwarza wideo, ale ma też wiele funkcji, które pozwalają na dodanie warstwy interaktywności do wideo. Popcorn.js to robi, a H5P ma również interaktywną bibliotekę wideo, w której możesz dodawać dodatkowe informacje tekstowe, obrazy i quizy do osi czasu wideo. – Almonds