html5 видео интерактивные объекты

Question

Кто-нибудь знает, разрешает ли html5-видео объекты, такие как кнопки, меню и т. Д., Подключенные к временной шкале?

Flash-проигрыватель Youtube делает это: в определенный момент показывает объект (баннер, ссылки, комментарии) поверхвидео за определенные секунды.

спасибо

Answer 1

Да и нет, Можно создавать очень интерактивные видеопрезентации с использованием видеообъектов html5, однако для этого требуется намного больше, чем просто сам видеообъект. Вы можете вкладывать видео в объект Canvas, а затем связываться с реальными кадрами видеоизображения, вы можете наложить любой визуальный HTML-элемент поверх самого видеообъекта, а затем анимировать их, вы можете управлять воспроизведением видео с помощью кнопок, событий щелчка и т. Д. Вы можете даже пусть видеообъект контролирует остальную часть страницы с помощью прослушивателей, основанных на времени.

Popcorn.js действительно хорош и прост в освоении, что позволяет вам делать все, что вы упомянули. http://popcornjs.org

http://popcornjs.org/demos

Answer 2

Это не является частью стандарта видео HTML5, но его легко реализовать вручную, подключив некоторые сценарии к событию progress. Глядя на свойство currentTime видеообъекта, вы можете решить, когда показывать / скрывать дополнительные элементы.

например, показ элемента поверх видео между 1 и 2 секундами в видео:

<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>

Answer 3

X2TV ( www.x2.tv ) имеет студию перетаскивания, где можно накладывать значки и дополнительный контент в слой HTML5.

Answer 4

Если вы захотите использовать более общие рамки, https://github.com/nise/vi-two может быть вам интересно.