I'm pulling my hair here trying to figure out why Safari (v6) won't play .mov files.
This is my setup, simplified -
<video width="800" height="450" controls="controls" preload="none">
<source src="example.mov" type="video/mp4" />
Your browser can't play this video.
</video>
What I'm trying to achieve is uploading movie clips to a WordPress blog from an iPhone. iPhone saves video in .mov with h264 encoding (correct?). It would be too much of a hassle for the client to render other formats as well when uploading, and we decided to settle with this format.
In Chrome, I can see this video but in Safari it won't play, even when accessing the file directly. The player simply displays its UI bar with a loading statement. I get no errors.I've also made sure to set the .htaccess file to include AddType for .mov / quicktime.What could I possibly be missing?
Could you please put this example online? Be good to examine this example.mov with ffprobe.
IOS Safari seems very sensitive how MP4s are encoded. Only thing I've found that works for me is the libx264-ipod640.ffpreset with ffmpeg. See https://github.com/kaihendry/recordmydesktop2.0 for more.
Related
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 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.
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.
I'm having an issue with getting local videos working for the HTML5 Video element.
If I try and view a local OGG or WebM file directly, in Firefox 16.0.2 it works, but in chrome 22 it does not work!
However, if I view an OGG file on another webserver, it works correctly.
For example this file
http://www.quackit.com/video/pass-countdown.ogg
Works correctly for me, but if I save it onto my own server as
http://test.jammaloo.com/pass.ogg
Then it works in Firefox, but Chrome will not play it.
I believe the mimetype is being set correctly, can anyone help me track down the issue?
First of all try with adding support for more video types
Link - http://www.htmlgoodies.com/html5/client/how-to-embed-video-using-html5.html
video id="sampleMovie" width="640" height="360" preload controls
<source src="HTML5Sample_H264.mov" type='video/mp4;' />
<source src="HTML5Sample_Ogg.ogv" type='video/ogg;' />
<source src="HTML5Sample_WebM.webm" type='video/webm;' />
video
Second check your .htaccess file for content type - add mime type for webm, ogg, mp4
Link - http://docs.sublimevideo.net/troubleshooting
Link - http://www.htaccess-guide.com/adding-mime-types/
These solved my problem of playing video in HTML5 video tag. Hope it helps you too.
As i checked in the CHROME your content is not getting loaded with correct "TYPE"
If applicable (and nothing works) you can use- http://www.longtailvideo.com/players
I want to embed video in html page sothat I can play any multimedia file from my hard drive or from a url.I tried to create a web page with
<video src="test.mp4" controls width="320" height="240">
</video>
In chrome,the video plays without any problem.
However,the mp4 file is not recognized in firefox .It displays error message- 'no video with supported format or mimetype found'.
It so happens that most of my video files are .mp4 or .flv files.
If I put
<source src="test.flv" /> in the video element ,then both chrome and firefox fail to show it.
So,what should I do to play at least mp4 and flv files in both browsers?.
Any pointers /advice most appreciated.
From Mozilla's page on browser-supported audio/video formats:
The MPEG container format with the H.264 video codec and either the
AAC audio codec or the MP3 audio codec is supported by Internet
Explorer and Safari. Firefox and Opera do not support the format.
Support for the format is deprecated in Chrome, and Chromium does not
support it either.
The MPEG media formats are covered by patents, which are not freely
licensed. All the necessary licenses can be bought from MPEG LA. Since
H.264 is currently not a royalty free format, it is unfit for the open
web platform, according to Mozilla [1, 2], Google [1, 2] and Opera.
Short answer, Firefox doesn't support mp4, as it's not open source. But it does support multiple sources and will play the first one it supports.
Further, it doesn't appear that swf or flv are supported by any browsers, since they are totally Adobe and require Flash Player, but the following should work around that:
<video src="test.mp4" controls>
<object data="test.flv" type="application/x-shockwave-flash">
<param value="test.flv" name="movie"/>
</object>
</video>
Be aware that the above had .swf file as data and value originally; I haven't tested if .flv will work on its own.