How do I create a lightbox effect for a video that has been created with Html5?
I've created one video using Html 5 video tags. The video is in 3 different formats with a flash fallback. Is it possible to display it using a 'lightbox' effect. Below is my code:-
<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/sw开发者_高级运维f/flowplayer-3.2.7.swf");
</script>
</body>
My javascript skills are very limited, so would greatly appreciate any help. Thanks, Pippa
You can use any lighbox javascript library. For example jquery-tools overlay: http://flowplayer.org/tools/overlay/index.html
Just take one of the examples in the page and change the overlay content with the HTML of your video player.
try this out http://videolightbox.com/
You can use jQuery lightbox, it is easy to set up: simply download it from http://leandrovieira.com/projects/jquery/lightbox/ and see the How to Use section of the page to see how to use it.
Ad@m
加载中,请稍侯......
精彩评论