I have created a very simple embed with fall-back code for all browsers. When test viewing in FF4 locally, the video appears and plays perfectly. But when I upload to a remote server (retaining the same file structure) the video does not appear. All other browsers seem to be displaying fine... You can see it here: http://www.selfdestruct.tv/h5/
Why?
Check your server and make sure that the mime types are defined for these video types. Not serving proper mime types with the file can stop many browsers from playing videos properly, the type attribute is simply not enough.
http://diveintohtml5.ep.io/video.html#video-mime-types is an excellent resource on HTML 5 video.
Besides mime types above, also check video file permissions.
Related
I have a small snippet of code to play a video using HTML5. By accident, I discovered that it runs perfectly without a type attribute (the mime type) in my source element (see code below).
I thought that you always needed to provide the mime type, but apparently not. I've tried to google this, but with no luck. The code below works fine in both FireFox and Chrome. I have no other HTML5 supporting browsers installed. The video files used in my tests are local mp4 files and webm files using http. The result is the same; everything seemes to work fine without a mime type. Hence my question:
Is it perfectly safe to write this without the type attribute or did I miss anything here? (I don't need to support browsers older than IE11.)
Any information on the subject would be appreciated. Thanks.
<video id="videoControl1" width="600" controls poster="somepic.png">
<source id="videoSource1" src="somevideo.mp4"></source>
<object>
<p>Video is not supported</p>
</object>
</video>
Usually, browsers will detect the MIME type based on meta data and the incoming stream, I believe they do not even look at the file type anymore. You can see this in action by purposely renaming your video on a live webserver to the wrong extension, browsers and players will usually still play the video.
The only reference I could find on the subject is from a tutorial site (html5 rocks tutorials), quoting:
In some cases, the browser won't play the video if the MIME type isn't
set properly.
This was written in 2010, and they said "in some cases". It should be safe not to provide a mime type, although providing the wrong one may or may not cause it not to play.
I am making a system that I run on localhost, it embeds a video player and all works fine except for webm videos on Chrome. They freeze regularly and I can only get them running again by pressing play/pause and moving to the initial phases of the video.
I have been googling for this issue and trying to solve it for some time now without success, does anybody know how to solve this?
Is your same WebM file working ok on Firefox? I assume you are using HTML5 video.
I have compiled a short check list on how to troubleshoot HTML5 video playback issue here. Try to play the videojs webm sample to see if it works.
Given the description of your issue I guess it is either a non proper WebM file or a server side tuning issue (like with mime types).
If it is a file format issue you could try re-transcoding from a known good source (ie not the problematic WebM file) with firefogg.
You can also try to set the preload attribute of your HTML5 video tag to auto.
I need to play .m4a files (recorded on iPhone) in IE(9+) and Safari (iPad, iPhone). I am facing problem with setting correct MIME Type. For playing in IE10 I need to set audio/mp4 but for Safari audio/aac.
With audio/mp4 I am getting Cannot play audio file on iPad.
With audio/aac I am getting Error: Unsupported audio type or invalid file path in IE
Is there a type I can set for both?
<audio controls="controls" autoplay="autoplay">
<source src="play.aspx?filename=sound.m4a" type="audio/mp4" />
</audio>
Notes
Using an alternative player is not a solution for me.
I serve the files thorough .aspx page so I can control HTTP headers.
From observing the page HTML 5 Audio Across All Browsers using m4a, oga, mp3 and Flash it seems that possible solution is to give type="audio/mp4" and NO conten-type header. However removing HTTP header in aspx is rather too complex for problem I am trying to solve(see Removing/Hiding/Disabling excessive HTTP response headers in Azure/IIS7 without UrlScan).
Audio is still in working draft, so browser experience will vary.
Having said that, the mime type that's most prevalent is audio/x-m4a. Some sites show audio/m4a-latm as a valid mime type for m4a audio but as of this writing, even Chrome doesn't recognize that mime type.
You can try this snippet in different browsers to see if it works - I verified it in IE11, Chrome (v37) and IE9 (emulated via Dev Tools).
Audio Tag sample
I've also found (personal observation) that audio recorded on iPhone doesn't play most of the time on web. Almost all browsers say the file is invalid and if you download the recorded file, it doesn't even play in media players (e.g Windows Media Player). I suspect iOS core audio is to blame here but haven't found anything conclusive yet. Audio recorded from Android works fine though.
At this point, having a flash fallback seems like the best option (won't help on iHateFlash devices though).
I assume that this is possible, here is question, also on stackoverflow, that confirms it.
However I have failed while trying to make it work, so I'm asking for your help.
How can I do this?
WebM uses a variant of the Matroska container so it's not too surprising that some browsers are able to play some .mkv files. It's likely that you'd need to set the content type header to something that the browser recognises (eg. video/webm) if it was going to work at all.
However, that's only part of the story. The Matroska container is just that, a container. Inside the container are video and audio objects which have been encoded with particular codecs, if the browser you're attempting to play the file with doesn't support those codecs then they won't be able to play the file even if they can parse the container format. If you want wide compatibility then your best option is to transcode to one of the more common container/codec combinations such as MP4/h264 or WebM/VP8.
You wanna take a look at DivX player
Cut & paste
As of version 2.1, the DivX Plus Web Player supports the HTML5 API, so
it can be embedded and controlled using the tag and open web
standards such as JavaScript. It takes full advantage of the
tag’s attributes by allowing publishers to create seamless playback
experiences and custom controls for DivX, AVI, MKV, MP4 and MOV videos
across multiple browsers: Firefox and Chrome (Internet Explorer &
Safari Coming in full release version).
I'm having an issue with html5 video and safari 5. It works locally, the video pulls up and everything is fine. It will also pull up on the server if I go directly to the video path. Im just using the video tag and loading a video. It works on the server in all other browsers supporting html5 video. It works locally. It just doesn't work in safari on the server. In the network panel it shows the video trying to load but returns a null 404. The path to the video is relative. I'm very confused. Any help would be greatly appreciated. Thanks.
I had a problem very similar to yours. HTML5 video/Safari working locally but not when published on server. First check your .htaccess file. You may need to modify MIME types. Here is a very good tutorial: Dive into HTML5 Video.
Second, and this solved my problem, are you serving from a protected site? The solution for me was to move video and audio files to an unprotected folder and then use an absolute path to the specific media.