adding HTML5 to video player
Permalink
So, Longtail video released their latest player (5.3) that has HTML5 and I am trying to figure out how to implement it into the c5 video player. I really need help figuring out where to put the code. here is what they say to do:
embedding the JW Player in your website is a simple, 3-step process:
1. Upload the jwplayer.js, player.swf and yt.swf files from the download
ZIP to your server. All other files in the download (documentation, source
code, etc) are optional.
2. Include the jwplayer.js somewhere in the head of your website:
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
3. Call the player setup somewhere in the body of your website. Here’s a
basic example:
<embed
flashvars="file=/data/bbb.mp4&autostart=true" allowfullscreen="true"
allowscripaccess="always" id="player1"
name="player1" src="player.swf" width="480" height="270"
/>
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
<div id="container">Loading the player ...</div>
<script type="text/javascript"> jwplayer("container").setup({
flashplayer: "/jwplayer/player.swf", file: "/uploads/video.mp4", height:
270, width: 480
});
</script>
When the page is loading, the JW Player is automatically instantiated on
top of the <div>. By default, the player is rendered in Flash. If Flash is
not supported (e.g. on an iPad), the player is rendered in HTML5.
The flashplayer option (to tell the javascript where the SWF resides) is
just one of many configuration options available for configuring the JW
Player.
Here’s another setup example, this time using a <video> tag instead of a
generic div:
<video
file="/uploads/video.mp4" height="270" id="container"
poster="/uploads/image.jpg" width="480">
</video>
<script type="text/javascript"> jwplayer("container").setup({
flashplayer: "/jwplayer/player.swf" </script>
In this case, the JW Player is actually inspecting <video> tag and loading
its attributes as configuration options. It’s a useful shortcut for
setting up a basic player.
Quick Embed
If you’ve uploaded your player.swf and jwplayer.js files to a folder
called “jwplayer” in the root of your website, you can embed the player by
using two simple lines of HTML:
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
<video class="jwplayer" src="/uploads/video.mp4"
poster="/uploads/image.jpg"></video>
That’s it! As long as you have everything in the right place, all <video>
tags on your page whose class is jwplayer will be replaced on your page by
the JW Player.
any advice on where to put this code and if there is anything I need to take out of the existing player code would be much appreciated.
embedding the JW Player in your website is a simple, 3-step process:
1. Upload the jwplayer.js, player.swf and yt.swf files from the download
ZIP to your server. All other files in the download (documentation, source
code, etc) are optional.
2. Include the jwplayer.js somewhere in the head of your website:
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
3. Call the player setup somewhere in the body of your website. Here’s a
basic example:
<embed
flashvars="file=/data/bbb.mp4&autostart=true" allowfullscreen="true"
allowscripaccess="always" id="player1"
name="player1" src="player.swf" width="480" height="270"
/>
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
<div id="container">Loading the player ...</div>
<script type="text/javascript"> jwplayer("container").setup({
flashplayer: "/jwplayer/player.swf", file: "/uploads/video.mp4", height:
270, width: 480
});
</script>
When the page is loading, the JW Player is automatically instantiated on
top of the <div>. By default, the player is rendered in Flash. If Flash is
not supported (e.g. on an iPad), the player is rendered in HTML5.
The flashplayer option (to tell the javascript where the SWF resides) is
just one of many configuration options available for configuring the JW
Player.
Here’s another setup example, this time using a <video> tag instead of a
generic div:
<video
file="/uploads/video.mp4" height="270" id="container"
poster="/uploads/image.jpg" width="480">
</video>
<script type="text/javascript"> jwplayer("container").setup({
flashplayer: "/jwplayer/player.swf" </script>
In this case, the JW Player is actually inspecting <video> tag and loading
its attributes as configuration options. It’s a useful shortcut for
setting up a basic player.
Quick Embed
If you’ve uploaded your player.swf and jwplayer.js files to a folder
called “jwplayer” in the root of your website, you can embed the player by
using two simple lines of HTML:
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
<video class="jwplayer" src="/uploads/video.mp4"
poster="/uploads/image.jpg"></video>
That’s it! As long as you have everything in the right place, all <video>
tags on your page whose class is jwplayer will be replaced on your page by
the JW Player.
any advice on where to put this code and if there is anything I need to take out of the existing player code would be much appreciated.
Hi all,
Please forgive my question, if it seems silly...
For number 2 below:
Which file exactly should I place the script from number 2??
and
Which file exactly should I place the script from number 3??
My home page theme is Column Cruiser..
2. Include the jwplayer.js somewhere in the head of your website:
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
3. Call the player setup somewhere in the body of your website. Here’s a
basic example:
<embed
flashvars="file=/data/bbb.mp4&autostart=true" allowfullscreen="true"
allowscripaccess="always" id="player1"
name="player1" src="player.swf" width="480" height="270"
What file or directory should I place the above file???
Please forgive my question, if it seems silly...
For number 2 below:
Which file exactly should I place the script from number 2??
and
Which file exactly should I place the script from number 3??
My home page theme is Column Cruiser..
2. Include the jwplayer.js somewhere in the head of your website:
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
3. Call the player setup somewhere in the body of your website. Here’s a
basic example:
<embed
flashvars="file=/data/bbb.mp4&autostart=true" allowfullscreen="true"
allowscripaccess="always" id="player1"
name="player1" src="player.swf" width="480" height="270"
What file or directory should I place the above file???
hey- you may be interested to know that someone has already created a block that fills this purpose available for free herehttp://www.concrete5.org/marketplace/addons/video-js-player/... which should be easier to set up.
Thank you for the quick reply. Also, all of the blogs I have read on the web praise JW Player, do you know if this HTML block will give me the same quality as the JW Player?
yeah, it should.
Thank you again for your input.
So I tried an older form I used on my site a while ago and it looked like it got the job done:
Now I am using a newer version of the Longtail Player, (mediaplayer-5.6-viral to be exact) and thus far I've just used an HTML block to place it into my site. Perhaps I'll play around with a few flashvars. Here is a link to the video sample on the page... please excuse whatever boring video I happen to have playing ;)
http://www.nathanhammack.com/c5/index.php/video/...
Oh an in case someone else wants to play around with this, here are a few helpful links for reference:
http://www.longtailvideo.com/support/jw-player-setup-wizard...
http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-...
http://www.longtailvideo.com/support/faq...