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

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

javascript html video

Javascript 如何为使用Html5创建的视频创建灯箱效果？,javascript,html,video,Javascript,Html,Video,我用HTML5视频标签创建了一个视频。视频有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" /&g

我用HTML5视频标签创建了一个视频。视频有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>


flowplayer（“播放器”http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf");

我的javascript技能非常有限，因此非常感谢您的帮助。谢谢，Pippa

您可以使用任何lighbox javascript库。例如，jquery工具覆盖：

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

试试这个

您可以使用jQuery lightbox，它很容易设置：只需从下载它，然后查看页面的如何使用部分，了解如何使用它

Ad@m

此外，如果您发现问题的答案有用（请参见此处的勾号），您应该接受这些答案，并使用投票。这将帮助你获得更多的回答，尝试使用upvote，并被告知我需要15个，因为声誉可以在你拥有它时做到这一点。这将证明是有益的，谢谢。如果我使用Flowplayer，这是否意味着我只能使用lightbox进行“flash后退”？我使用了“叠加视频”页面上的代码：[link]，用mp4视频替换flv视频似乎很容易（见上面的代码）。我能将它与上面的HTML5视频标记一起使用吗？是的，在jquery工具覆盖库中使用HTML5视频标记应该有任何问题。看起来我只能将flv或mp4与此选项一起使用。我需要能够使用mp4，但我也需要以ogv和webm为目标。谢谢，但我只能使用带有此选项的图像，我需要能够使用视频。@Pippa我还没有测试过这一点，但您应该能够使用此代码：

$（“video#videoid”）.lightbox（）Ad@m