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

One Player multiple videos thumbs

Hi there

I am using wordpress for our new site and I have a couple of questions.

My design is to have the player at the top of the page and create individual graphics that when the visitor clicks a graphic, it loads the video into the player at the top without leaving the page. and when they go on to select another graphic, it loads the next video into it also. I don't want to use the jwplayer playlist yet if I can help it.

If this is not supported in WP, if anyone knows how I can achieve this in HTML I sure can use some help

Many thanks and have a safe Memorial Day

4 Community Answers

Up Down

Todd

JW Player Support Agent  
0 rated :

You can load new videos into an existing player with our Javascript API’s .load() call. You will probably need to write custom code in the WordPress post, but try something like this in each image after you already have the first video set up on the page:

<img src="your_image_URL" onclick="jwplayer().load({file:'this_video_URL'});jwplayer().play();">

The new video should autostart in the same player when you click on the image.

Please see our full API reference document at https://developer.jwplayer.com/jw-player/docs/developer-guide/api/javascript_api_reference/ for more details.

Up Down

faith0601

User  
0 rated :

Thanks Todd I am using this code to achieve my earlier request I found it on this website.

<script src="//christiantvonline.com/jwplayer6/jwplayer.js"></script>
<script>jwplayer.key="xxxxxxxxxRw==";</script>
<div id="myElement"></div>

<script>
var playerInstance = jwplayer("myElement");
playerInstance.setup({
image: "",
file: "",
title: "My Cool Trailer"
});
</script>

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

<li><a href="javascript:loadVideo('http://christiantvonline.net/streams/power_of_praise.mp4','http://christiantvonline.net/thumbs/BCF006.jpg')">Video 1</a></li>
<li><a href="javascript:loadVideo('http://christiantvonline.net/streams/open_our_eyes.mp4','http://christiantvonline.net/thumbs/BCF006.jpg')">Video 2</a></li>

This is not working, does anyone have any ideas, video1 and video2 are not responsive. Could it be a javascript issue.

Any help appreciated. this is being implemented in wordpress

Up Down

faith0601

User  
0 rated :

It actually worked.

Thanks

Up Down

Todd

JW Player Support Agent  
0 rated :

Glad to hear it’s working now.

This question has received the maximum number of answers.