I've begun using the free JWPlayer which can handle playing both Flash & HTML5 files to play videos on my sites.
http://www.longtailvideo.com
Longtail also has a paid version of the player that you can re-brand, and offers some other interesting add-ons.
Together, HTML5 & Flash support media on both the iPod/iPad platform as well as more conventional platforms.
The implementation is pretty straight forward and you can read more on their site and forum.
Longtail recommends that you convert your( existing) videos to an .mp4 format so that you don’t have many different
media file types to deal with.
To convert flv videos to .mp4 I found that the free HandBrake converter, with versions for both Mac and Windows did the
trick right out of the box (don’t forget to check the “web optimized” box.
http://handbrake.fr/downloads.php
I used the Regular > Normal settings with the container set for MP4 and the “web optimized” check box checked.
The video files were small and loaded quickly
Back to the JWPlayer...
First I needed to download the (free) player and other necessary files from their site at:
http://www.longtailvideo.com/players/jw-flv-player/
NOTE: If you don’t want a “share this video” page to come up at the end of the video, don’t forget to un-check
the “include Viral, a video sharing plugin” check box.
After uploading the jwplayer folder containing the latest swfobject.js, jwplayer.js, and player.swf to the root
directory of your site.
Then, in the body where you want the player to appear:
<div id="containera"> </div>
<script type="text/javascript" src="../jwplayer/jwplayer.js" ></script>
<script type="text/javascript">
jwplayer("containera").setup({
'controlbar': 'bottom',
'file': 'http://www.your_site.com<?php foreach ($your_videosRecord['your_mp4_video_file'] as $upload): ?><?php echo
$upload['urlPath'] ?><?php endforeach ?>',
'height': '480',
'width': '720',
'image': 'http://www.your_site.com<?php foreach ($your_videosRecord['still_image_to_display_before _the_video_plays']
as $upload): ?><?php echo $upload['thumbUrlPath2'] ?><?php endforeach ?>',
'autostart': 'false'
});
</script>
IMPORTANT: *** Make sure that you don't have a CSS id called containera elsewhere in the style sheets called for this
page or in your page code, or you'll get very strange results.***
Adjust the height and width to suit your needs
autostart can be either true or false
I deleted the default text in the<div id="container">loading the player...</div> and replaced it with an
NOTE: Version 5x of the free JWPlayer had a logo that disappeared after a few seconds. Starting with V6+, the logo stays
annoyingly visible. Don't say I didn't warn you...
A FURTHER NOTE:
If your video doesn't play in Internet Explorer (9) you might try adding this line to your .htaccess file in the root
directory of your site.
(If you don't have an .htaccess file, you can create one in any text editor. Just make sure it's saved as plain text and
that there's no other extension on the file you create. Then upload it to the root directory.)
AddType video/mp4 .mp4
IF there's a "Compatibility Mode" issue (Thank you Microsoft), you could try adding this to your video viewer as the
first metatag in the head section:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
Here’s the gist of using the “compatible” metatag: <meta http-equiv="X-UA-Compatible" content=" _______ " />
The Standard User Agent modes (the non-emulate ones) ignore <!DOCTYPE> directives in your page and render based on
the standards supported by that version of IE (e.g., IE=8 will better obey table border spacing and some pseudo
selectors than IE=7).
Whereas, the Emulate modes tell IE to follow any <!DOCTYPE> directives in your page, rendering standards mode based
the version you choose and quirks mode based on IE=5
Possible values for the content attribute are:
content="IE=5"
content="IE=7"
content="IE=EmulateIE7"
content="IE=8"
content="IE=EmulateIE8"
content="IE=9"
content="IE=EmulateIE9"
content="IE=edge"
You can learn more on the Microsoft “Defining document compatibility” doc at:
http://msdn.microsoft.com/en-us/library/cc288325
INSTALLING V5+
After uploading the swfobject.js, jwplayer.js, and player.swf to the root directory of your site.
Then insert this code in the head of your page:
<script type="text/javascript" src="jwplayer.js"></script>
Then, in the body where you want the player to appear:
<div id="containera"> </div>
<script type="text/javascript">
jwplayer("containera").setup({
file: "http://www.your_site.com<?php foreach ($your_videosRecord['your_mp4_video_file'] as $upload): ?><?php echo
$upload['urlPath'] ?><?php endforeach ?>",
height: 480,
width: 720,
image: "http://www.your_site.com<?php foreach ($your_videosRecord['still_image_to_display_before _the_video_plays'] as
$upload): ?><?php echo $upload['thumbUrlPath2'] ?>"<?php endforeach ?>,
autostart: true,
modes: [
{ type: "html5" },
{ type: "flash", src: "player.swf" }
]
});
</script>
IMPORTANT: *** Make sure that you don't have a CSS id called containera elsewhere in the style sheets called for this
page or in your page code, or you'll get very strange results.***
The modes: code makes sure that html5 is tried first and if it’s not compatible with the particular platform, then
flash is tried.
Adjust the height and width to suit your needs
autostart can be either true or false
I deleted the default text in the<div id="container">loading the player...</div> and replaced it with an
|
