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

試試這個，這是很容易理解

<!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多視頻顯示 - 懸停播放

回答

相關問題