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



我使用Html 5视频标签创建了一个视频。该视频有三种不同的格式,并带有闪光灯回退功能。是否可以使用"灯箱"效果来显示它。以下是我的代码:-

<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技能非常有限,因此非常感谢您的帮助。谢谢,Pippa

您可以使用任何lighbox javascript库。例如,jquery工具覆盖:http://flowplayer.org/tools/overlay/index.html

只需在页面中举一个例子,然后用视频播放器的HTML更改覆盖内容。

尝试一下http://videolightbox.com/

您可以使用jQuery灯箱,它很容易设置:只需从http://leandrovieira.com/projects/jquery/lightbox/请参阅页面的如何使用部分,了解如何使用它。

Ad@m

最新更新