Internet Explorer HTML5 video starts only after some time - javascript

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.

Related

How to fix no sound issue for mkv video in reactjs

I have a video file in MKV format, i want to play that file in the browser without converting, how can i play this file format in browser?
<video width="320" height="240" controls>
<source src="movie.mkv" type="video/mkv" />
Your browser does not support the video tag.
</video>
when I use this, I can't hear sound.
I can see issue for .mkv format video.
.mp4 format is fine.
who can help me about this issue?

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');
}

html <video> doesn't play sound on some videos

I don't understand, I have a project with Angular2 and in my home component, I try to display a video with html5. The problem is that sometimes, on some videos, the tag doesn't play sound:
<div class="video-gallery">
<video id="video" controls preload="auto" width="640" height="420" poster="assets/imgs/video_logo.png" >
<source src="assets/videos/{{videos[0].name + videos[0].extension}}" type="video/mp4" />
</video>
</div>
When I say 'on some videos' I mean it's not up to the extension, some videos are mp4 and play sound and others (mp4) don't. Same thing for mkv for example. I only get the video but no sound. What could be the problem ? I work with Chrome's last version so I don't think it's from chrome because it is supposed to support video and sound of html5 . Can it be from the video tag ?
Thanks

Playing videos one after another in html5 video player

I want to play a video after another video so I use this code
<video id="example_video_1" autoplay controls="none" width="640" height="300" poster="vlcsnap-2015-01-10-20h41m11s114.png" onended="run()">
<source src="intro.mp4" type='video/mp4' />
<source src="intro.webm" type='video/webm' />
<source src="intro.ogv" type='video/ogg' />
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
<script>
videoPlayer = document.getElementById("example_video_1");
function run(){
var nextVideo = "video2.mp4";
videoPlayer.src = nextVideo;
videoPlayer.play=autoplay;
videoPlayer.controls=controls;
};
</script>
This works fine in chrome but when i play this in firefox the 2nd video (video2.mp4) dose not play, as firefox dose not support mp4 format. So is there any process to set the second video in mp4, webm and ogg file format so that most of browsers can play the video.
Your last source <source src="intro.ogv" type='video/ogg' /> Is wrong. You wrote two different formats .ogg is for audio. And you need to establish a folder name that the file is in. With this you need to have the HTML5/CSS3 file right next to the folder in a separate folder. This is the correct code:
<source src="foldername/intro.ogv" type='video/ogv' />
Other than that your code is in great shape.
***I do not know anything about your script because I know nothing about JavaScript, or JQuery. Hopefully this was useful! Sorry :(

Categories

Resources