I have the following HTML5 video element in my test page:
<video width="1280" height="720" loop="loop">
<source src="http://d1dsyb3mv0b0i6.cloudfront.net/test/lines.mp4" type="video/mp4" />
Your browser does not support the video element.
</video>
I want it to loop its playback, so I set the loop="loop" (and I also tried simply loop), but for some reason Chrome 23 does not restart the video when it ends. I specifically moved the video to a Cloudfront Download distribution to get the partial content request support on the server, which is supposedly needed for Chrome to perform looped playback, but unfortunately that does not seem to make a difference. Note that in Safari all works fine. Then again, Safari has no trouble looping even a local video file, so it does not need a server with partial content request support.
It seems to be Cloudfront-related, since this movie does loop correctly: http://media.w3.org/2010/05/sintel/trailer.mp4.
Anyone any ideas?
You need to properly set the content-type metadata on the S3 object to reflect the correct MIME type of the file. Chrome tends to be more picky about this than other browsers.
I have uploaded trailer.mp4 to Cloudfront (S3) as well and that does work. This mp4 even works from the local file system, so unlike what I thought, I don't specifically need to play the video from a server that supports partial content requests. So it seems that the lines.mp4 video is somehow different from the trailer.mp4 video. I'm very curious to find what the difference is that makes this video not loopable by Chrome, whereas it loops fine in Safari...
Loop worked for me, but try replacing loop with the commands:
autoplay onended="this.currentTime=0"
or
autoplay onended="this.load()"
The second option results in flicker during the reload. The first ran smoothly, but currentTime can behave differently, depending on other settings. Hope that works.
Related
I have a simple HTML5 video embed that displays a blank (white) frame when loaded on iOS. On desktop browsers (including Safari) and Android the first frame of the video is displayed.
I understand that you can avoid this by setting an explicit poster image, but I'm hoping I can avoid having to set up a transcoding service to extract the first frame of the videos. I understand that Apple has probably chosen this route to limit the bandwidth use for mobile users, but in this instance it's just overkill to set up a transcoding service.
I've played around with the preload attribute, but neither setting it to
auto or metadata works. Is there any other way to display the first frame of the video without interaction from the user?
Here is a link to a pen where I am illustrating the problem.
https://s.codepen.io/webconsult/debug/oRmQva/vWMRwadNoNvr
And here is a screenshot of how the code is rendered on iOS simulator (same on real hardware) and in Chrome respectively.
You can use Media Fragments URI
Just Append #t=0.1 to the end of the video URL
Try following code. This is work for me
<video src="video/video.mp4#t=0.5" playsinline controls preload="metadata">
<source src="video/video.mp4#t=0.5" type="video/mp4">
</video>
I am currently making a static site that makes use of a .mp4 video. I am using Middleman and hosting with Heroku (free plan). On my local server everything works wonderfully, but in the deployed Heroku version the video appears as a black box. In Safari and Firefox there is no container at all. All my other assets seem to be loading nicely. The video is 5.9 mb. Any idea what is going on here? Thank you in advance!!
<video class="vid-home" src="/videos/home.mp4" autoplay loop muted></video>
In theory, if you do not specify a 'poster' image to display before the video starts, the browser should display the first frame of the video:
http://www.w3schools.com/tags/att_video_poster.asp
In practice browsers seem to implement this inconsistently, and I have seen some mobile devices cases where certain videos display the first frame and others a black box, even for the same video types.
To avoid the issue you can specify your own image to be displayed using the mechanism mentioned in the link above - this should work consistently across browsers. The HTML will look something like:
<video class="vid-home" controls poster="yourImage.png" autoplay loop muted>
<source src="/videos/home.mp4" type="video/mp4">
Your browser does not support the video tag or format.
</video>
After few days of debugging various loading issues with one website we've been working on we came to conclusion that there's an issue with streaming video files (mp4, ogv and webm format) under IIS7/IIS7.5 and Windows Server 2008.
We have two versions of website, one is running on PHP (custom made CMS solution) and the other one is running on Umbraco.
When nginx is serving video content, no video chopping is experienced.
Any ideas what could be an issue?
To play the video, we're using HTML5 tag:
<video autoplay="autoplay" class="largeVideo" loop="loop" muted>
<source src="/media/1123/ai-intro-video.mp4" type="video/mp4">
<source src="/media/1124/ai-intro-video.ogv" type="video/ogg">
<source src="/media/1126/ai-intro-video.webm" type="video/webm">
</video>
I can't provide website URL, but you can check out Umbraco's website - this video is delivered in pretty much the same way (even design-wise it's looking similar).
Mime-types are added correctly, disabling compression didn't change anything.
Video is choppy even if played by directly targeting video URL.
We've tested website on few servers and from different locations, and results are pretty much the same.
A couple of things to consider:
I tried Umbraco on my firefox 28 Windows 8.1 and it looked ok. On Chrome 34 I have noticed some stuttering but only some.
Have you not some specific hooks for your application that may involve IIS but not Nginx?
If you do not use pure streaming for delivery to HTML5 video (like DASH or HLS) content is progressively downloaded to the browser cache for playback. So in "theory" playback should not relate to your server being X or Y once file is properly downloaded.
However if your page uses much CPU for other JS or else tasks you may experience stuttering at playback when frames are decoded to be displayed (especially if you target HD content). Is your video choppy when you only have one HTML5 video tag on a blank page - having preload attribute set to auto and autoplay disabled?
I have had a similar issue with one of my Apache server and Internet explorer. I would suggest you tried the following steps:
wild card CORS (msdn suggested that)
check your web sever supports ranges request/206 partial content. I have used CURL to check this on my server.
I am trying to use video.js to play an mp4 file. It will not play in IE9. It plays fine in Firefox and Chrome. If I open the video in windows media player, it plays fine as well (perhaps IE9 and windows media player use the same codecs?). I have now confirmed that IE9 is not even requesting the file.
See example here: http://devonline.northcarolina.edu/lcl/ded_prod/exams/video/jstest.html
<html>
<link href="video-js/video-js.css" rel="stylesheet">
<script src="video-js/video.js"></script>
<script>
videojs.options.flash.swf = "video-js/video-js.swf"
</script>
<body>
Video should be here:
<video id="example_video_1" class="video-js vjs-default-skin"
controls preload="auto" width="640" height="264" >
<source src="http://devonline.northcarolina.edu/lcl/ded_prod/exams/video/student/invite.mp4" type='video/mp4' />
</video>
</body>
</html>
Two things to try.
Try putting the full path to the video in the src attribute, e.g.
src="http://www.mywebsite.com/path/to/the/video.mp4" as sometimes
IE needs this.
Failing that try re-encoding the video using something like Miro
Video Converter as not all MP4 files are the same and what one
browser can play another may not be able to.
This issue also exists in IE10.
There's something going on with HTTP compression in your example. If you use Fiddler to remove the outbound Accept-Encoding request header, your server properly avoids using GZIP compression on the response. Then IE has no problem playing back your video.
Generally speaking, you should avoid having your server GZIP MP4 content before returning it; it's bad for performance and rarely saves a significant number of bytes (since mp4 content is already highly compressed).
I figured it out. It was that the request was going through the CMS I was using. The CMS can't handle requests for partial files, so it just outputs the entire thing each time. So, in my .htaccess I made it so that my mp4 files would not be routed through the CMS anymore and it started working.
Why video on this page and this page working in all browser but not in Microsoft Internet explorer 9?
Any fix for it?
This video is not playing on My IE 9.0.8112.16421
My OS is Windows 7 64 bit
Some versions of IE9 require an absolute path to the video file for some reason.
For example:
<video poster="big_buck_bunny/poster.jpg" controls>
<source src="http://www.example.com/big_buck_bunny/trailer.mp4" type="video/mp4" >
<source src="http://www.example.com/big_buck_bunny/trailer.webm" type="video/webm">
</video>
The MIME type returned by the server is also quite important as Jason Dorell said.
I was using <video> tag on a website and while writing it in localhost everything worked perfectly. Once uploaded into the server, the <video> stopped working only in IE (Firefox and Chrome still worked fine).
After digging a bit into it, I simply added AddType video/mp4 .mp4 into the .htaccess file and that solved the problem.
the problem maybe the type of file try with this:
<video poster="big_buck_bunny/poster.jpg" controls>
<source src="big_buck_bunny/trailer.mp4" type="video/mp4" >
<source src="big_buck_bunny/trailer.ogg" type="video/ogg" >
<source src="big_buck_bunny/trailer.webm" type="video/webm">
</video>
big_buck_bunny/trailer.* is your video
It could also be an error in the compatibility detection : Just a theory =X
Taken from: videojs: main.js (line 249-255)
// Check if the browser supports video.
browserSupportsVideo: function() {
if (typeof VideoJS.videoSupport != "undefined") { return VideoJS.videoSupport; }
VideoJS.videoSupport = !!document.createElement('video').canPlayType;
return VideoJS.videoSupport;
}
Cause the fallback to flash is i believe, quite reliable, after this detection. I do not have IE 9.0.8... : So you could give this code a run, to see if this is true/false
var test = function() {
return (!!document.createElement('video').canPlayType);
}
If this is true, i may consider forking the file : And adding a fail for IE 9.0.8...
It would not surprise me if IE did a half-hearted video support halfway : And this means of detection broke, in the process.
I have exactly the same issue. The two example pages you linked to let me click the play button which then changes to a pause button but the videos do not play.
The java script i tried to help track down the issue returns null.
alert(document.getElementsByTagName("video")[0].error);
I did stumble upon this though:
I'm using the N distribution of Windows 7 64Bit. This msdn page suggests that the reason that my IE9 will not play video is that my distribution of windows did not come with media player or "Media Features" is turned off.
Hope this helps.
If it's still not working here's what may certainly be a solution: encode the mp4 with compression format H.264. If you encode it with format mpeg4 or divx or else it will not work on IE9 and may as well crash Google Chrome. To do that, I use Any Video Converter freeware. But it could be done with any good video tool out there.
I've been trying all solutions listed here and tried other workaround for days but the problem lied in the way I created my mp4. IE9 does not decode other format than H.264.
Hope this helps,
Jimmy
Make sure the content type being returned from the server is "video/mp4"
Sometimes the problem could be in the installed video codecs, and different browsers may play video in different ways (from the point of inner implementation).
Try to install e.g. K-Lite codec pack and see what happens.
p.s. those videos work fine on my Win 7 x64 within IE9 x86 and IE9 x64
In IE9 There is no flash video but a HTML5 <video> element used, it tries to load:
http://www.bodhibikes.com/_/video/WELCOME_TO_BODHI_840_472.mp4
And that fails somehow. You should specify a correct videoformat for both IE/Chrome?etc...