Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Embed All videos on one external js file

Hi sir good day,

I was trying to figure out if its possbile to embed like all of the videos on one external file? So I can use it over and over again?

for example right now I have this config file for our player..


***********************
jwplayer.config.js

jwplayer.key="VojTxqz9jLz+lqwTCgks/kyn2EJHJSSy56RhOQ==";

var jwConfig = {
width: "100%",
aspectratio: '16:9',
}

***********************

*********
embed script on the page

<script>
jwConfig.image = 'images/covers-big/video-covers/movie-1234.jpg';
jwConfig.file = 'tour-videos/tour-videos/movie-1234-h264-480p.mp4';

var playerInstance = jwplayer('movie-1234');
playerInstance.setup(jwConfig);
</script>

**************

that is how we embed the video on each of the pages we have...

But what would I like to this is like.. on the external js file..

I want to list all of the video we have.. and then just use them when we need them..

for example..

***************
<div id="video1"></div>
<div id="video2"></div>


var playerInstance = jwplayer('video1');
var playerInstance = jwplayer('video2');
playerInstance.setup(jwConfig);
***************

and on the config file.. there will be the path for the two different videos..

***************

var jwConfig = {
width: "100%",
aspectratio: '16:9',

file and image for video1,
image = 'images/covers-big/video-covers/video1.jpg';
file = 'tour-videos/tour-videos/video1-h264-480p.mp4';

file and image for video2,

image = 'images/covers-big/video-covers/video2.jpg';
file = 'tour-videos/tour-videos/video2-h264-480p.mp4';

file and image for video3,

image = 'images/covers-big/video-covers/video3.jpg';
file = 'tour-videos/tour-videos/video3-h264-480p.mp4';

***************

Is this possible sirs?? I badly need it.. or is there anyway to use all of the videos without manually embedding them?

If only I can use one file that lists all of the sources.. and then target the IDs only on the html page

2 Community Answers

Up Down

Alex

JW Player Support Agent  
0 rated :

Hi, there.

If I am understanding you directly, you would like a separate file containing a list of all of your videos and then have the ability to embed any one of those videos “on-demand”, correct? If so, I was able to work with the following:

////// videosList.json //////
[{
  "file": "http://qa.jwplayer.com/~abussey/demos/media/MP4/bunny.mp4",
  "image": "http://qa.jwplayer.com/~abussey/demos/media/JPG/bunny.jpg"
},{
  "file": "http://qa.jwplayer.com/~abussey/demos/media/MP4/jw_demo.mp4",
  "image": "http://qa.jwplayer.com/~abussey/demos/media/JPG/jw_demo.jpg"
}]

////// jwConfig.js //////
jwplayer.key="YOUR_LICENSE_KEY";

function setupPlayer(id) {
  var container = document.getElementById("players");
  var playerContainer = document.createElement("div");
  playerContainer.id = "video" + id;
  container.appendChild(playerContainer);
  var playerInstance = jwplayer(playerContainer.id);

  playerInstance.setup({
    playlist: "path_to/videosList.json",
    width: "100%",
    aspectratio: "16:9"
  });

  playerInstance.on("ready", function() {
    var playlistItem = playerInstance.getPlaylistItem(id);
    playerInstance.load({
      file: playlistItem.file,
      image: playlistItem.image
    });
  });
}

////// your_page.html //////
<body>
  <div id="players"></div>
  <script>
    setupPlayer(1);
  </script>
</body>

Please let me know if you need any more help or have any other questions.

Thank you!

Up Down

Alex

JW Player Support Agent  
0 rated :

Also, I forgot to mention that in this example, setupPlayer(1); would setup the player with the second item in the playlist because the first item would have an index of “0”.

This question has received the maximum number of answers.