1

我正在尝试在一个网站上使用几个 JW 播放器。我实际上需要放置 48 个，但它只有一个可见。我认为它与“容器”参数有关。

<script type="text/javascript" src="http://video.captive-portal.com/jwplayer.js"></script>
<script type="text/javascript">
    jwplayer("container").setup({
        flashplayer: "http://video.captive-portal.com/player.swf",
        file: "http://content.captive-portal.com/campaigns/sky/videos/1/1.mp4",
        image: "http://content.captive-portal.com/campaigns/sky/videos/1/1.jpg",
        width: 480,
        height: 270
    });


<script type="text/javascript" src="http://video.captive-portal.com/jwplayer.js"></script>
<script type="text/javascript">
    jwplayer("container").setup({
        flashplayer: "http://video.captive-portal.com/player.swf",
        file: "http://content.captive-portal.com/campaigns/sky/videos/1/2.mp4",
        image: "http://content.captive-portal.com/campaigns/sky/videos/1/2.jpg",
        width: 480,
        height: 270
    });
</script>

如果我在第一个的情况下将“容器”更改为其他任何内容，它只会显示第二个，所以我假设容器包含内容（显然）。如何修改它以在一页上播放多个视频？我敢肯定有人也遇到过这个问题。非常感谢。

4

4 回答 4

1

why not have a container on the outside and then create another div that holds the players you will just need to modify the css a Little to accommodate the players but other than that it should work something like this:

<Wrapper>
<maincontent>
<player1>
   `<script type="text/javascript" src="http://video.captive-portal.com/jwplayer.js"></script>
    <script type="text/javascript">
    jwplayer("container").setup({
    flashplayer: "http://video.captive-portal.com/player.swf",
    file: "http://content.captive-portal.com/campaigns/sky/videos/1/1.mp4",
    image: "http://content.captive-portal.com/campaigns/sky/videos/1/1.jpg",
    width: 480,
    height: 270
});
</div>

<player2>
   `<script type="text/javascript" src="http://video.captive-portal.com/jwplayer.js"></script>
    <script type="text/javascript">
    jwplayer("container").setup({
    flashplayer: "http://video.captive-portal.com/player.swf",
    file: "http://content.captive-portal.com/campaigns/sky/videos/1/1.mp4",
    image: "http://content.captive-portal.com/campaigns/sky/videos/1/1.jpg",
    width: 480,
    height: 270
});
</div>
</div> this is the end of the main content 
</div> this is the end of the Wrapper i changed container to wrapper so there are no conflicts

this is not wise best thing to do is make a video gallery so for example get 48 pictures use them as links to pages that you want associated with your videos and then when you click on the image you will have the video player starting

于 2013-09-26T12:06:56.010 回答
1

您希望将其用于手机或平板电脑，最好不要将它们加载到一个页面上，因为它将使用您的所有数据最好的事情可能是我对视频库的想法，因为这样您就可以更好地为手机设计它，而且不太可能运行缓慢或吃掉数据

于 2013-09-26T12:44:54.063 回答
1

您的页面上需要有 48 个不同的 DIV 标记，并且每个代码将引用不同的 div 标记（带有 ID 或其他）。此外，您只需在一个脚本标签中获取一次 jwplayer js 文件，所有其余代码也可以合并到一个脚本标签中。

这实际上会在一页中为您提供 48 个玩家，这不是一个好主意。你实际上需要做的，实际上只是在一个页面中加载 48 张图片，并使用 javascript 加载播放器和相应的视频，只有当图片被点击时。

于 2013-09-26T12:10:45.187 回答
0

只需为播放器的每个实例使用不同的 ID。

快速演示代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js"></script>
        <title>Multiple</title>
    </head>
    <body>
            <div id="container"></div>
            <script type="text/javascript">
            jwplayer("container").setup({
            file: "http://www.longtailvideo.com/jw/upload/bunny.mp4",
            image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
            height: 300,
            width: 400,
            controlbar: "bottom"
             });
            </script>
            <div id="container2"></div>
            <script type="text/javascript">
            jwplayer("container2").setup({
            file: "http://www.longtailvideo.com/jw/upload/bunny.flv",
            image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
            height: 300,
            width: 400,
            controlbar: "bottom"
             });
            </script>
            <div id="container3"></div>
            <script type="text/javascript">
            jwplayer("container3").setup({
            file: "http://www.longtailvideo.com/jw/upload/bunny.mov",
            image: "http://www.longtailvideo.com/jw/upload/bunny.jpg",
            height: 300,
            width: 400,
            controlbar: "bottom"
             });
            </script>           
</html>

希望这可以帮助！

于 2013-09-26T17:27:12.870 回答