Demos · Guide · Class Reference · Wiki · Extensions · Forum · Live Chat · Login
search

videojs

EVideoJS extends CWidget and implements a base class for the VideoJS player.
report it
13 followers
Installation
Usage
Resources

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 videojs folder under protected/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

Total 5 comments

#10914 report it
mrs at 2012/12/03 01:25am
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

#10910 report it
mrs at 2012/12/02 02:31pm
Great extension

Hi all, This is a nice useful extension that helps me a lot.

Thanks for your great work.

mrs

#2920 report it
kmindi at 2011/02/25 02:02pm
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 &copy; 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:

--- 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.
+}
#2901 report it
logicoder at 2011/02/23 07:48pm
RE: Javascript player not activated

Hello Alex,

  1. Concatenation slows down the process because PHP must add strings together. Just a micro-optimization.

  2. 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

#2900 report it
Alejandro at 2011/02/23 05:51pm
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.

Leave a comment

Please to leave your comment.

Create extension
Search Extensions
Downloads
See all »
Related Extensions
 

Yii Supporters

  • The Ext4Yii Framework is a professional PHP Yii extension which provides server-side ExtJS functionality.
Terms of Service | License | Contact Us
Copyright © 2013 by Yii Software LLC. All Rights Reserved.