I am uploading .mp4, .webm, .ogv, .swf files to our servers for video playback. We are using the code below for cross-browser/fallbacks.
<video width="570" height="338" tabindex="0" loop="loop" controls="controls" autoplay="autoplay">
<source type="video/mp4" src="/Resources/videos/product.mp4"></source>
<source type="video/webm" src="/Resources/videos/product.webmsd.webm"></source>
<source type="video/ogg" src="/Resources/videos/product.oggtheora.ogv"></source>
<object width="570" height="338" type="application/x-shockwave-flash" data="/Resources/videos/product.swf">
<param wmode="opaque" value="/Resources/videos/product.swf" name="movie">
<param value="false" name="allowFullScreen">
<param value="transparent" name="wmode">
<param value="config={'playlist':['http%3A%2F%2Fbeta.com',{'url':'http%3A%2F%2Fbeta.com%2FResources%2Fvideos%2Fproduct.mp4','autoPlay':false}]}" name="flashVars">
</object>
</video>
The videos work flawless in IE, Chrome, Firefox, and Safari (windows). However the video lags and is pixelated in Safari on Mac. See image below:
I am wondering if anyone has come across this issue before and could steer me in the right direction to fix it. Thank you all in advance.
Related
I am using HTML5 to embed a video on my site. It works in all browsers except Edge.
Here is my code:
<video id="sampleMovie" width="509" height="280" preload autoplay>
<source src="breaking_news.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="breaking_news.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="breaking_news.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="640" height="360">
<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={"clip":{"url":"breaking_news.flv","autoPlay":false,"autoBuffering":true}}' />
</object>
</video>
I removed the full URL for the purpose of posting here.
Any idea on why it will not play in Edge?
Based on the Edge browser video developer guide for mp4, this is what is supported:
Media File : Video MP4.
Extension setting : .mp4.
Mime type setting : video/mp4.
Based on the code you provided, the MP4 file you are providing has an extension type/container type of .mov which is not supported.
Thus, I recommend re-encoding your source video file so that it has the .mp4 extension type, more than likely this is the issue. I would also look at the specific codec type you are specifying.
Lastly, I recommend looking at their full dev guide found here: https://learn.microsoft.com/en-us/microsoft-edge/dev-guide/html5/video
Hope this helps.
I have a problem with HTML5 Video and Google Chrome.
When I load my page. I can't see the video. No poster image, no video frame.
The video element does exist.
Now if I scroll a little bit the video is showing up and plays.
Its like "Please Scroll to Render and Play the Video"..
This is my code:
<video id="videocontainer" loop autoplay preload="auto" poster="http://homepage.de/video/poster.jpg">
<source src="http://homepage.de/video/BigWeb.mp4" type="video/mp4" />
<source src="http://homepage.de/video/BigWeb.webm" type="video/webm" />
<source src="http://homepage.de/video/BigWeb.ogv" type="video/ogg" />
<object id="videocontainer-object">
<param name="movie" value="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf"></param>
<param name="flashvars" value="http://homepage.de/video/BigWeb.mp4&playButtonOverlay=false&loop=true&autoPlay=true&controlBarMode=none"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed id="videocontainer-embed" src="http://fpdownload.adobe.com/strobe/FlashMediaPlayback.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="720" flashvars="src=http://homepage.de/video/BigWeb.mp4&controlBarMode=none&playButtonOverlay=false&loop=true&autoPlay=true"></embed>
</object>
</video>
Edit: I made something up on fiddle. http://jsbin.com/japewido/1/watch
When i use "controls" everything is ok on Google Chrome. Whithout controls. The Video is not starting. No Poster Image. Just a blank Video Element.
Edit 2nd: After Looking Up what the current vesion of google chrome is (34) and i saw that i was using google chrome 26 (the auto updater didnt work). I Installed the current version and it works now... (i want my time back^^)
<script>
var myVideo=document.getElementById("videocontainer");
myVideo.load();
</script>
try this
So I have 3 different versions of a video, mp4, ogg, and webm. In google chrome,the video works fine. In IE and Firefox I get a message to say it cannot find the correct file or path.
Here is the HTML:
<video class="center" controls>
<source src="AlderneyBunkerParty2013.mp4" type="video/mp4">
<source src="AlderneyBunkerParty2013.ogg" type="video/ogg">
<source src="AlderneyBunkerParty2013.webm" type="video/webm">
Your browser does not support the video tag.
</video>
The website is www.alderneybunkerparties.co.uk if you wish to take a look. I am running the latest version of Firefox and IE 11. I have included a shim in my html also.
I have read that it is fine to just end the files with .ogg or .webm but the files actually end in .oggtheora.ogv and .webmhd.webm - I originally included those exact filetypes in the HTML but I got the same error as I get when they are .ogg and .webm. Cheers.
Try video for everybody
Code-
<!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody -->
<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="640" height="360">
<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>
<p>
<strong>Download video:</strong> MP4 format | Ogg format | WebM format
</p>
you need to have the video with mentioned formats in correct path ,then only it will play ,try to convert to specific formats and put it in correct path and try or try like this
<video width="320" height="240" controls autoplay>
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<object data="movie.mp4" width="320" height="240">
<embed width="320" height="240" src="movie.swf">
</object>
</video>
If I set my video tag up to be something like
<video src="myvid.mp4"></video>
IE9 plays the video in its entirety, if however I have it as
<video>
<source src="myvid.webm" type="video/webm" />
<source src="myvid.ogv" type="video/ogg" />
<source src="myvid.mp4" type="video/mp4" />
</video>
The video plays for about 3 seconds and then stops.
Unfortunately if I use the first method then browsers like Firefox don't look at the <source> attributes and refuse to play.
Lots of research has ruled out MIME types and video encoding as potential issues.
The full code for what I currently have is:
<video controls="controls" poster="<?=$template_path;?>/images/home-video.png">
<source src="<?=$template_path;?>/videos/intro_blue.webm" type="video/webm" />
<source src="<?=$template_path;?>/videos/intro_blue.ogv" type="video/ogg" />
<source src="<?=$template_path;?>/videos/intro_blue.mp4" type="video/mp4" />
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="600" height="600">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="flashVars" value="controlbar=over&image=<?=$template_path; ?>/images/home-video.png&file=<?=$template_path; ?>/videos/intro_blue.mp4" />
<param name="wmode" value="transparent" />
<img alt="Intro" src="<?=$template_path; ?>/images/home-video.png" width="600" height="600" title="No video playback capabilities, please download the video below">
</object>
</video>
I think the issue may be in server settings. You don't need the MIME type for video content. And IE is strict with it. See here for example.
In my case it seemed to be IE9 behind certain firewalls was not allowing the video to download completely (other browsers allowed it).
I wasn't happy with this so as a precaution I forced IE9 to use flash.
I am having some trouble trying to figure out what is causing HTML5 video to be extremely slow loading/playing in Safari. I have tested the same below code on Chrome, Firefox, IE (irrelevant as it uses the flash) and the load/play times are nearly instant. But on Safari, I need to wait pretty much a whole minute before it starts playing. I had tried removing the video's 'autobuffer' parameter, but made no difference. Any ideas?
<video id="video-window" autoplay="autoplay" autobuffer="autobuffer">
<source src="testvideo.mp4" type='video/mp4' />
<source src="testvideo.webm" type='video/webm' />
<source src="testvideo.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object type="application/x-shockwave-flash" data="player.swf" width="640" height="480">
<param name="allowfullscreen" value="true">
<param name="allowscriptaccess" value="always">
<param name="autoplay" value="true">
<param name="flashvars" value="testvideo.mp4">
<!--[if IE]><param name="movie" value="player.swf"><![endif]-->
<p>Your browser can’t play HTML5 video.</p>
</object>
</video>
You need to use Handbrake and check the Web optimized option when encoding. I have no clue why but this reduces Safari lag dramatically. Still not as speedy as other browsers but much better.