EVideoJS extends CWidget and implements a base class for the VideoJS HTML5 Video Player.
Tested with Yii Framework v.1.1.6 and VideoJS 1.3.0.
Support: http://www.yiiframework.com/forum/index.php?/topic/16592-evideojs/
Installation ¶
- Extract the
videojsfolder underprotected/extensions.
Usage ¶
The bare minimum configuration needs:
- video_mp4 URL
- width
- height
The code below shows common usage and options defaults.
$this->widget('application.extensions.videojs.EVideoJS', array(
'options' => array(
// Unique identifier, is autogenerated by default, useful for jQuery integrations.
'id' => false,
// Video and poster width in pixels
'width' => 320,
// Video and poster height in pixels
'height' => 240,
// Poster image absolute URL
'poster' => false,
// Absolute URL of the video in MP4 format
'video_mp4' => false,
// Absolute URL of the video in OGV format
'video_ogv' => false,
// Absolute URL of the video in WebM format
'video_webm' => false,
// Use Flash fallback player ?
'flash_fallback' => true,
// Address of custom Flash player to use as fallback
'flash_player' => 'http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf',
// Show controls ?
'controls' => true,
// Preload video content ?
'preload' => true,
// Autostart the playback ?
'autoplay' => false,
// Show VideoJS support link ?
'support' => true,
// Show video download links ?
'download' => true,
),
));
Resources ¶
- VideoJS official web site: HTML5 Video Player
Javascript player not activated
You have a nice widget, however, i would be glad to say something about it:
1) why you print out with echo in manner of many params instead of concatenate a string ?
you do this
echo $something , "some string" , $something2, "some string 2";instead of this
echo $something . "some string" . $something2 . "some string 2"2) when you register assets, and publish css and js files, you should also execute js inicialization script, such as this:
Yii::app()->clientScript->registerScript("videoJS1","VideoJS.setupAllWhenReady();", CClientScript::POS_HEAD);BTW, mp4 videos don't work on firefox.
I got your extension BTW wich this corrections i made, contact me if you want me to send you.
alexserverone at gmail dot com
regards.
RE: Javascript player not activated
Hello Alex,
Concatenation slows down the process because PHP must add strings together. Just a micro-optimization.
I made it this way because, in my needs at least, the activation can be triggered by code like you wrote or via the JQuery plugin provided (see "Adding VideoJS to your page."). Anyway, probably would be helpful to have a param to auto-activate.
I started a thread in the forum to discuss about this extension:
http://www.yiiframework.com/forum/index.php?/topic/16592-evideojs/
Hope this helps.
Best wishes,
Marco
updated for use with skins (including the autostartscript from alexserver)
New EVideoJS.php
<?php /* * EVideoJS widget class file. * * EVideoJS extends CWidget and implements a base class for the VideoJS player. * More about VideoJS HTML5 Video Player can be found at http://videojs.com * * @version 1.0 - 20110209 * * @author Marco Del Tongo <info@marcodeltongo.com> * @link http://www.marcodeltongo.com * @copyright Copyright © 2011 Marco Del Tongo * @license New BSD License http://www.opensource.org/licenses/bsd-license.php */ class EVideoJS extends CWidget { /** * Mantains widget defaults. * * @var array */ public $_options = array( // Unique identifier, is autogenerated by default, useful for jQuery integrations. 'id' => false, // Video and poster width in pixels 'width' => 320, // Video and poster height in pixels 'height' => 240, // Poster image absolute URL 'poster' => false, // Absolute URL of the video in MP4 format 'video_mp4' => false, // Absolute URL of the video in OGV format 'video_ogv' => false, // Absolute URL of the video in WebM format 'video_webm' => false, // Use Flash fallback player ? 'flash_fallback' => true, // Address of custom Flash player to use as fallback 'flash_player' => 'http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf', // Show controls ? 'controls' => true, // Preload video content ? 'preload' => true, // Autostart the playback ? 'autoplay' => false, // Show VideoJS support link ? 'support' => true, // Show video download links ? 'download' => true, // Use Skin? // Valid are 'vim','tube' and 'hu' or your own skins if in assets/skins folder 'skin' => '', ); /** * Mantains widget user options. * * @var array */ public $options = array(); /** * Simply publish our assets. */ public function init() { $this->publishAssets(); } /** * Simply map our options to player. */ public function run() { /* * Get options */ extract($this->_options); extract($this->options); if (!$id) { $id = 'VideoJS_' . uniqid(); } /* * Start Video4All HTML */ echo "<!-- Begin VideoJS -->\n<div id='$id' "; /** * Select Skin */ if($skin != '') { $basePath = dirname(__FILE__) . DIRECTORY_SEPARATOR . 'assets' . DIRECTORY_SEPARATOR; $baseUrl = Yii::app()->assetManager->getPublishedUrl($basePath); Yii::app()->clientScript->registerCssFile($baseUrl . DIRECTORY_SEPARATOR .'skins'. DIRECTORY_SEPARATOR .$skin.'.css'); } echo "class='video-js-box ".$skin."-css'>\n<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->"; /* * Video tag */ echo '<video class="video-js" width="', $width, '" height="', $height, '"'; if ($controls) { echo ' controls'; } if ($preload) { echo ' preload'; } if ($autoplay) { echo ' autoplay'; } if ($poster) { echo ' poster="', $poster, '"'; } echo ">\n"; /* * Video types */ if ($video_mp4) { echo '<source src="', $video_mp4, '" type=\'video/mp4; codecs="avc1.42E01E, mp4a.40.2"\' />', "\n"; } if ($video_webm) { echo '<source src="', $video_webm, '" type=\'video/webm; codecs="vp8, vorbis"\' />', "\n"; } if ($video_ogv) { echo '<source src="', $video_ogv, '" type=\'video/ogg; codecs="theora, vorbis"\' />', "\n"; } /* * Flash fallback */ if ($flash_fallback) { echo "<!-- Flash Fallback. Use any flash video player here. Make sure to keep the vjs-flash-fallback class. -->\n"; echo '<object id="flash_fallback_', uniqid(), 'class="vjs-flash-fallback" width="', $width, '" height="', $height, '" type="application/x-shockwave-flash"'; if ($flash_player) { echo 'data="', $flash_player, '"'; } echo ">\n"; echo "<param name='movie' value='$flash_player' />\n<param name='allowfullscreen' value='true' />\n"; echo '<param name="flashvars" value=\'config={"playlist":["', $poster, '", {"url": "', $video_mp4, '","autoPlay":', (($autoplay) ? 'true' : 'false'), ',"autoBuffering":true}]}\' />', "\n"; echo "<!-- Image Fallback. Typically the same as the poster image. -->\n"; echo "<img src='$poster' width='$width' height='$height' alt='Poster Image' title='No video playback capabilities.' />"; echo "\n</object>\n"; } /* * Close video tag */ echo "</video>\n"; /* * Downloads */ if ($download) { echo "<!-- Download links provided for devices that can't play video in the browser. -->\n<p class='vjs-no-video'><strong>Download Video:</strong>\n"; if ($video_mp4) { echo '<a href="', $video_mp4, '">MP4</a>', "\n"; } if ($video_webm) { echo '<a href="', $video_webm, '">WebM</a>', "\n"; } if ($video_ogv) { echo '<a href="', $video_ogv, '">Ogg</a>', "\n"; } if ($support) { echo '<br /><!-- Support VideoJS by keeping this link. --><a href="http://videojs.com">HTML5 Video Player</a> by VideoJS'; } echo "\n</p>\n"; } echo "</div>\n<!-- End VideoJS -->"; } protected static function publishAssets() { $assets = dirname(__FILE__) . DIRECTORY_SEPARATOR . 'assets' . DIRECTORY_SEPARATOR; $baseUrl = Yii::app()->assetManager->publish($assets, false, -1, YII_DEBUG); if (is_dir($assets)) { Yii::app()->clientScript->registerCoreScript('jquery'); Yii::app()->clientScript->registerScriptFile($baseUrl . DIRECTORY_SEPARATOR . 'video.js', CClientScript::POS_HEAD); Yii::app()->clientScript->registerCssFile($baseUrl . DIRECTORY_SEPARATOR. 'video-js.css'); Yii::app()->clientScript->registerScript("videoJS1","VideoJS.setupAllWhenReady();", CClientScript::POS_HEAD); } else { throw new Exception('EVideoJS - Error: Couldn\'t find assets to publish.'); } } }Diff to previous version:
[diff] --- EVideoJS.php 2011-02-09 16:21:48.000000000 +0100 +++ EVideoJS.php.new 2011-02-25 19:55:52.126523501 +0100 @@ -51,6 +51,9 @@ 'support' => true, // Show video download links ? 'download' => true, + // Use Skin? + // Valid are 'vim','tube' and 'hu' or your own skins if in assets/skins folder + 'skin' => '', ); /** * Mantains widget user options. @@ -85,7 +88,19 @@ * Start Video4All HTML */ echo "<!-- Begin VideoJS -->\n<div id='$id' "; - echo "class='video-js-box'>\n<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->"; + + /** + * Select Skin + */ + + if($skin != '') { + $basePath = dirname(__FILE__) . DIRECTORY_SEPARATOR . 'assets' . DIRECTORY_SEPARATOR; + $baseUrl = Yii::app()->assetManager->getPublishedUrl($basePath); + + Yii::app()->clientScript->registerCssFile($baseUrl . DIRECTORY_SEPARATOR .'skins'. DIRECTORY_SEPARATOR .$skin.'.css'); + } + + echo "class='video-js-box ".$skin."-css'>\n<!-- Using the Video for Everybody Embed Code http://camendesign.com/code/video_for_everybody -->"; /* * Video tag @@ -170,15 +185,16 @@ protected static function publishAssets() { - $assets = dirname(__FILE__) . '/assets'; - $baseUrl = Yii::app()->assetManager->publish($assets); + $assets = dirname(__FILE__) . DIRECTORY_SEPARATOR . 'assets' . DIRECTORY_SEPARATOR; + $baseUrl = Yii::app()->assetManager->publish($assets, false, -1, YII_DEBUG); if (is_dir($assets)) { Yii::app()->clientScript->registerCoreScript('jquery'); - Yii::app()->clientScript->registerScriptFile($baseUrl . '/video.js', CClientScript::POS_HEAD); - Yii::app()->clientScript->registerCssFile($baseUrl . '/video-js.css'); + Yii::app()->clientScript->registerScriptFile($baseUrl . DIRECTORY_SEPARATOR . 'video.js', CClientScript::POS_HEAD); + Yii::app()->clientScript->registerCssFile($baseUrl . DIRECTORY_SEPARATOR. 'video-js.css'); + Yii::app()->clientScript->registerScript("videoJS1","VideoJS.setupAllWhenReady();", CClientScript::POS_HEAD); } else { throw new Exception('EVideoJS - Error: Couldn\'t find assets to publish.'); } } -} \ Kein Zeilenumbruch am Dateiende. +}Great extension
Hi all,
This is a nice useful extension that helps me a lot.
Thanks for your great work.
mrs
How to disable downloading video from webpage?
Hi,
I am facing a problem to disable video downloading from my website.
Is there anyone who can tell me about how can I disable video downloading from my website.
With Thanks,
mrs
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.