HTML5 Несколько видеодисплея - наведите курсор на воспроизведение

Итак, я пошел по хорошему руководству относительно встраивания видео с помощью тега HTML5, который можно найти here. По сути, идея заключается в том, что при наведении видео воспроизводится, когда он зависает, он перестает играть.HTML5 Несколько видеодисплея - наведите курсор на воспроизведение

Ну, я пытался включить несколько видео на одну страницу (все-таки видео, заметьте) в надежде, что я смогу создать своего рода интерактивную разноплановую панель. Другими словами, вы наводите курсор на каждое видео, оно создает различные изображения, основанные на том, где в каждом видео вы попадаете, и т. Д.

Как бы то ни было, вопрос, который я задаю, основан на этом учебнике, за которым я следил, что это лучший способ создать несколько видеороликов с черепицей? Я вставлю код, с которым я работал. Проблема, с которой я сталкиваюсь, заключается в том, что если я создаю несколько функций javascript, это показывает только видео из последней созданной мной функции, а не всех видеороликов.

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

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

источник

2012-02-16 Peter

Вот решение, которое я нашел: Единственное предупреждение, которое я вам даю, - установить видео в 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/

источник

2012-09-26 12:26:37 Deyson

Для всех, кто ищет для достижения этой цели с помощью 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/

источник

2014-11-16 19:56:46 jacobedawson

-1

Try это, легко понять,

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

источник

2015-03-06 18:30:58 Tahra

HTML5 Несколько видеодисплея - наведите курсор на воспроизведение

ответ

Смежные вопросы