I want to create a video player which is able to play these video files:
'mpg':
'mov':
'wmv':
'rm':
'3g2':
'3gp':
'm4v':
'mp4':
'asf':
'asx':
'avi':
'flv':
'srt':
'swf':
'vob':
The videos will be used in an online exam as some questions may require watching a video for information. The video needs to work on all major browsers. Be able to work on computer or ipad.
My question is what is the best way for me to create a html video player?
Do I go for the HTML5 + object + embed method (sample):
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>
To include the other file types do I just include more <embed> tags to support those files?
Or is the best way by using the Youtube player which is this:
IFRAME:
<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>
OR
SHOCKWAVE:
<embed
width="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"
type="application/x-shockwave-flash">
</embed>
I saw this example on SO as well but not sure if it is good to use or not:
<object id='tempVid1' name="emQTPlayer" height="240px"
width="320px" style="behavior: url(#BinaryBehaviorID)"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param name="autoplay" value="false" />
<param name="src"
value="" />
<param name="controller" value="true" />
<param name="type" value="video/quicktime" />
<param name="align" value="bottom" />
<param name="border" value="0" />
<param name="scale" value="tofit" />
<%-- <param name="wmode" value="transparent">--%>
<param name="showcontrols" value="true">
<embed id='tempVid2' name="emQTPlayer" type="video/quicktime"
autoplay="false" height="auto" width="auto" align="top"
border="0" controller="true" postdomevents="true"
pluginspage="http://www.apple.com/quicktime/download/"
showcontrols="true" scale="tofit"
src='' />
</object>
MORE INFO here: http://www.w3schools.com/html/html_videos.asp
Most of the formats in your list wont work on all platforms. Some will require plugins that are only available on particular platforms.
You will need to convert to h.264 mp4 files + one other (ogg or webm, unless you can use flash to play the mp4 files).
You can do this yourself, or use something like Zencoder to do it for you.