Is it possible to run bitsontherun.com videos in shadowbox.js?_问答_开发者

Is it possible to run bitsontherun.com videos in shadowbox.js?

开发者 https://www.devze.com 2023-03-01 16:43 出处：网络

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

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>