我使用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