I have a video archive that I have working in everything except IE 11. I get the error "Error: Unsupported video type or invalid file path" when loaded in IE 11. Below is the HTML I am using.
<video id="movie" width="640" height="400" autobuffer controls preload="auto">
<source src="/media/Archive_Videos/September%202013/September_13_U-RUN.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="/media/Archive_Videos/September%202013/September_13_U-RUN.webm" type='video/webm; codecs="vp8, vorbis"' />
<source src="/media/Archive_Videos/September%202013/September_13_U-RUN.ogv" type='video/ogg; codecs="theora, vorbis"' />
<object type="application/x-shockwave-flash" data="http://player.longtailvideo.com/player.swf" width="640" height="360">
<param name="movie" value="http://player.longtailvideo.com/player.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="controlbar=over&file=SITE%2Fmedia%2FArchive_Videos%2FSeptember%25202013%2FSeptember_13_U-RUN.mp4" />
<span title="No video playback capabilities, please download the video below">September 2013 U-RUN</span>
</object>
<p>OOPS! It looks like your browser doesn't support HTML5 videos. You can either install the latest version of your browser or download the video below:
<br />MP4 format | Ogg format | WebM format</p>
</video>
I also have an .htaccess file so it works in Firefox.
AddType audio/ogg oga ogg
AddType video/ogg ogv
Why isn't it working in IE 11?
What is the resolution of the video? I had a similar problem with IE11 in Win7. The Microsoft H.264 decoder supports only 1920x1088 pixels in Windows 7. See my story: http://lars.st0ne.at/blog/html5+video+in+IE11+-+size+does+matter
I believe IE requires the H.264 or MPEG-4 codec, which it seems like you don't specify/include. You can always check for browser support by using HTML5Please and Can I use.... Both sites usually have very up-to-date information about support, polyfills, and advice on how to take advantage of new technology.
I've been having similar issues of a video not playing in IE11 on Windows 8.1. What I didn't realize was that I was running an N version of Windows, meaning no media features were installed. After installing the Media Feature Pack for N and KN versions of Windows 8.1 and rebooting my PC it was working fine.
As a side-note, the video worked fine in Chrome, Firefox, etc, since those browsers properly fell back to the webm file.
I know this is old, but here is a additional thing if you still encounter problems with the solution above.
Just put in your <head> :
<meta http-equiv="X-UA-Compatible" content="IE=edge">
It will prevent IE to jump back to IE9 compatibility, thus breaking the video function.
Worked for me, so if you still have problems, consider checking this out.
Alternatively you can add this in PHP :
header('x-ua-compatible: ie=edge');
Or in a .htaccess file:
header set X-UA-Compatible "IE=Edge"
Although MP4 is supported in Internet explorer it does matter how you encode the file. Make sure you use BASELINE encoding when rendering the video file. This Fixed my issue with IE11
It was due to IE Document-mode version too low. Press 'F12' and using higher version( My case, above version 9 is OK)
In my case Codec ID of mp4 file was the issue, Codec ID: isom (isom/iso2/avc1/mp41)
was not playing in IE 10 and 11 using video tag, after I converted it to "mp42 (mp42/isom/avc1)" using FFmpeg it started playing in IE as well.
I used MP4Box to decode the atom tags in the mp4. (MP4Box -v myfile.mp4) I also used ffmpeg to convert the mp41 to mp42. After comparing the differences and experimenting, I found that IE11 did not like that my original mp4 had two avC1 atoms inside stsd.
After deleting the duplicate avC1 in my original mp41 mp4, IE11 would play the mp4.
Related
I am using mediaelement js..
on my .htacces I have these..
AddType video/mp4 mp4 m4v
AddType audio/mp4 m4a
AddType video/ogg ogv
AddType audio/ogg ogg oga
AddType video/webm webm
and on my index.html I have this on my <head>
<script src="/js/jquery.js"></script>
<script src="/js/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="/js/mediaelementplayer.css" />
and the code is
<video width="600" height="450" preload="none" autoplay preload="auto" >
<!-- MP4 for Safari, IE9, iPhone, iPad, Android, and Windows Phone 7 -->
<source type="video/mp4" src="videos/Sequence1.mp4"/>
<!-- WebM/VP8 for Firefox4, Opera, and Chrome -->
<source type="video/webm" src="videos/Sequence1.webm" />
<!-- Ogg/Vorbis for older Firefox and Opera versions -->
<source type="video/ogg" src="videos/Sequence1.ogv" />
<!-- Flash fallback for non-HTML5 browsers without JavaScript -->
<object width="320" height="240" type="application/x-shockwave-flash" data="flashmediaelement.swf">
<param name="movie" value="flashmediaelement.swf" />
<param name="flashvars" value="controls=&file=videos/Sequence1.mp4" />
</object>
</video>
unfortunately.. its not playing on mozilla browser.. it keeps on loading but not playing..
and using the ctrl+shift+k on mozilla.. I found these error.
--
[18:47:12.942] Specified "type" attribute of "video/mp4" is not supported. Load of media resource videos/Sequence1.mp4 failed. # http://thesuperheroblueprint.com/
Please help me.. I really need to fix this so bad.. Here is the website..
MP4 type isn't supported on Firefox! It's only supported in Safari 3.0+, Google Chrome 5.0+ and IE 9.0+! For Firefox you'll need .ogg file or .webm video files as sources! Here is an image containing all supported video formats in HTML 5:
And for audio support see this pic:
UPDATE:
Firefox now supports MP4 H.264 (AAC or MP3)
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
Note: MP4s encoded with a high profile will not run on lower end
hardware, such as low end Firefox OS phones.
Firefox gives the error because it doesn't support video/mp4, it's nothing to worry about, something else is causing the problem. You could start by removing one of your two preload attributes although I don't think that's the main problem either.
If you load the webm video directly in Firefox it takes about 30 seconds and after it loads up the play point is right at the end of the video. If you load the ogv file directly it appears to play just fine. I would therefore conclude that there's something wrong with the encoding of your webm file, I'd try encoding it again with some different options.
As a side note, if you can't work out what's up with the encoding, there's really nothing in the video that requires it to be a video. It's basically a video of a slideshow, you might be better off implementing it that way, it would certainly reduce the bandwidth required.
I have a strange issue with a html5 video. It's working correctly in all browsers except in Internet Explorer. Internet Explorer 9 is always waiting for the video to be fully downloaded until playback starts. If I open the Video in Firefox, Chrome or even Opera everything is working fine.
The code snippet looks as following
<video id="video-js-10734" class="video-js vjs-default-skin" width="640" height="480" controls="controls" autoplay="enabled" data-setup="{}" poster="1"><source src="http://www.lorch.biz/fileadmin/DAM_Lorch/Bilddaten/800-Doku/web/Videos/I-Torch_Movie_Full_HD_libtheora.ogv" type="video/ogg" /> <source src="http://www.lorch.biz/fileadmin/DAM_Lorch/Bilddaten/800-Doku/web/Videos/I-Torch_Movie_Full_HD_x264.mp4" type="video/mp4" /> </video>
Did I forget about some keyword configuration or is this a "feature" in Internet &*°ç&*ç! Explorer?
Thanks a lot
It sounds like IE doesn't use the same file as other browsers.
I don't remember if IE support OGV files but if not IE should use the mp4 file you provide. It seems then your mp4 hasn't a delay set for autostart.
I have used sometimes a program called MP4box to mux or demux the file so it can start without loading everything.
May be IE doesn't support progressive download for type="video/ogg". Only for H264 and WebM. However you specidy the mp4 file. Try use type="video/ogg" and .ogg file as last option and type="video/mp4" and .mp4 file as first one.
[See the updates! - Works on Android/IOS browsers but no where else. FireFox, Chrome, Opera, Safari all fail. Even though they are definitely HTML5 video tag ready]
Simply trying to stream a video using html5 tag. All I get is the video player controls and nothing else. This is so simple I assumed it should just work:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Movie title</title>
</head>
<body>
<video id="movie" preload controls>
<source src="test.mp4" />
</video>
</body>
So where could I be going wrong? I've tried a lot more than this small snippet. I've tried other peoples example snippets. I've tried many videos, many formats (mp4, flv, ogg). I've tried viewing it in Chrome, Firefox, Android Embedded browser, Opera, IE9.
I can stream the file from the URL in programs like VLC without any issues.
I am beginning to think Apache2 might be the issue here although I figure the fact I can stream the URL from VLC without issue would suggest Apache2 is not the problem.
Any help appreciated. I'm pulling on hair here.
Update:
Whenever I try and access the URL of the video directory from within Chrome it seems to give me this error: Resource interpreted as Other but transferred with MIME type undefined
That error is definitely a server side problem, apache2 must not be configured properly somewhere?
If I access even a FLV file directory from the URL within my Apache2 server it gives this MIME type undefined error. It the video controls. Whenever I click play it spams the MIME type undefined a few times.
Update2:
Verified my .htaccess is being read
Added the following to my .htaccess:
AddType video/ogg .ogv
AddType video/ogg .ogg
AddType video/mp4 .mp4
Still not working, still see the MIME TYPE UNDEFINED in Chrome.
Update3:
Firefox and others can view the URL/test.mp4 without issue but NONE can get the video tag to work properly.
Update4:
Android can get the video tag to work now. The .htaccess change seemed to fix that. However not one single desktop browser can for whatever reason.
Firefox and Opera don't support MP4, and Chrome will drop support for it soon. It's a good idea to also add a WebM source.
Try adding the type attribute to the source declaration:
<source src="test.mp4" type="video/mp4">
Here is my html code from my site www.pi-corp.net. This allows for playback on all commercial browsers with fallback to flash.
<div class="video-js-box" style="width: 316px"><br><video class="video-js" width="320" height="240" controls preload autoplay poster="http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png"><source src="http://pi-corp.net/picvideo/PIChmi.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' /><source src="http://pi-corp.net/picvideo/PIChmi.ogv" type='video/ogg; codecs="theora, vorbis"' /><source src="http://pi-corp.net/picvideo/PIChmi.webm" type='video/webm; codecs="vp8, vorbis"' />
<object id="flash_fallback_1" class="vjs-flash-fallback" width="320" height="240" type="application/x-shockwave-flash"
data="flowplayer-3.2.1.swf"><div class="style23"> <param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /><param name="allowfullscreen" value="true" /><param name="flashvars" value='config={"playlist":["http://pi-corp.net/images/PIC_Full_Logo_PIC_HMI.png", {"url":"http://pi-corp.net/picvideo/PIChmi.mp4
","autoPlay":true,"autoBuffering":true}]}' /> <img src="http://pi-corp.net/images/PIC_no_playback.png" width="320" height="240" alt="Poster Image"
title="No video playback capabilities." /> </div> </object></video>
I'm looking for a way to broadcast a live video taken from a webcam or camera rooted to a PC.
The broadcast should be displayed in a HTML5 page using the tag (which support rtp, and rtsp I think).
The user viewing the stream should not have to install any plug-in or video player such as QuickTime.
I need the video to be in mp4 format such as: rtsp://www.mywebsite/streaming/video.mp4
This would be the link I'd put as the src of the html 5 video tag.
So I'd like to know if it's possible, what are my options to do such things.
It's possible. But you will have major problems if you're looking for cross browser support. What you can do is offer HTML5 video to the browsers supporting it and then offer QuickTime for browsers not supporting it.
<video src="stream.mp4">
<!-- Don't support <video> -->
<object>
<param name="src" value="video.mp4" />
<param name="autoplay" value="true" />
<param name="type" value="video/quicktime" height="256" width="320" />
<embed src="video.mp4" height="256" width="320" autoplay="true" type="video/quicktime" pluginspage="http://www.apple.com/quicktime/download/" />
</object>
</video>
Also see: Streaming via RTSP or RTP in HTML5
I don't think it is possible now to "cheat" the HTML5 browser to encapsulate the live video stream to a ".mp4" file.
I believe HTML5 will consider live video support in a near future.
What you can do is just wait. :)
For maximum compatibility, here’s what our video workflow will look like,
Make one version that uses H.264 baseline video and AAC “low complexity” audio in an MP4 container & Make another version that uses WebM (VP8 + Vorbis) or Theora video and Vorbis audio in an Ogg container.
I think this combination solves your problem & it plays on most of browsers.
You should required at least two versions of Video to play in all the browsers.
I have HTML page where windows media player is embedded. It works very well in all browsers on Windows, but when trying to open in Firefox on Mac OS, it fails to open.
Is there any alternative method which can be controlled using Javascript or HTML or do I have to install Window Media Player support for Mac OS?
Try streaming with flash as a fallback, or use the <video> or <audio> tag, that Safari supports.
If you are trying to stream video in a way that works consistently on every browser, you should look into Video For Everyone:
Video for Everybody is very simply a chunk of HTML code that embeds a video into a website
using the HTML5 element which offers native playback in Firefox
3.5 and Safari 3 & 4 and an increasing number of other browsers.
The video is played by the browser itself. It loads quickly and doesn’t threaten to crash your browser.
In other browsers that do not support , it falls
back to QuickTime.
If QuickTime is not installed, Adobe Flash is used. You can host locally or embed any Flash file, such as a YouTube video.
The only downside, is that you have to have 2/3 versions of the same video stored, but you can serve to every existing device/browser that supports video (i.e.: the iPhone).
<video width="640" height="360" poster="__POSTER__.jpg" controls="controls">
<source src="__VIDEO__.ogv" type="video/ogg" />
<source src="__VIDEO__.mp4" type="video/mp4" /><!--[if gt IE 6]>
<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
[endif]--><!--[if !IE]><!-->
<object width="640" height="375" type="video/quicktime" data="__VIDEO__.mp4"><!--<![endif]-->
<param name="src" value="__VIDEO__.mp4" />
<param name="autoplay" value="false" />
<param name="showlogo" value="false" />
<object width="640" height="380" type="application/x-shockwave-flash"
data="__FLASH__.swf?image=__POSTER__.jpg&file=__VIDEO__.mp4">
<param name="movie" value="__FLASH__.swf?image=__POSTER__.jpg&file=__VIDEO__.mp4" />
<img src="__POSTER__.jpg" width="640" height="360" />
<p>
<strong>No video playback capabilities detected.</strong>
Why not try to download the file instead?<br />
MPEG4 / H.264 “.mp4” (Windows / Mac) |
Ogg Theora & Vorbis “.ogv” (Linux)
</p>
</object><!--[if gt IE 6]><!-->
</object><!--<![endif]-->
</video>
If you need to look for a Flash based player (both audio and video), take a look at Flowplayer, an Open Source (GPL 3) video player for the Web. It can do almost anything you might want to do, and there is an extensive collection of plugins for many applications.
Side-step the problem by using a flash based mp4 video player, this approach is the de facto one currently.