Hello everyone,
Here is my first snippet (and first php code ever actually). It does basically what subject name says - easily puts video html5 tag with multiple file formats (mp4, ogg, webm, flv) and adds code for Flash fall back for older browsers.
The code is surely not the most perfect one so all advice is appreciated
But it works how I need. If anyone likes feel it free to modify and/or use.
Here is the example:
http://thelikeable.com/projects/motion/redisend
And snippet call which generates that:
[[html5Player? &ogg=`rediSend_promotional_video.ogg` &flv=`rediSend_promotional_video.flv` &width=`800` &height=`512` &image=`rediSend_splash.jpg`]]
And here is the code for the snippet itself (with comments). In case of any questions feel free to ask:
<?php
// HTML5 Video Player Snippet created by Grzegorz 'dzes' Widła
// Based on Video JS OpenSource HTML 5 Video Player
// Version 0.9 June 2010
// For full player templating capabilities go here: http://videojs.com/
// Download package and apply css and javascript files responsible for styling.
// If you prefer to keep it simple just erase few lines of the snippet below line 63 (check comments there)
// Style div.wrap-video for alignement of the player.
// Example usage:
// [[html5Player? &mp4=`fileurl.mp4` &image=`splash.png` &width=`640` &height=`360`]]
// Four file formats:
// mp4, webm, ogg, flv
// Using mp4 your video can be played on very most of devices/browsers but check AVC H.264 Licencing first.
// Suggested are both ogg and mp4 (for all browsers support)
// PARAMETERS:
// &mp4=`fileurl.mp4`
// &webm=`fileurl.webm`
// &ogg=`fileurl.ogg`
// &flv=`fileurl.flv`
// &width=`width of the video in pixels`
// &height=`height of the video in pixels`
// &image=`splash image url.extension`
// VIDEO FORMATS
$mp4Code = '<source src="'. $mp4 .'" type="video/mp4">' . "\n";
$webmCode = '<source src="'. $webm .'" type="video/webm">' . "\n";
$oggCode = '<source src="'. $ogg .'" type="video/ogg">' . "\n";
$flashFLVCode = '<param name="flashvars" value=\'config={"clip":"'. $flv .'"}\' />' . "\n";
$flashMP4Code = '<param name="flashvars" value=\'config={"clip":"'. $mp4 .'"}\' />' . "\n";
// PRINTED CODE
echo "\n" . '<div class="wrap-video" style="width: '. $width .'px">';
echo "\n" . '<div class="video-js-box">' . "\n";
echo '<video class="video-js" width="'. $width .'" height="'. $height .'" poster="'. $image .'" controls preload>' . "\n";
if (isset($mp4)) {
echo $mp4Code;
}
if (isset($webm)) {
echo $webmCode;
}
if (isset($ogg)) {
echo $oggCode;
}
echo "\n" . '<object width="'. $width .'" height="'. $height .'" type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowfullscreen" value="true" />' . "\n";
if (isset($mp4)) {
echo $flashMP4Code;
}
else {
echo $flashFLVCode;
}
echo '<img src="'. $image .'" width="'. $width .'" height="'. $height .'" alt="Poster Image" title="No video playback capabilities." />
</object>
</video>' . "\n";
// GET RID OF THAT IF NOT USING VIDEO JS FOR STYLING
echo '<p class="vjs-no-video"><strong>Download Video:</strong>' ."\n";
if (isset($mp4)) {
echo '<a href="'. $mp4 .'">MP4</a> ' . "\n";
}
if (isset($webm)) {
echo '<a href="'. $webm .'">WebM</a> ' . "\n";
}
if (isset($ogg)) {
echo '<a href="'. $ogg .'">Ogg</a> ' . "\n";
}
if (isset($flv)) {
echo '<a href="'. $flv .'">Flv</a> ' . "\n";
}
echo '</p>' . "\n";
// DELETE TILL HERE
echo '</div>' . "\n";
echo '</div>' . "\n";
?>
☆ A M B ☆
