CODEWITHSUNDEEP
javascriptjwplayer
David542
David542

Reputation: 110143

How to load jquery url onclick?

I have the following <a> tag which is where the user will click to view their video. So far it will play a standard video url:

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

How would I load the video_url as well within the onclick attribute?

Upvotes: 1

Views: 580

Answers (3)

emaxsaun
emaxsaun

Reputation: 4201

You can do this with just JS, no jQuery needed - 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>

Upvotes: 1

Ben
Ben

Reputation: 885

Assume you already defined jwplayer and the player has been loaded and ready to play, this script will change the video in the player

 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});
    });

});

If you want the click will load jwplayer with the video, replace

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

with your player configuration.

Upvotes: 1

Jonathon Hibbard
Jonathon Hibbard

Reputation: 1546

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

});

Upvotes: 1

Related Questions