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.
Related
i have a video link that is in iframe i want to get alert when video will ended. i am doing something like this
var vid = document.getElementById("viddler-videoid");
vid.ended = function() {
alert("code here");
};
<iframe id="viddler-videoid" src="//www.viddler.com/embed/videoid/?f=1&autoplay=1&player=mini&make_responsive=0&hideFullScreenControl=true" width="497" height="375" frameborder="0" scrolling="no" allowfullscreen></iframe>
can any one help me for this.
Update:
Actually i am facing browser problem with my old code. previously i am using this code showing below
<object width="497" height="375" id="viddlerOuter-videoId" type="application/x-shockwave-flash" data="//www.viddler.com/mini/videoid/">
<param name="movie" value="//www.viddler.com/mini/videoid/">
<param name="allowScriptAccess" value="always">
<param name="allowNetworking" value="all">
<param name="allowFullScreen" value="true">
<param name="flashVars" value="f=1&autoplay=t&hideablecontrolbar=1&enablecallbacks=t&disableseek=1&disablebranding=1&loop=0&nologo=1&hd=1&initialVolume=50">
<object id="viddlerInner-videoid">
<video id="viddlerVideo-videoid" src="//www.viddler.com/file/videoid/html5mobile?openURL=di" type="video/mp4" width="497" height="375" poster="//www.viddler.com/thumbnail/id/" controls="controls" x-webkit-airplay="allow"></video>
</object>
</object>
function playEnded() {
jwplayer('mediaspace').play();
}
this was working fine on firefox and chrome but now this code is running firefox only. in chrome browser video is not playing. that is why i update me video code with iframe. iframe video is running but 2nd video is not play which should be play after ended iframe video.
I am using the code snippet from video for everybody to embed a video in my site. The snippet basically guarantees more or less that the user will be able to see the video from any device. Here is my html:
<div class="intermitent-video-container">
<video controls="controls" poster="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="100%" height="100%">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':false}]}" />
<img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
</object>
</video>
</div>
To control the sizing & aspect ratio of this video for responsive layout I have the following Javascript:
function resizeVideo() {
var videoWidth = jQuery(".intermitent-video-container").width();
var videoHeight = videoWidth * 0.666;
jQuery(".intermitent-video-container").css('height',videoHeight);
};
resizeVideo();
jQuery(window).resize(resizeVideo);
The snippet above works exactly as I want except for when the video fallback goes to the flash version of the video. When I load the page in Safari 5.1.7 which uses flash for example the video will size exactly how I want it using the code snippet above on load but not on window resize. Is this a limitation to flash or am I doing something wrong?
Adding css for video tag
video{
width: 100%;
height: auto;
}
And you absolutely sure intermitent-video-container have responsive.
Note: Dont forget <meta name="viewport" content="width=device-width, initial-scale=1">in your head HTML
I want to include the media player in the web page with streaming radio. But i cannot find any one for that what i can do??
I use the html5 audio player but it cannot supported for all browser.
<audio controls>
<source src="<?php echo base_url(); ?>images/horse.mp3" type="audio/mpeg"/>
<object type="application/x-shockwave-flash" data="media/OriginalMusicPlayer.swf" width="225" height="86">
<param name="movie" value="media/OriginalMusicPlayer.swf"/>
<param name="FlashVars" value="mediaPath=<?php echo base_url(); ?>images/horse.mp3" />
</object>
</audio>
I need to build a universal html5 video player that play's videos with web links, for example: http://youtu.be/o_1aF54DO60 or http://example.pt/video/aadygx.
I've tried this, but dosen't work:
<video width='500' heigth='500' controls='controls'>
<source src='http://youtu.be/o_1aF54DO60'>
</video>
http://jsfiddle.net/j29nA/
How can i do this for all kinds of web links given by the user?
<video>
<source src="MP4-VIDEO-URL" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="WEBM-VIDEO-URL" type='video/webm; codecs="vp8, vorbis"'>
<source src="OGV-VIDEO-URL" type='video/ogg; codecs="theora, vorbis"'>
<object width="320" height="240" type="application/x-shockwave-flash"
data="FLASHPLAYER-URL">
<param name="movie" value="FLASHPLAYER-URL" />
<param name="allowfullscreen" value="true" />
<param name="flashvars" value='config={"clip": {"url": "MP4-VIDEO-URL", "autoPlay":false, "autoBuffering":true}}' />
</object>
</video>
More info can be found from
http://www.doomby.com/pages/webmaster-tutorials/pages/add-universal-video-support-with-html5.html
or
http://www.htmlgoodies.com/html5/client/how-to-embed-video-using-html5.html#fbid=pgr3yUv00os
My solution was to test if the link comes from youtube or vimeo and parse the given URL to an embebed URL in order to use their <iframe>
I have used the following code to play a sound:
<object>
<param name="autostart" value="true">
<param name="src" value="bgmusic.mp3">
<param name="autoplay" value="true">
<param name="controller" value="true">
<embed id="hidden-embed" src="bgmusic.mp3" controller="true" volume="1" autoplay="true" autostart="True" type="audio/mpeg" hidden="true" loop="true" />
</object>
The mp3 is being played in a notmal html page. However when putting the same tags in a jsp page its not being played. Any suggestions would be of great help.