Question

我使用Html 5视频标签创建了一个视频。该视频有3种不同的格式，带有闪回后备。是否可以使用“灯箱”效果显示它。以下是我的代码： -

<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技能非常有限，所以非常感谢任何帮助。谢谢，皮帕

Answer 1

您可以使用任何lighbox javascript库。例如jquery-tools叠加： http://flowplayer.org/tools/overlay/index.html

只需使用页面中的一个示例，然后使用视频播放器的HTML更改叠加内容。

Answer 2

试一试 http://videolightbox.com/

Answer 3

您可以使用jQuery灯箱，它很容易设置：只需从http://leandrovieira.com/projects/jquery/lightbox/下载它，然后查看页面的如何使用部分，了解如何使用它。

广告@米

如何为使用Html5创建的视频创建灯箱效果？

3 个答案: