HTML 5 Video not working on IE9 - html

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...

Related

http response 206 for video in internet explorer

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

mediaelement.js playing sound not mp4 video on chrome.

on all browsers follows video plays but not on chrome.
http://www.cool-mobile-stuff.com/view.php?id=14
is there any solution? The mimetype is fine. its video/mp4 not sure what's wrong.
later i came to know that mp4 is not supported in chrome. The chrome support .webm format for videos in html5. I converted video to .webm using free converter winff and added
<source src="video.webm" type="video/webm">
to my video tag and it worked fine. Hope it can help others.
Google Chrome supports MP4; it's Chromium that does not: http://www.chromium.org/audio-video
I had a similar issue to this (except video wouldn't play at all) and found that removing the call to mediaelement.play() enabled it to work.
I still don't know why, the MediaElement demo works fine for me...! Yet I can set my own page up almost exactly the same and run it from the same server with the exact same video and it doesn't work.

HTML5 video loop not working in Chrome (from Cloudfront)

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.

HTML5 video won't play picture [duplicate]

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.

Can I have a video with transparent background using HTML5 video tag?

We filmed a spokesperson on a green screen and have the video files ready in multiple formats.
With Flash we could use the wmode transparent within the param and embed tags, but is there something similar to this with the video and source tags in HTML5? Is it even possible to properly save .m4v or .ogv videos so that we can play these files with transparent backgrounds on our browsers?
Thanks
Yes, this sort of thing is possible without Flash:
http://hacks.mozilla.org/2009/06/tristan-washing-machine/
http://jakearchibald.com/scratch/alphavid/
However, only very modern browsers supports HTML5 videos, and this should be your consideration when deploying in HTML 5, and you should provide a fallback (probably Flash or just omit the transparency).
Chrome 30> supports video alpha transparency.
http://updates.html5rocks.com/2013/07/Alpha-transparency-in-Chrome-video
Update: Webm with an alpha channel is now supported in Chrome and Firefox.
For other browers, there are workarounds, but they involve re-rendering the video using Canvas and it is kind of a hack. seeThru is one example. It works pretty well on HTML5 desktop browsers (even IE9) but it doesn't seem to work very well on mobile. I couldn't get it to work at all on Chrome for Android. It did work on Firefox for Android but with a pretty lousy framerate. I think you might be out of luck for mobile, although I'd love to be proven wrong.
These days, if you use two different video formats (WebM and HEVC), you can have a transparent video that works in all of the major browsers except Internet Explorer with a simple <video> tag:
<video>
<source src="video.mov" type="video/quicktime">
<source src="video.webm" type="video/webm">
</video>
Note: It's important that the WebM version come second since Safari currently supports WebM, but not WebM transparency.
Here's a demo you can test with
I struggled with this, too. Here's what I found. Expanding on Adam's answer, here's a bit more detail, including how to encode VP9 with alpha in a WebM container.
First, here's a CodePen playground you can play with. Feel free to use my videos for testing.
<video width="600" height="100%" autoplay loop muted playsinline>
<source src="https://rotato.netlify.app/alpha-demo/movie-hevc.mov" type='video/mp4'; codecs="hvc1">
<source src="https://rotato.netlify.app/alpha-demo/movie-webm.webm" type="video/webm">
</video>
And here's a full demo page using z-index to layer the transparent video on top and below certain elements. (You can clone the Webflow template.)
So, we'll need a WebM movie for Chrome, and an HEVC with Alpha (supported by Safari on all platforms since 2019).
Which browsers are supported?
For Chrome, I've tested successfully on version 30 from 2013. (Caniuse WebM doesn't seem to say which WebM codec is supported, so I had to try my way.) Earlier versions of Chrome seem to render a black area.
For Safari, it's simpler: Catalina (2019) or iOS 11 (2019).
Encoding
Depending on which editing app you're using, I recommend exporting the HEVC with Alpha directly.
But many apps don't support the WebM format, especially on Mac, since it's not a part of AVFoundation.
I recommend exporting an intermediate format like ProRes4444 with an alpha channel to not lose too much quality at this step. Once you have that file, making your WebM is as simple as:
ffmpeg -i "your-movie-in-prores.mov" -c:v libvpx-vp9 movie-webm.webm
See more approaches in this blog post.
At this time, the only video codec that truly supports an alpha channel is VP8, which Flash uses. MP4 would probably support it if the video was exported as an image sequence, but I'm fairly certain Ogg video files have no support whatsoever for an alpha channel. This might be one of those rare instances where sticking with Flash would serve you better.
While this isn't possible with the video itself, you could use a canvas to draw the frames of the video except for pixels in a color range or whatever. It would take some javascript and such of course. See Video Puzzle (apparently broken at the moment), Exploding Video, and Realtime Video -> ASCII
Mp4 files can be playable with transparent background using seeThrou Js library. All you need to combine actual video and alpha channel in the single video. Also make sure to keep video height dimension below 1400 px as some of the old iphone devices wont play videos with dimension more than 2000. This is pretty useful in safari desktop and mobile devices which doesnt support webm at this time.
more details can be found in the below link
https://github.com/m90/seeThru
webm format is the best solution for Chrome > 29, but it is not supported in Firefox IE and Safari, the best solution is using Flash (wmode="transparent"). but you have to forget "ios".
Quicktime movs exported as animation work but in safari only. I wish there was a complete solution (or format) that covered all major browsers.