Question

我正在使用bitsontherun.com来托管和播放我的视频。它使用最新版本的JW播放器，但播放器由bitsontherun处理。我还将shadowbox.js用于我的产品图库。我想将我的产品视频集成到图库中。但是，我无法弄清楚如何从bitsontherun影子箱视频。通常我会使用这样的脚本标记将这些视频嵌入到页面中：

<script src="http://content.bitsontherun.com/players/ThWcjaxZ-qLFOERCo.js" type="text/javascript"></script>

Shadowbox.js通常使用带有缩略图的链接来启动灯箱和关联的播放器。任何人有任何想法如何使这项工作？

Answer 1

是。这是一个基本的实现。

<!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>

如果您使用div元素将链接包装在script中，则可以对所有这些元素重复使用此代码。

在此托管：http://sandbox.jamesfishwick.com/bitsontherun/index.html

Answer 2

您还可以使用视频的swf版本（请参阅http://developer.longtailvideo.com/botr/system-api/urls/players.html）并使用常规阴影框（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>

是否可以在shadowbox.js中运行bitsontherun.com视频？

2 个答案: