如何爲使用Html5創建的視頻創建燈箱效果？

我使用Html 5視頻標籤創建了一個視頻。該視頻採用3種不同的格式，並具有閃回效果。是否可以使用「燈箱」效果來顯示它。以下是我的代碼： -如何爲使用Html5創建的視頻創建燈箱效果？

<script type="text/javascript" src="http://static.flowplayer.org/js/flowplayer- 3.2.6.min.js"></script> 
<link rel="stylesheet" href="../../stylesheets/styles.css" /> 
</head> 
<body> 

<div id="videocontent"> 
<video width="640" height="360" preload="auto" controls poster="http://www.synergese.co.uk/testMathsOnline/day3/videos/day3Wel.jpg" tabindex="0" > 
<source src="http://www.synergese.co.uk/testMathsOnline/day3/videos/fracWelDay3.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
<source src="http://www.synergese.co.uk/testMathsOnline/day3/videos/fracWelDay3.webm" type='video/webm; codecs="vp8, vorbis"'> 
<source src="http://www.synergese.co.uk/testMathsOnline/day3/videos/fracWelDay3.ogv" type='video/ogg; codecs="theora, vorbis"'> 

<a href="http://www.synergese.co.uk/testMathsOnline/day3/videos/fracWelDay3.mp4" 
style="display:block;width:640px;height:360px;" 
id="player"></a> 
</video> 
</div> 

<!-- this script block will install Flowplayer inside previous A tag --> 
<script language="JavaScript"> 
flowplayer("player", "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf"); 
</script> 
</body>

我的JavaScript技能非常有限，所以非常感謝任何幫助。謝謝，皮帕

來源

2011-06-14 Pippa

此外，你應該接受回答您的問題，如果你發現他們是有用的（見有蜱存在），還可以使用upvotes。它會幫助你得到更多的答案 – Rishabh 2011-06-14 12:09:54

對不起，試圖使用upvote，並被告知我需要15作爲聲譽 – Pippa 2011-06-14 13:37:42

K當你有它。這將證明有幫助 – Rishabh 2011-06-14 18:05:58

您可以使用任何lighbox JavaScript庫。例如jQuery的工具覆蓋： http://flowplayer.org/tools/overlay/index.html

只需在頁面中的一個例子，並用您的視頻播放器的HTML更改覆蓋內容。

來源

2011-06-14 12:07:39 ggarber

謝謝。如果我使用Flowplayer，這是否意味着我只能使用燈箱來實現「閃回」效果？我在'Overlaying Videos'頁面上使用了代碼：[link] http://flowplayer.org/demos/tools/overlay.html，用mp4視頻代替flv視頻似乎很容易（請參閱上面的代碼）。我可以在上面的Html 5視頻標籤中使用它嗎？ – Pippa 2011-06-14 13:36:27

是的，應該有任何問題使用jQuery中的HTML5視頻標籤工具覆蓋 – ggarber 2011-06-15 14:54:16

嘗試了這一點 http://videolightbox.com/

來源

2011-06-14 12:08:47 Rishabh

謝謝。它看起來好像我可以使用flv或mp4這個選項。我需要能夠使用mp4，但我也需要瞄準ogv和webm。 – Pippa 2011-06-14 14:33:25

我認爲你需要編碼他們的其他格式。 – Rishabh 2011-06-14 19:05:37

您可以使用jQuery的燈箱，很容易設置：簡單地從http://leandrovieira.com/projects/jquery/lightbox/下載並看到如何使用網頁的部分，瞭解如何使用它。

廣告@米

來源

2011-06-14 12:15:22 kirb

謝謝，但我只能使用這個選項的圖像，我需要能夠使用視頻。 – Pippa 2011-06-14 14:35:35

@Pippa我還沒有測試過這個，但你應該可以使用下面的代碼：'$（「video＃videoid」）。lightbox（）;'Ad @ m – kirb 2011-06-16 09:02:56

如何爲使用Html5創建的視頻創建燈箱效果？

回答

相關問題