Question

我正试图在一个网站上使用几个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>

如果我将“容器”改为其他任何东西，如果是第一个，它只显示第二个，所以我假设容器保存内容（显然）。如何修改此功能才能在一个页面上播放许多视频？我确信有人也遇到过这个问题。非常感谢。

Answer 1

为什么不在外面有一个容器然后创建另一个div来保存你需要修改css的玩家以适应玩家，但除此之外它应该是这样的：

<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

这是不明智的最好的事情是制作一个视频库，例如获取48张图片使用它们作为您想要与您的视频相关联的页面的链接，然后当您点击图像时，您将有视频播放器启动

Answer 2

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

这基本上会在一个页面中为您提供48个玩家，这不是一个好主意。你真正需要做的是，实际上只是在页面中加载48个图像，并使用javascript加载具有相应视频的播放器，仅在单击图像时。

Answer 3

你希望移动设备或平板电脑最好的办法是将它们加载到一个页面上，因为它会使用你所有的数据最好的东西可能是我对视频库的想法，因为那时你可以为移动设备更好地设计它不太可能慢跑或吃掉数据

Answer 4

只需为播放器的每个实例使用不同的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>

希望这有帮助！

我可以在一个页面上使用几个JW播放器吗？

4 个答案: