move from Jaris > MediaElement for <video> fallback + use composer

also made it so the video element is no longer bigger than parent div
This commit is contained in:
Daku
2016-05-14 23:14:29 +01:00
parent dd105e174e
commit b0daab8766
46 changed files with 44 additions and 8633 deletions

View File

@@ -14,7 +14,6 @@
* In the future, it may be necessary to change the user agent checks to reflect the current state of H.264 support.<br><br>
* Made possible by:<br>
* <a href='http://getid3.sourceforge.net/'>getID3()</a> - Gets media information with PHP (no bulky FFMPEG API required).<br>
* <a href='http://jarisflvplayer.org/'>Jaris FLV Player</a> - GPLv3 flash multimedia player.
*/
class VideoFileHandler extends DataHandlerExtension {

View File

@@ -4,45 +4,48 @@ class VideoFileHandlerTheme extends Themelet {
public function display_image(Page $page, Image $image) {
$data_href = get_base_href();
$ilink = $image->get_image_link();
$thumb_url = make_http($image->get_thumb_link()); //used as fallback image
$ext = strtolower($image->get_ext());
if ($ext == "mp4") {
$html = "Video not playing? <a href='" . $image->parse_link_template(make_link('image/$id/$id%20-%20$tags.$ext')) . "'>Click here</a> to download the file.<br/>
<script language='JavaScript' type='text/javascript'>
if( navigator.userAgent.match(/Firefox/i) ||
navigator.userAgent.match(/Opera/i) ||
(navigator.userAgent.match(/MSIE/i) && parseFloat(navigator.appVersion.split('MSIE')[1]) < 9)){
document.write(\"<object data='{$data_href}/lib/Jaris/bin/JarisFLVPlayer.swf' id='VideoPlayer' type='application/x-shockwave-flash' height='" . strval($image->height + 1). "px' width='" . strval($image->width) . "px'><param value='#000000' name='bgcolor'><param name='allowFullScreen' value='true'><param value='high' name='quality'><param value='opaque' name='wmode'><param value='source=$ilink&amp;type=video&amp;streamtype=file&amp;controltype=0' name='flashvars'></object>\");
}
else {
document.write(\"<video controls autoplay loop'>\");
document.write(\"<source src='" . make_link("/image/" . $image->id) . "' type='video/mp4' />\");
document.write(\"<object data='{$data_href}/lib/Jaris/bin/JarisFLVPlayer.swf' id='VideoPlayer' type='application/x-shockwave-flash' height='" . strval($image->height + 1). "px' width='" . strval($image->width) . "px'><param value='#000000' name='bgcolor'><param name='allowFullScreen' value='true'><param value='high' name='quality'><param value='opaque' name='wmode'><param value='source=$ilink&amp;type=video&amp;streamtype=file&amp;controltype=0' name='flashvars'></object>\");
}
</script>
<noscript>Javascript appears to be disabled. Please enable it and try again.</noscript>";
} elseif ($ext == "flv") {
$html = "Video not playing? <a href='" . $image->parse_link_template(make_link('image/$id/$id%20-%20$tags.$ext')) . "'>Click here</a> to download the file.<br/>
<object data='{$data_href}/lib/Jaris/bin/JarisFLVPlayer.swf' id='VideoPlayer' type='application/x-shockwave-flash' height='" . strval($image->height + 1). "px' width='" . strval($image->width) . "px'>
<param value='#000000' name='bgcolor'>
<param name='allowFullScreen' value='true'>
<param value='high' name='quality'>
<param value='opaque' name='wmode'>
<param value='source={$ilink}&amp;type=video&amp;streamtype=file&amp;controltype=0' name='flashvars'>
</object>";
} elseif ($ext == "ogv") {
$html = "Video not playing? <a href='" . $image->parse_link_template(make_link('image/$id/$id%20-%20$tags.$ext')) . "'>Click here</a> to download the file.<br/>
<video controls autoplay loop>
<source src='" . make_link("/image/" . $image->id) . "' type='video/ogg' />
</video>";
} elseif ($ext == "webm") {
$ie_only = "<!--[if IE]><p>To view webm files with IE, please <a href='http://tools.google.com/dlpage/webmmf/' target='_blank'>download this plugin</a>.</p><![endif]-->";
$html = $ie_only ."Video not playing? <a href='" . $image->parse_link_template(make_link('image/$id/$id%20-%20$tags.$ext')) . "'>Click here</a> to download the file.<br/>
<video controls autoplay loop>
<source src='" . make_link("/image/" . $image->id) . "' type='video/webm' />
</video>";
}
else {
$full_url = make_http($ilink);
$html = "Video not playing? <a href='" . $image->parse_link_template(make_link('image/$id/$id%20-%20$tags.$ext')) . "'>Click here</a> to download the file.<br/>";
//Browser media format support: https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
$supportedExts = ['mp4' => 'video/mp4', 'm4v' => 'video/mp4', 'ogv' => 'video/ogg', 'webm' => 'video/webm', 'flv' => 'video/flv'];
if(array_key_exists($ext, $supportedExts)) {
//FLV isn't supported by <video>, but it should always fallback to the flash-based method.
if($ext == "webm") {
//Several browsers still lack WebM support sadly: http://caniuse.com/#feat=webm
$html .= "<!--[if IE]><p>To view webm files with IE, please <a href='https://tools.google.com/dlpage/webmmf/' target='_blank'>download this plugin</a>.</p><![endif]-->";
}
$html_fallback = "
<object width=\"100%\" height=\"480px\" type=\"application/x-shockwave-flash\" data=\"lib/vendor/swf/flashmediaelement.swf\">
<param name=\"movie\" value=\"lib/vendor/swf/flashmediaelement.swf\" />
<param name=\"allowFullScreen\" value=\"true\" />
<param name=\"wmode\" value=\"opaque\" />
<param name=\"flashVars\" value=\"controls=true&autoplay=true&poster={$thumb_url}&file={$full_url}\" />
<img src=\"{$thumb_url}\" />
</object>";
if($ext == "flv") {
//FLV doesn't support <video>.
$html .= $html_fallback;
} else {
$html .= "
<video controls autoplay width=\"100%\">
<source src='{$ilink}' type='{$supportedExts[$ext]}'>
<!-- If browser doesn't support filetype, fallback to flash -->
{$html_fallback}
</video>";
}
} else {
//This should never happen, but just in case let's have a fallback..
$html = "Video type '$ext' not recognised";
}
$page->add_block(new Block("Video", $html, "main", 10));