Is it possible to add an HD switcher in the HTML5 player? Can somebody help me?
Thanks,
Cester
HD-Switcher for HTML5 Player
8 replies [Last post]
Posted: Thu, 2011-03-31 09:18
Edwin Bradford
Reply
I've been looking into this same problem for two days and I'm not sure its so easy. Sure you could swap *a single* SD file with *a single* HD file but HTML5 cross browser compatibility requires three video files, mp4, webm and ogv file format for each video, see http://camendesign.com/code/video_for_everybody and the most definitive article of them all http://diveintohtml5.org/video.html
If I understand correctly, and the way I have it set up, the way to implement true HTML5 cross browser compatibility with the JW Player is to use the video tag embed...
<video id="jwplayer-instance" width="640" height="360" poster="My.png">
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="My_video_sd.mp4" />
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" src="My_video_sd.webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source type="video/ogg" src="My_video_sd.ogv" />
</video>So far so good.
The problem is which HD file format do you load? You have to swap one of three SD file formats for one of three equivalent HD file formats. Without this you're just not HTML5 compatible on multiple devices.
The current HD plugin as you rightly point out can't do this, it can only swap one file for another, and the current playlist formats only support one file entry per video from what I can tell (discounting the HD Plugin's additional HD file tag).
Posted: Thu, 2011-03-31 12:45
PabloS
Reply
Edwin -
The player represents multiple <source> tags in a block called levels.
Your example above can be loaded into the player via the JavaScript API in the following way:
jwplayer("jwplayer-instance").load({
levels: [
{ file: "My_video_sd.mp4" },
{ file: "My_video_sd.webm" },
{ file: "My_video_sd.ogv" }
],
image: "My.png"
});
Posted: Thu, 2011-03-31 15:28
Edwin Bradford
Reply
Pablo, I just tried it and it works perfectly. I've been trying to get some kind of SD HD solution working for a few days now and you just solved it for me, I owe you a beer.
This is a great solution, really easy to understand, works in HTML5 and Flash, tested it Chrome, Firefox and IE8 and works easily inside Wordpress. The solutions I saw for VideoJS were much more complicated with patchy results and so far I've seen no solution for MediaElementsJS.
I was aware of the levels block but the JW Embedder docs don't mention it for this kind of usage. This is a major feature of JW Player, if I were Longtail I'd be featuring it on the front page.
So here's my code in case anyone's interested. This is already inside a Wordpress page loop, if you're not using or don't understand Wordpress php then just replace all the php tags with your file locations. In this case the HD and SD versions load on the FullScreen toggle button, FullScreen shows HD, otherwise SD. Please bear in mind I'm not a programmer so feel free to improve...
<script type="text/javascript">
jwplayer("jwplayer-instance").setup({
flashplayer: "<?php bloginfo('url'); ?>/wp-content/themes/twentyten-mod/jwplayer/player.swf",
stretching: 'uniform',
controlbar: 'over',
events: {
onFullscreen: function(event) {
if (event.fullscreen == true) {
jwplayer("jwplayer-instance").load({
levels: [
{ file: "<?php bloginfo('url'); ?>/wp-content/uploads/<?php echo get_post_meta($post->ID, 'Video', true); ?>_hd.mp4" },
{ file: "<?php bloginfo('url'); ?>/wp-content/uploads/<?php echo get_post_meta($post->ID, 'Video', true); ?>_hd.webm" },
{ file: "<?php bloginfo('url'); ?>/wp-content/uploads/<?php echo get_post_meta($post->ID, 'Video', true); ?>_hd.ogv" }
],
image: "<?php bloginfo('url'); ?>/wp-content/uploads/<?php echo get_post_meta($post->ID, 'Video', true); ?>.png"
});
// alert("fullscreen is on");
}
else if (event.fullscreen == false) {
jwplayer("jwplayer-instance").load({
levels: [
{ file: "<?php bloginfo('url'); ?>/wp-content/uploads/<?php echo get_post_meta($post->ID, 'Video', true); ?>_sd.mp4" },
{ file: "<?php bloginfo('url'); ?>/wp-content/uploads/<?php echo get_post_meta($post->ID, 'Video', true); ?>_sd.webm" },
{ file: "<?php bloginfo('url'); ?>/wp-content/uploads/<?php echo get_post_meta($post->ID, 'Video', true); ?>_sd.ogv" }
],
image: "<?php bloginfo('url'); ?>/wp-content/uploads/<?php echo get_post_meta($post->ID, 'Video', true); ?>.png"
});
// alert("fullscreen is off");
}
}
},
modes: [
{ type: "html5" },
{ type: "flash", src: "<?php bloginfo('url'); ?>/wp-content/themes/twentyten-mod/jwplayer/player.swf" },
{ type: "download" }
],
skin:'<?php bloginfo('url'); ?>/wp-content/themes/twentyten-mod/jwplayer/skins/stormtrooper.xml'
});
</script><!-- #JWPlayer -->I'll update the other thread about this. Thanks Pablo, made my week.
Posted: Mon, 2011-04-04 10:57
PabloS
Reply
@Edwin -
Thanks for sharing your code. You're right, we should do a better job demonstrating the sorts of things you can do with the load() function. Look for some updated examples in the future.
Posted: Wed, 2012-02-01 19:46
Fabien
Reply
Sorry to unbury this topic, but I am in a more complex case than Pablo. I already use the jwplayer playlist to load several vidéos at a time, and I want to be able to switch HD on and off for each videos in the playlist.
This is working perfectly in flash, but on html5 I don't know how to implement this. I am forced to list the entire playlist (with the properties of all items) and swap "file" and "hd.file" for all of them before reloading the modified playlist ?
And what if the user is in the middle of a video ? I have to restart the playback at the same time offset to mimic the flash behaviour ?
Don't you have a better and smarter solution ?
Does HD plugin have a JS API ?
Posted: Fri, 2012-02-03 04:43
JeroenW
Reply
Unfortunately, the HD plugin currently can only swap one "flavor" of video at a time. The workaround from Edwin indeed would not work when using playlists.
You could do the following: instead of one playlist (with "file" and "hd.file" entry per item), you create two playlists: one for MP4 and one for WebM (Ogg is not worth the effort). Next, you load one or the other playlist with a simple JavaScript trick like this:
http://www.longtailvideo.com/support/addons/21404/webm-hd-toggle-example
Note we are working on having the HD plugin support multiple codecs too. It's not something we have fixed short-term though:
Posted: Fri, 2012-03-16 13:20
Edwin Bradford
Reply
I picked this up again a week ago and found it wasn't working in the newly released IE9. There was some problem using the levels parameters, once I removed all references to levels it worked. I had to resolve it without using levels, it now uses browser codec support detection and seems to work again, code below.
As I've said before I'm not a programmer so if someone wants to improve on this please share. The codec support test is from http://stackoverflow.com/questions/7451635/how-to-detect-supported-video-formats-for-the-html5-video....
<div id="jwplayer-instance"></div>
<script type="text/javascript">
var myCodec = document.createElement( "video" ), webm;
if ( myCodec.canPlayType ) {
// Check for Webm support
typeStr = myCodec.canPlayType( "video/webm; codecs="vp8, vorbis"" );
webm = typeStr !== "";
}
if (webm == true) {
var videoType = "webm";
} else {
videoType = "mp4";
}
jwplayer("jwplayer-instance").setup({
flashplayer: "/jwplayer/player.swf",
width: '640',
height: '360',
stretching: 'none',
controlbar: 'over',
image: "video_image.png",
file: "myFile_sd." + videoType,
events: {
onFullscreen: function(event) {
// alert("fullscreen is on");
if (event.fullscreen == true) {
jwplayer("jwplayer-instance").load(
{ file: "myFile_hd." + videoType }
);
}
else if (event.fullscreen == false) {
// alert("fullscreen is off");
jwplayer("jwplayer-instance").load(
{ file: "myFile_sd." + videoType }
);
}
}
},
modes: [
{ type: "html5" },
{ type: "flash", src: "player.swf" },
{ type: "download" }
],
skin:'mySkin.zip'
});
</script>
@Cester -
The player doesn't currently have an HD toggle in HTML5 mode, but it would be relatively easy to implement one yourself using the JavaScript API (the load function specifically):
http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12540/javascript-api-reference...