Question

我读了这个Changing JWPlayer video onClick并尝试过但我在播放第二个视频时遇到了问题。每当我点击“播放视频2”时都没有任何反应！代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>My JWPlayer</title>
    <script type="text/javascript" src="jwplayer.js" ></script>

    <script type="text/javascript">
     function changeVideo(filename) {
     jwplayer("video").setup({
       file: filename,",
        height: 360,
        width: 640,
    });
    jwplayer('video').load();
}
     </script>
    </head>

    <body>
    <div id="video">Loading the player ...</div>

    <script type="text/javascript">
        jwplayer("video").setup({
            file: "http://longtailvideo.com/jw/upload/bunny.flv",
            height: 360,
            width: 640
        });
    </script>

       <p><a href="javascript:void();" onclick="javascript:changeVideo("http://www.auby.no/files/video_tests/h264_720p_mp_3.1_3mbps_aac_shrinkage.mp4");">Play Video 2</a></p>
    </body>
    </html>

Answer 1

function changeVideo(filename) {
    jwplayer("video")
        .setup({
            file: filename,
            height: 360,
            width: 640
        })
        .load()
    ;
}

changeVideo("videoURL01");

$(".changeVideo").click(function()
{
  var videoUrl = $(this).attr("data-video_url");
  changeVideo(videoUrl);
})

<强> HTML

更有趣的是将videoURL作为数据属性添加到锚点

<div id="video">Loading the player ...</div>
<a href="#" class="changeVideo" data-video_url="videoURL2">load video 2</a>

这就是你所需要的一切

点击即可更改JWPlayer视频

1 个答案: