I saw this today: http://www.longtailvideo.com/support/blog/21853/hd-video-everywhere. I've been trying out some ideas in it, not least the slightly different way of using JS to setup the flashvars before calling the player.
Aside from the fact that there is still a typo in the example's modes statement (http://www.longtailvideo.com/support/blog/21853/hd-video-everywhere#comments), I am having a few problems.
Here's something I was playing around with:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
</head>
<body>
<div id="mediaplayer">Video should appear here shortly ...</div>
<script type="text/javascript">
jwplayer("mediaplayer").setup({
flashplayer: "/jwplayer/player.swf",
height: 270,
width: 480,
image: "/image.jpg",
modes: [
{ type: "html5" },
{ type: "flash", src: "/jwplayer/player.swf" },
],
levels: [
{ file: "/video.mp4" },
{ file: "/video.webm" }
]
});
</script>
</body>
</html>... and this works nicely in all the browsers I'm interested in, including IE8 (with Flash), ditto IE6 ! (If there's anything wrong with the way I have coded it, please let me know.)
But because, as the article points out, desktop browsers are likely to favour webm in the future, I thought I'd try Jeroen's approach of setting up a JS variable array with the flashvars AND using JS to see if the browser could play Webm. If it can, it substitutes a suitable file name. When I try that, like this ...
<div id="mediaplayer">Video should appear here shortly ...</div>
<script type="text/javascript">
var options = {
file: '/video.mp4',
height: 272,
image: '/image.jpg',
modes: [
{ type: 'html5' },
{ type: 'flash', src: '/jwplayer/player.swf' }
],
width: 480
};
if(!!document.createElement('video').canPlayType('video/webm')) {
options.file = 'video.webm';
}
jwplayer("mediaplayer").setup(options);
</script>... it stops working on IE ! Clearly there's some JS subtlety that is eluding me.
So, questions:
1. MAIN QUESTION: Is there a way to make this work ?
2. That typo I mentioned at the start.
3. Whilst we're on the subject of discrepancies, the conditional JS shows like this:
if(!!document.createElement('video').canPlayType('video/webm')) {
options.file = '/assets/video-270p.webm';
options.plugins.hd.file = '/assets/video-720p.webm'; ... but the corresponding source code for that same page (which demonstrates the point being talked about) has this ...
if(!!document.createElement('video').canPlayType('video/webm')) {
options.file = 'http://content.bitsontherun.com/videos/q1fx20VZ-27m5HpIu.webm'
options.plugins['hd-2'].file = 'http://content.bitsontherun.com/videos/q1fx20VZ-MoSrD9rm.webm';
}... the difference is that on the text on the page, the first options line has a trailing semi-colon (;) but in the source code, it does not. Is one required or not ?
4. Whilst I'm here, I dimly recall somebody telling me that there is a difference in the way that single and double quotation marks are treated. In the examples on this site, some use singles, some use doubles and others mix & match. Some have use in examples but the source code itself does something different. From the perspective of using JWPlayer, is it important or not ?
Thanks,
R.
Well, as regards #1, I have got around the problem by using http://www.modernizr.com/
<div id="mediaplayer">Video should appear here shortly ...</div><script type="text/javascript">
if (Modernizr.video.webm) {
var options = {
file: '/video.webm',
height: '100%',
image: '/image.jpg',
modes: [
{ type: 'html5' }
],
width: '100%'
};
} else {
var options = {
file: '/video.mp4',
height: '100%',
image: '/image.jpg',
modes: [
{ type: 'html5' },
{ type: 'flash', src: '/jwplayer/player.swf' }
],
width: '100%'
};
}
jwplayer("mediaplayer").setup(options);
</script>
... but if anybody knwos a better way without having to load the Modernizr script, I'd still be pleased to hear.
R.