I am trying to buffer HTML 5 video on Page load using follow:
<video width="320" height="240" id="myVid" controls="controls" preload="auto">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4">
<object data="" width="320" height="240"></object>
</video>
but Video gets buffer only 40 to 50% on page load without playing and get stuck. I want to buffer full video on page load and then play.
Link : http://codepen.io/anon/pen/XKNeYQ
The Browser itself decides how much to preload. You can not change that. Take a look at the table here for more information. Some browser have a time limit some other a size limit. The only other option is to use a custom video player that supports your needs.
Related
I have a video background, which works fine - I have specified 3 different formats so the video background works in different browsers, however it appears my page is loading all 3 of the video backgrounds at the same time. This is slowing down my page massively!
Just wondering is there a way (using Javascript or jQuery) to detect the browser and load only 1 video background based on what browser is being used?
<div class="header-unit">
<div id="video-container">
<video autoplay loop muted class="fillWidth" id="bgvideo">
<source src="backgroundvideo.mp4" type="video/mp4">
<source src="backgroundvideo.ogv" type="application/ogg">
<source src="backgroundvideo.webm" type="video/webm">
</video>
</div>
</div>
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
Is it possible play video from remote download video link.
For example I have link http://vidrack-media.s3.amazonaws.com/student_47e96b83-989e-437a-8953-0d068308e25f.mp4
I wanna render any video player where I can watch this video.
Yes you can, in nearly every player.
<video width="320" height="240" controls>
<source src="http://vidrack-media.s3.amazonaws.com/student_47e96b83-989e-437a-8953-0d068308e25f.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
What I would like is to have a video play in full screen once and then disappear leaving the web page behind. is this possible using Javascript, HTML and possibly CSS?
The video in question is called Website Opening.mp4
<video width="100%" autoplay="autoplay">
<source src="movie.mp4" type="video/mp4" />
</video>
Edit: When autoplay attribute is present, the video will automatically start playing as soon as it can i.e. when the page loads.
To watch videos in an HTML5 web player requires us to add the source of the video in the HTML code like this:
<video id="example" class="video" controls preload="none" width="500" height="300"
poster="abc.jpg" data-setup="{}">
<source src="../87D645D1d01.ogv" type='video/ogg' />
</video>
So is there any way with which we can browse a media file in our local file system irrespective of the OS and then add the pah to the SRC: part of video element like we do it in any desktop based video players and then play it?
Regards.
Anuj.