Example: Loading New Playlists

Here is an example of a setup that uses the JavaScript API to load new videos into JW Player on the fly:

 

Select a cool trailer to play:

These videos are loaded through the JW Player JavaScript API, using just a few lines of JavaScript code.

Embed code

As always, ensure you have uploaded a copy of JW Player and included the script in the <head> of your page, together with your player key. See the MP4 Video Embed article for more info. Next, place the following embed code at the location you want the player to appear:

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

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

Second, add the JavaScript to implement the load behaviour:

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

Last, add some HTML that calls this function with the correct files and images:

<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>

 

Please sign in to leave your feedback for this article.

Still don't have JW Player? Get It Here