HTML5 Multiple Video Display - Наведите курсор на воспроизведение - PullRequest
Новая
       29

HTML5 Multiple Video Display - Наведите курсор на воспроизведение

1 голос
/ 16 февраля 2012

Хорошо, поэтому я следовал хорошему руководству по встраиванию видео через тег HTML5 video, которое можно найти здесь .По сути, идея заключается в том, что при наведении видео проигрывается, при наведении останавливается воспроизведение.

Ну, я пытался разместить несколько видео на одной странице (все это видео, заметьте), в надежде, что смогу создать своего рода интерактивную многослойную доску.Другими словами, вы наводите курсор на каждое видео, оно создает различные изображения в зависимости от того, где вы находитесь в конце каждого видео и т. Д.Какой лучший способ создать несколько плиточных видео?Я вставлю код, с которым я работал.У меня проблема в том, что если я создаю несколько функций JavaScript, он показывает только видео последней созданной мной функции, а не все видео.

Надеюсь, это имеет смысл. Здесь - это ссылка на то, над чем я работал до сих пор.ПРИМЕЧАНИЕ: загрузка видео занимает некоторое время, поэтому до этого момента будет воспроизводиться звук, но нет изображения.

Заранее спасибо за любую помощь!

Ответы [ 3 ]

2 голосов
/ 26 сентября 2012

Вот решение, которое я нашел: Единственное предупреждение, которое я вам даю, - установить для видео preload = "none", потому что если они все загрузятся, это будет кошмаром для вашей пропускной способности. Мне пришлось поменять свою, и теперь я ищу решение, чтобы люди знали, что видео загружается. 

var vid = document.getElementsByTagName("video");
[].forEach.call(vid, function (item) {
    item.addEventListener('mouseover', hoverVideo, false);
    item.addEventListener('mouseout', hideVideo, false);
});

function hoverVideo(e)
{   
    this.play();
}
function hideVideo(e)
{
    this.pause();
}

Вот где я получил ответ: http://www.dreamincode.net/forums/topic/281583-video-plays-on-mouse-over-but-not-with-multiple-videos/

0 голосов
/ 06 марта 2015

Попробуйте, это легко понять 

<!DOCTYPE html>
<html>
<video id="vv" width="500" height="500" controls onmouseout="this.pause()" onmouseover="this.play()">
<source src="xx.mp4">
Your browser does not support this file
</video>
</html>
0 голосов
/ 16 ноября 2014

Для тех, кто хочет добиться этого с помощью jQuery, вот решение, которое я использую для динамически загружаемого контента: 

        //play video on hover
        $(document).on('mouseover', 'video', function() { 
            $(this).get(0).play(); 
        }); 

        //pause video on mouse leave
        $(document).on('mouseleave', 'video', function() { 
            $(this).get(0).pause(); 
        });

Это может быть использовано для страницы с 1 - N видео и только для зависшеговидео будет воспроизводиться каждый раз, в то время как каждый будет останавливаться на текущем кадре при отпускании мыши.

Вот пример этого в действии: http://jsfiddle.net/cc7w0pda/

...