Question

我有以下<a>标记，用户可点击该标记查看其视频。到目前为止，它将播放一个标准的视频网址：

<a href="#;" class="video-preview" onclick="jwplayer('video-player').play()" 
   data-video_url="{{ asset.file_scratch_encode_url }}">
     View encode
</a>

如何在onclick属性中加载video_url？

Answer 1

$(function() {
   $( 'a.video-preview' ).on( 'click', function( e ) {
        e.preventDefault();
        jwplayer('video-player').play();
    });

});

Answer 2

假设您已经定义了jwplayer并且播放器已经加载并准备播放，此脚本将更改播放器中的视频

 var video = $('.video-preview').attr("data-video_url"); //consider adding an id to <a> tag
 $('a.video-preview').on( 'click', function(){
            jwplayer('video-player').load({file:video});
    });

});

如果你想点击将加载带视频的jwplayer，请替换

jwplayer('video-player').load({file:video});

使用您的播放器配置。

Answer 3

你可以只使用JS，不需要jQuery - http://support.jwplayer.com/customer/portal/articles/1439570-example-loading-new-playlists

<div id="myElement"></div>

<script>
  jwplayer("myElement").setup({
    image: "/uploads/myPoster.jpg",
    file: "/uploads/myVideo.mp4",
    title: "My Cool Trailer"
  });
</script>

<script>
  function loadVideo(myFile,myImage) { 
    jwplayer().load([{
      file: myFile,
      image: myImage
    }]);
    jwplayer().play();
  };
</script>

<li><a href="javascript:loadVideo('file1.mp4','image1.jpg')">Video 1</a></li>
<li><a href="javascript:loadVideo('file2.mp4','image2.jpg')">Video 2</a></li>
<li><a href="javascript:loadVideo('file3.mp4','image3.jpg')">Video 3</a></li>

如何加载jquery url onclick？

3 个答案: