Develop Reference

Win 7 + IE 11 First video plays but second and later videos won't play

I've a list of video's in a page. The videos are fetched from Server via Rest API and are used in html as below. The first video plays well but later video's wont play. The resolution are same for all video. This works well in other browsers and platform.
<video width="645" height="425" id="myvideo" class ='video' controls controlsList="nodownload">
<source id="source" src="" type="video/mp4">
</video>
In my source tag, I've mentioned type="video/mp4"
In JS Side I do the below
$("#source")[0].src = <path-to-the-video>;
This works great on all browers and platform except for windows 7 and ie 11.
The error I get is
MEDIA12899: AUDIO/VIDEO: Unknown MIME type.
I've checked over the net
to add the type="video/mp4" which is already there and does not solve the problem.
The video resolutions are correct because the same video works in the same IE and Window when played in a separate HTML file.
What am I missing?
Error Screen Shot
Same Video working in same browser when added to a html file
<video width="645" height="425" class="video" id="myvideo" style="display: inline-block;" controls="" controlslist="nodownload">
<source id="source" src="http://hostname.com1/video2" type="video/mp4">
</video>
Screenshot

How can I redirect to a URL when browser dose not support HTML5 videos?

I am trying to redirect to a different URL when html5 video's not supporting. Actually HTML5 video are not playing in safari browser. So I want to redirect my page to home.html instead of index.html. Any help or direction My browser giving message Your browser does not support HTML5 video. Here is my code, any help will be appreciated.
index.html
<video id="myVideo" autoplay preload controls >
<source src="final.mp4" type="video/mp4">
<source src="final.ogv" type="video/ogg; codecs=theora, vorbis">
<source src="final.webm" type="video/webm; codecs=vp8, vorbis">
Your browser does not support HTML5 video.
</video>

You can check if the video element is supported in JavaScript, and then redirect if it isn't supported:
if (!document.createElement('video').canPlayType) {
window.location.replace('home.html');
}

HTML5 Video not rendering on Safari & Firefox with Angular.js

Im trying to display some static HTML5 video in my Angular app. It plays without issues in Chrome but not on Safari or Firefox.
<video class="masthead-video w100 m-w100" autoplay loop muted>
<source src="public/img/test.mp4" type="video/mp4">
<source src="public/img/test.webm" type="video/webm">
<source src="public/img/test.ogv" type="video/ogg">
Your browser does not support the video tag.
</video>
Loading this markup into a browser as simple HTML (no angular or any other markup) allows it to play on Safari and Firefox normally without issues.
Ive tried using ng-src instead (even though I shouldnt have to since Im not using dynamic paths) but it didnt help.
Does anyone know of any issues when using HTML5 video with Angular.js?

Use $sce for trust source url .
$scope.trustSrc = function (src) {
return $sce.trustAsResourceUrl(src);
};
$scope.src= public/img/test.mp4;
Html Content
<video class="masthead-video w100 m-w100" autoplay loop muted>
<source ng-src="{{trustSrc(src)}}" type="video/mp4">
Your browser does not support the video tag.
</video>
appy this way for your code.

Internet Explorer HTML5 video starts only after some time

I'm facing the problem that a video does not start to play, which I added to an HTML5 page:
<video id="videobcg" preload="auto" autoplay="true" loop="loop"
muted="muted" volume="0" poster="http://test.com/poster.jpg">
<source src="http://test.com/texas.mp4" type="video/mp4">
<source src="http://test.com/texas.webm" type="video/webm">
<img src="http://test.com/texas.jpg" />
</video>
In Chrome and Firefox it works fine; the video starts in one second.
In Internet Explorer I have to wait some time for video to start.
In Safari it does not start at all.
How to fix it?

Sometimes, with MP4 files, the information regarding the length etc. of the file is at the end rather than the start of the file, so some browsers need to download the entire thing to get this information in order to play the file.
Try running QTIndexSwapper 2 on the file which will move the required information to the start of the file, if it needs to be.
It's worth a try.

HTML5 Video "Black Screen" on iPad

I'm building a website that has videos embedded within them. This website needs to cater for iPad users as well but I'm having trouble with the ol' video tag at the moment. I have a video that plays fine in browsers but not on an iPad unfortunately.
I'm just getting a black screen with the iPad, and no error message to speak of.
Here is my code for the video:
<video id="movie" width="790" height="250" controls >
<source src="anim/intro.ipad.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="anim/intro.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="anim/intro.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
</video>
<script>
var v = document.getElementById("movie");
v.onclick = function() {
if (v.paused) {
v.play();
} else {
v.pause();
}
};
</script>
The videos were all created following tutorials about HTML5 video. They were all encoded using preferred iPad settings on Miro Video converter.
Just incase this matters (I'm not sure it will) I'm testing the video on an iPad simulator.
No matter what I do, I just can't get the video to play:

Are you sure you got the encoding right?
Try this to test it:
<video src="anim/intro.ipad.mp4" controls>
Your browser does not support the video element.
</video>

is your .htaccess file serving up the particular video files correctly?
Ensure your server is using the correct mime-types. Firefox will not play the Ogg video if the mime-type is wrong. Place these lines in your .htaccess file to send the correct mime-types to browsers
AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
Reference:
Video for Everybody
Also, are you modifying the video element by using positioning? I've found that this creates this black video screen too.