I want to play an HTML5 video (MP4, quickstart) in IE 11 using the autoplay option.
All browsers are working fine (Firefox, Chrome, mobile Android and iOS): they start playing the video immediately while downloading in background.
Only IE does not start playing before it completely downloaded the file. After downloading the file (I can see this in the apache log) the video starts playing - so the autoplay option is recognized in some way.
The code is really easy and only basic html5 video markup
<video id="myVideoPlayer" height="260" class="hidden-print" style="display:inline-block; float:left;" preload="auto" autoplay="autoplay" controls="controls" loop="loop">
<source src="/stream.php?id=1234&quality=hd" type="video/mp4"></source>
<source src="/stream.php?id=1234&quality=webm-hd" type="video/webm"></source>
</video>
If I directly call the stream.php I have the same issue - but again only in IE.
I can then see in my server logs:
one complete download of the video during page load
then some kind of embedded quicktime player is shown on the IE page. The player starts a new download ans starts playing the video while downloading.
and I then have a second entry for the complete download in the apache log.
Looks like IE has to download the while file to examine it and to decide how to open it. But the header of the video is at the beginning (this is why other browser are working), so why is this neccessary?
It was an apache configuration issue!
We are using DEFLATE as OutputFilter also for .php endings, so the transfer-encoding of the video streaming php-script was set to "chunked" which causes IE to completely download the file. Even setting "Content-length" header in the php file did not help. Only way was to disable DEFLATE for this php file.
Related
Below code is working fine in Mozilla & Chrome. But in Safari the video doesn't play.
<video id="v-control" width="100%" autoplay="autoplay" loop>
<source src="assets/img/web home page banner.mp4" type="video/mp4"
media="all and (max-width: 480px)">
<source src="video-small.webm" type="video/webm" media="all and
(max-width: 480px)">
<source src="assets/img/web home page banner.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
</video>
I have tried preload for the video tag and If I add controls I should click on Play button. I dont need any controls for the video so I have removed controls.
If the video is not working in Safari, but works in other browsers (Chrome, Firefox, Edge), you may be running into an issue relating to byte-range requests.
Byte-range requests are when a client asks a server for only a specific portion of the requested file. The primary purpose of this is to conserve bandwidth usage by only downloading small sections of the file as needed (a video in your case). If you inspect the Safari video request, you may notice a Range header set to bytes=0-1. This is Safari's way of testing if your HTTP servers accept byte ranges before requesting a larger chunk of data.
To fix your server config, take a look at Apple's recommendations. If you need a quick fix, you could move your videos to a different hosting server that has a proper config (and make sure to update all video source references).
Safari has started (in the last year) preventing videos with audio tracks from auto-playing by default. They never specifically publicised this as far as I'm aware, however I believe it was part of the following changes:
Safari 11 also gives users control over which websites are allowed to auto-play video and audio by opening Safari’s new “Websites” preferences pane
(Source)
The only real workarounds for this are to either remove the audio track from the video, or have it muted by default.
<video id="v-control" width="100%" autoplay="autoplay" loop muted>
If your server can detect the requester's browser, you can apply this to just Safari, leaving other browsers as they were before.
In my case i'm using angular with service-worker and Safari is not loading mp4 files.
The service worker breaks the Byte-range requests, because it is like man in the middle between safari and the server, in the process the SW change the http response code from 206 to 200, this way Safari do not download the mp4.
To solve this I bypass the service worker when I need to show an mp4 video, using angular 8 is its simple, just add ngsw-bypass=true as a query string in the mp4 url and in works. ( https://....video.mp4?ngsw-bypass=true )
The Other work around also includes, adding attribute playsInline to the video tag along with muted.
For Example, something like this :
<video id="v-control" width="100%" autoplay="autoplay" loop muted playsInline>
The playsInline allows the browser to play the video right where it is instead of the default starting point.
Keep in mind that the videos you are serving need to contain the metadata required for streaming.
In my case, I was serving dynamic videos encoded in the server using ffmpeg. Using the -movflags faststart in the ffmpeg command made the videos available to be played on Safari
Added an attribute "muted"
--- video muted autoplay---
in Chrome I have everything worked and Safari is also trying
I had a similar problem with videos not playing on Safari. The problem was my web server. I moved the video to another hosting server, loaded it from there and it worked.
e.g.
instead of:
<video src='/assets/myVideo.mp4' controls> </video>
do something like this:
<video src='https://anotherServer.com/assets/myVideo.mp4' controls> </video>
I am trying to use the html tag to play a short clip on my intranet site which runs on the SharePoint Online platform. Here is the code I have tried:
<video width="100%" loop="loop" autoplay="autoplay" src="/sites/pathtosite/SiteAssets/videos/clip.mp4" type="video/mp4"></video>
and:
<video width="100%" loop="loop" autoplay="autoplay">
<source src="/sites/pathtosite/SiteAssets/videos/clip.mp4" type="video/mp4"></source>
</video>
Both versions of these snippets work in chrome and firefox, but no video is shown in IE (v11). When I use the dev tools (press F12) in IE and record network traffic while the page is loading, I see that i get an http response of 206 for the video. It only loads ~12 KB of the file (~5MB total). The initiator column for the request is blank which i thought was weird too.
I understand the 206 is a partial content response, and the browser is supposed to retrieve the file in chunks. It works properly in the other browsers, but IE doesn't request the rest of the file for some reason.
Does anyone have any ideas?
Regarding :
"#VC.One : The video you posted does work on our intranet site! What does this mean for my mp4 file? It was converted from .mov to .mp4 (H.264) using VLC (file->convert)."
You did not provide any details about the input file, but likely it means your video has an incompatible H264 profile. Encoding with a setting of profile Baseline # level 3.0 is best for successful playback on all systems.
Solutions :
(1) Within Internet Explorer options, try enabling option (tick) : "Use software rendering". This should be the simplest way to get video playback. If still problematic, try my other solutions...
(2) Try using a <video> tag setup like this :
<video width="100%" controls loop="true" autoplay="true">
<source src="myVideo.mp4" type="video/mp4" codecs="avc1.4D401E, mp4a.40.2" />
</video>
(3) Re-encode the MP4 video with acceptable [to Internet Exlorer] settings for H.264/MP4.
I don't convert with VLC but for best results :
Make sure the input .mov contains...
video of H.264 codec (and AAC/MP3 audio, if has sound).
H.264 is encoded with Baseline profile.
If input is not H.264 then un-tick option "Keep original video track" (it must be un-selected).
"#VC.One: I re-encoded the file using HandBrake and it works! Thank you very much for your help."
You're welcome and I'm glad you got a useful suggestion.
PS: +1 for actively trying to solve issue by yourself too.
You used the HandBrake solution, but for FFmpeg users (like me) we can try :
ffmpeg -i input.mov -c:v libx264 -profile:v baseline -level:v 3.0 -color_primaries 1 -color_trc 1 -colorspace 1 -refs:v 1 -strict -2 output.mp4
Finally...
If still any getting issues, then share a (temporary) online link to the input .mov file for analysis.
Maybe the loop and autoplay values should be a boolean (i.e true or false) value....
<video width="100%" loop="true" autoplay="true">
I don't think you need to care about IE because it has only 4% of share in whole. You can see here https://www.w3schools.com/Browsers/default.asp
But if you want to work it on IE then you need to check video tag support in IE browser.
You can see it has no support but in IE 11 https://caniuse.com/#search=video
I don't this is properly supported so you can use modernizer for this purpose.
Hopefully, it will help. s
I have an HTML page that contains a MP4 video:
<html>
<body>
<video width="800" height="600" controls>
<source src="/static/xyz.mp4" type="video/mp4">
<p>Your browser does not support the video tag.</p>
</video>
</body>
</html>
When I load the page in Firefox, it doesn't show the play control buttons but shows error message "No video with supported format and MIME type found" (see the screenshot below).
So I use this site to test my browser's ability to play HTML5 mp4 video and it can successfully play the test video on that site. My Firefox version is v36 on CentOS Linux. I also tried using Chrome and it can't play it either. I also tried it on Firefox/Chrome on Windows but failed. I then use the Firefox debugger to look at the debug info and I see the following message:
Media resource http://localhost:5000/static/xyz.mp4 could not be decoded.
All candidate resources failed to load. Media load paused.
I then tried playing the xyz.mp4 video on my local machine using Linux's movie player and it plays fine and it also plays fine in Window's media player. But when I use the above HTML5 <video> tag, it doesn't play for all browsers in both Linux and Windows. I also followed Mozilla's online forum to change the browser settings and clear caches but none of them works. So what caused the problem of this simple HTML5 ?
This is very likely the problem with your video file. mp4 is not really a format, but a container that can hold video in different formats. Firefox supports only H.264 encoded video.
Simply speaking, there are several types of mp4 files and not all of them are supported by browser. To verify this, you can download one of the videos from the quicksmode website and replace your video with it.
Possible solution:
//autoplay muted onloadedmetadata="this.muted = true"
<video id="abc" autoplay muted onloadedmetadata="this.muted = true" >
<source src="https://github.com/mediaelement/mediaelement-files/blob/master/big_buck_bunny.mp4?raw=true" type="video/mp4">
Your browser does not support the video tag.
</video>
I am trying to embed a video in my html page but it is not loading on the iPhone (all I get is a crossed out play button). It loads fine on the desktop and Android. It is not a browser issue because I get the same error using both Chrome and Safari on my iPhone.
<div id="video_container">
<video width="400" height="400" controls preload="none" poster="/static/img/tag_logo.png">
<source src="/static/videos/movie.mp4" type="video/mp4"></source>
</video>
</div>
Interestingly I have tested out my code with the video from the video.js sample project. If I replace my current source tag with this the video loads:
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4"></source>
However, I also downloaded the video from the video.js site, but it does not load on my iPhone
<source src="/static/videos/oceans-clip.mp4" type="video/mp4></source>
Codecs for the videos I am trying out all have AAC and H.264 codecs and are mp4s
I have also tried converting my video files to iPhone ready mp4 files using Miro Video Converter but still no luck with loading on the webpage
I am testing on localhost and am using nginx and flask
After more testing: according to the Chrome inspector I am getting response headers back for my video url GET request which explains why it plays on the desktop web. However, for iPhone, the Safari inspector says that I am not getting response headers back. And on Android, I do not get response headers back either, but for some reason the video is still able to play in the webpage on my Android device.
Any help would be appreciated
It could be your host server setup. For example when I use Go Daddy, SVG files won't display on my site. You can either check out the config or add a file that allows the MIME type. More on MIME types here: http://blogs.iis.net/bills/archive/2008/03/25/how-to-add-mime-types-with-iis7-web-config.aspx
Just change the video extension to .mov.
Im in the process of making a webpage, and im trying to insert a video. The video player loads fine, and you can press play, but only the audio plays, not the video. (When previewing in chrome)
When viewing in firefox it works properly
My code is as follows...
<video width="600" height="400" controls>
<source src="ds2.mp4" type="video/mp4">
<source src="ds2.ogv" type="video/ogv">
<source src="ds2.webm" type="video/webm">
Your browser does not support the video tag.
</video>
My Doctype is <!Doctype html>
I checked the MIME type, its Video/mp4. however, one of the mime requests is in red and cancelled (When checking with google dev tools networking)
Im using microsoft expression web 4 (incase it is relevant)
If i've neglected any important information please let me know and ill update the post :) Thanks in advance for your help :)
Your problem is with the file encoding. HTML5 supports very few types and, sadly, every browser can play only part of this narrow list.
If you convert your mp4 file to H.264 encoding it will work on chrome and IE9 and above, but apparently due to patent issues, firefox does not support it but will play it if the OS can play it. This is really annoying and still require the use of players in order to play files in not-supported browsers.