2014-10-17 55 views
1

我有以下<a>標籤,這是用戶點擊查看其視頻的位置。到目前爲止,它會起到一個標準的視頻網址:如何加載jQuery URL onclick?

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

我將如何加載VIDEO_URL以及在onclick屬性中?

回答

1

你可以只用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> 
1
$(function() { 
    $('a.video-preview').on('click', function(e) { 
     e.preventDefault(); 
     jwplayer('video-player').play(); 
    }); 

}); 
+0

你會在哪裏把'{{asset.file_scratch_encode_url}}'網址是什麼? – David542 2014-10-17 01:24:57

+0

確切你在哪裏,我想。這是您顯示來源的車把/鬍子模板嗎?無論如何,上面的代碼將會按照你的要求去做。 – 2014-10-17 01:39:12

1

假設你已經定義jwplayer和玩家已經加載並準備播放,如果你想點擊將加載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('video-player').load({file:video});