Multibrowser support video player based on Video For Everybody code.
Requirements ¶
Yii>=1.1
Usage ¶
You have to put in BASEURLPATH all video files in the following formats:
- mov
- swf
- mp4
- webm
- ogv
- jpg (as video poster image)
All files must to have the same name (FILENAME), differ only in their extension
<?php $this->widget('ext.evfeplayer.eVFEplayer', array(
'filename'=>'FILENAME_WITHOUT_EXTENSION',
'altmsg'=>'...some text...',
'baseurl'=>'URL',
'autoplay'=>true_or_false,
'controls'=>true_or_false,
'width'=>INTEGER,
'height'=>INTEGER,
));?>
The rendered code will be something like:
<video width="480" height="356" poster="images/VIDEOFILENAME.png" autoplay>
<!-- MP4 must be first for iPad! -->
<source src="BASEURL/VIDEOFILENAME.mov"/><!-- Safari / iOS video -->
<!-- fallback to Flash: -->
<object width="480" height="356" type="application/x-shockwave-flash" data="BASEURL/VIDEOFILENAME.swf">
<!-- Firefox uses the `data` attribute above, IE/Safari uses the param below -->
<param name="movie" value="BASEURL/VIDEOFILENAME.swf" />
<param name="flashvars" value="play=true&autoplay=true&file=BASEURL/VIDEOFILENAME.mp4" />
<param name="play" value="true">
<param name="autoplay" value="true">
<!-- fallback image. note the title field below, put the title of the video there -->
<img src="BASEURL/VIDEOFILENAME.png" alt="ALT MESSAGE"
title="ALT MESSAGE" />
</object>
<source src="BASEURL/VIDEOFILENAME.webm" type="video/webm" /><!-- Chrome10+, Ffx4+, Opera10.6+ -->
<source src="BASEURL/VIDEOFILENAME.ogv" type="video/ogg" /><!-- Firefox3.6+ / Opera 10.5+ -->
</video>
Encoding videos examples... ¶
To encode video files for needed formats use ffmpeg tool, for example: ~~~
!/bin/bash ¶
ffmpeg -y -i FILENAME.mov -ss 00:00:10.00 -vcodec mjpeg -vframes 1 -f image2 -s 640x360 FILENAME.jpg
ffmpeg -y -i FILENAME.mov -s 640x360 -sameq -ar 44100 -ab 192 FILENAME.swf
ffmpeg -y -i FILENAME.mov -acodec libvorbis -ac 2 -ab 96k -ar 44100 -b 345k -s 640x360 FILENAME.ogv
ffmpeg -y -i FILENAME.mov -acodec libvorbis -ac 2 -ab 96k -ar 44100 -b 345k -s 640x360 FILENAME.webm
ffmpeg -y -i FILENAME.mov -acodec libfaac -ab 96k -vcodec libx264 -vpre slower -vpre main -level 21 -refs 2 -b 345k -bt 345k -threads 0 -s 640x360 FILENAME.mp4 ~~~
Tests
Tested using:
Files placement
Am I missing something, or your extension does not allows to use paths, so all files must be put into base path? If this is true, then this is very wrong, and you should fixed. Base folder is certainly NOT for storing media files!
Re: Files placement
Hi, thanks for comment.
About file placement, this is a simple extension, just takes from the "base url" all the enconded files and renders the html code, video encoded files and poster image just needs to have the same name.
You can use any folder in any server to store those files, for example:
baseurl=http://someserver/path/
or
baseurl=http://my.super.fileserver.com/media/myGreatVideo1Folder/
Anyway, feel free to make any modifications that you need... :)
Regards
If you have any questions, please ask in the forum instead.
Signup or Login in order to comment.