Is it possible to run bitsontherun.com videos in shadowbox.js?
I'm using bitsontherun.com to host and stream my videos. It uses the latest version of JW player, but the player is handled by bitsontherun. I also use shadowbox.js for my product image gallery. I want to integrate my product videos into the gallery as w开发者_StackOverflow中文版ell. However, I can't figure out how to shadowbox videos from bitsontherun. Normally I embed those videos into a page using a script tag like this:
<script src="http://content.bitsontherun.com/players/ThWcjaxZ-qLFOERCo.js" type="text/javascript"></script>
Shadowbox.js typically uses a link with a thumbnail image to launch the lightbox and associated player. Anyone have any ideas how to make this work?
Yes. Here is a basic implementation.
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="shadowbox-3.0.3/shadowbox.css">
<style>
.botrplayer {display: none}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="shadowbox-3.0.3/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
skipSetup: true
});
$(document).ready(function(){
Shadowbox.setup($('.sbox'));//set up links with class of sbox
$('a.sbox').live('click',function(event){
Shadowbox.open({
content: $(this).siblings('.botrplayer').html(),
player: 'html',
title: "Welcome",
height: 280,
width: 490
});
//Stops loading link
event.preventDefault();
});
});
</script>
<title>bitsontherun shadowbox</title>
</head>
<body>
<p>The content of the document......</p>
<div>
<a href="#" class="sbox">Open bitsonthe run video</a>
<script type="text/javascript" src="http://content.bitsontherun.com/players/qgGMXVzB-Zdb9K7JT.js"></script>
</div>
</body>
</html>
If you wrap your links in a div with the script elements, you can reuse this code for all of them.
Hosted here: http://sandbox.jamesfishwick.com/bitsontherun/index.html
You could also use the swf version of the video (see http://developer.longtailvideo.com/botr/system-api/urls/players.html) and link to that with a regular shadowbox (http://www.shadowbox-js.com/usage.html)
<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>
<a href="http://content.bitsontherun.com/players/ThWcjaxZ-qLFOERCo.swf" rel="shadowbox">video</a>
加载中,请稍侯......
精彩评论