Hi,
We are using JW Player 5.8 on a wordpress site. I have it working in FF, Chrome & IE, but on the iPad the videos won't switch.
See new.mikestewart.ca. In the Video Resource box we have 4 videos with thumbs on the left and a video play area on the right. When you first load the page, the video play area, loads the first video ready for the user to play the video and a poster image for that video. But if you click on the thumb on the left, the video and poster image switch from the current video to the new video that you just clicked. This is working in FF, Chrome and IE, but on the iPad the video doesn't switch to the new video and thumb. Also, when the page is first loaded the video poster image is in the top left corner rather than being the same size as the video play area.
Need to know how to solve these 2 issues.
Here is the code for switching the video:
<a href="#" onclick="switchVideo('/media/videos/home/video1','/media/videos/home/video1.jpg')"><img src="/media/videos/home/video1_thumb.jpg" width="75" height="44" /></a>
Here is the setup code:
jwplayer('videowrapper').setup({
flashplayer: '/wp-content/uploads/jw-player-plugin-for-wordpress/player/player.swf',
levels: [
{ file: "/media/videos/home/video1.mp4" },
{ file: "/media/videos/home/video1.webm" },
{ file: '/media/videos/home/video1.flv' }
],
preload: "none",
height: 193,
width: 343,
controlbar: 'none',
image: '/media/videos/home/video1.jpg',
id: 'myplayer'
});Here is the function to switch the video:
function switchVideo(videofile, imagefile) {
jwplayer('videowrapper').stop();
jwplayer('videowrapper').load({levels: [{file: videofile + '.mp4'}, {file: videofile + '.webm'}, {file: videofile + '.flv'}], image: imagefile});
jwplayer('videowrapper').play();
}Anybody have any idea how to fix the size of the poster image on the iPad and how to get the videos to switch?
Thank you
@Laurelle
IMHO, you don't really need to use a separate JavaScript function to switch from one video to another, the load function feature of the JWPlayer will do that for you.
I must admit here that I have no knowledge/experience in using/working with WordPress
I use the load feature multiple times on my web site, mirana.net in both the audio and video sections.
The web site uses for the video two formats only namely; the mp4 which is the H.264 mp4 iso v2 type which will play both on a desktop and a mobile unit. Hence, there is no need to use the flv which isn't compatible with the mobiles.
The other is the ogv video format and I use an optimized version of the ogv format that is much smaller in size than the normal ogv by up to 50% with a great utility that I have costing only $29.
I dropped using the webm format since their file sizes are larger than the optimized ogv format.
I would setup a simple test page(non-wordpress) having the alternative as using the switch function.
For example:
<a href="#" onclick="jwplayer().load({levels:[{file:'contents/Calgary.mp4'},{file:'contents/Calgary.ogv'}],image: 'contents/calgary.jpg','playlist.image': 'contents/studio9c.jpg',title:'The City of Calgary, Alberta Canada',description:'The Oil capital of Canada with a population of 1.2 million in the Canadian province of Alberta located 90km east of Banff National Park in the Canadian Rocky Mountains.'}).play()">
<img src="contents/calgary1.jpg" alt="City of Calgary">
<br>
<span><span>City of Calgary</span><br>Alberta Canada</span>
</a>
Being a Calgarian and not living in Canada, only fitting to give a Canadian a Canadian example..;-)
Once this is working to your satistfaction then simply transfer this to your WordPress.
Not sure IF this is helpful to you or not BUT I am sure 'food' for thought.
Feel free to contact me from off my web site, if I can be of any help or assistance.