currently I have a problem with a project. I have a full HD video I'd like to play in Background. The video is h264 encoded. The Problem is, that the video is quite long, so it has 90MB. But even with my 200MBit connection I have to wait about 5 seconds before the video starts to play.
What can I do to prevent this?
I use this code:
<video autoplay muted loop id="myVideo">
<source src="video.mp4" type="video/mp4">
</video>
I'd like to have the same performance, like Netflix. After a simple click the video just starts.
How is it possible?
There are a few things you can do to help:
1/ optimize the video for fast start. The MOOV atom in an MP4 file is normally at the end which means it has to get to that before it will start playing. Using ffmpeg you can move that to the front:
ffmpeg -i source.mp4 -a:v copy -a:c copy -movflags faststart output.mp4
(this will copy the video and audio with no changes, just change the package)
2/ you could add the preload attribute to the video source to allow the browser to optimize based on it's own rules what pre-loading it's going to do
<video preload="auto" muted loop....>
which will help, but still not give you 'instant' start.
3/ Depending on the size you might want to preload the video into a blob when the page is loading so you can show the 'play' button when it's fully buffered and ready to go. See this answer for a solution (rather than re-typing it here)
4/ Most browsers have support for adaptive streaming (HLS or MPEG-DASH) so you could create fragmented mp4 files which will allow 'instant' start at a low bitrate/quality that ramps up as the browser/video player (eg jwPlayer) detects and adapts to network conditions
Related
I have a video on my website that I need to keep "locked" (visitors shouldn't be able to play/pause/forward).
I noticed that if I flip my phone the video goes full-screen and the OS takes control of it (it's no longer played by the inline html player, but instead is played by the OS player).
Any way to prevent that?
<video playsinline webkit-playsinline>
...
</video>
PS: I tried the playsinline attribute, but it didn't seem to work. At least not on the devices I tested.
I have two different video files. One is of .asf format and another is of .xesc format. How can I play these video files on my website?
The best solution is to upload it to a video-streaming service (such as YouTube) and play it on your website as an embed video. Then you do not have to worry about streaming the video - which can drag the speed of your entire website down.
However you can also convert the video to a supported HTML5 format and upload it to your server and use HTML5 builtin video player (not recommended).
You should use the video tag - HTML5 feature
<video height="500" width="500" controls>
<source src="source/of/the/video/" type="video/type" />
Can't play this video right now...
</video>
If you do not want to convert it, you may want to check out this answer
I've always noticed that you can play audio files with the HTML5 <video> tag. It seems really handy, considering that you only have to use 1 element to play videos and audio. An example would be this JSFiddle.
<video src="http://www.w3schools.com/html/horse.mp3" controls></video>
My first question is: Is this something that is here to stay, or is this a fluke that browsers plan on removing later on?
And if not, how do I know if a file is a video or audio using JavaScript? Because if I'm correct, can't .ogg files be video or audio? I'm trying to make a mediaplayer app for Chromebooks but I need to be able to differentiate audios from videos.
First: there are topics with the similar title. I browsed them but dint find a satisfactory answer.
I am testing autoloading of html5 video in android and ipad.(Auto load only works in few browsers: Firefox, Opera and Safari).
The video loads instantaneously if it is on the device that is playing. But if the video is on a server it takes very long time to load(It took nearly 5 mins for the video to start).
I dont think the problem is with bandwidth. For testing purpose I have hosted the files on google drive. (accessing Google drive should be pretty fast and the size of the video files are less than 2MB).
Can you suggest how to speed up video loading?
Here is my video element:
<video id="video1" width="430" height="430" controls preload="auto" >
<source src="https://drive.google.com/uc?export=download&id=0B0eCCOckMJskRDl2enU4N1JLSGs" type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"'/>
<source src="https://drive.google.com/uc?export=download&id=0B0eCCOckMJskbURTTjJVaG42V0U" type='video/webm;codecs="vp8, vorbis"'/>
</video>
Thanks.
The reason it does this is because sometimes the video encoder (whatever programme was used) places the video index at the end of the video file rather than at the beginning. This interferes with progressive download as the browser doesn’t know anything about the file until it has downloaded it and read that index.
Run this program below on it, which will simply re-encode the file, placing the index at the beginning.
http://renaun.com/blog/code/qtindexswapper/
Let me know if this helps.
Install qt-faststart, then run the command:
qt-faststart inputfile.mp4 outputfile.mp4
this is my first question in stackoverflow so pardon me for mistakes.
I've been trying to create a simple CMS using videojs in which user could upload their video and customize their attributes (eg: autoplay, loop and controls).
When they change the attributes I will automatically recreate the whole tags and reinitialized it. I did this so it gave the correct preview especially on firefox since user will upload mp4 and firefox will give the "not supported" warning sign if I did not reinitialize it (videojs will automatically converts into flash).
Now the problem is when user checked the "autoplay" attributes because when I initialize the video it will automatically plays and I don't want that kind of behavior in the CMS (though I want that behavior in the published site).
I've been trying to pause the player once it was ready but it still plays.
My hypothesis is that the command to pause was fired before the command to play from the autoplay attributes.
This is the html tag used for this
<video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" autoplay preload="auto" data-setup="{}">
<source type="video/mp4" src="http://video-js.zencoder.com/oceans-clip.mp4">
</video>
And this is the one I used to initialize and pause the video
_V_(example_video_1).ready( function() {
var myplayer = this;
myplayer.pause();
});
Any idea? Help is greatly appreciated. Worst case if all else fails I could use different tags for the preview and published site (no autoplay for the preview). I create a fiddle for this : http://jsfiddle.net/F8JhL/2/
EDIT: I noticed that sometimes the pause event really works though not automatically (about 1 to 2 second after the video plays) but more often it doesn't work at all.
I find the same issue when using version 4.1.0 of videojs. When I upgrade to version 5.1.0 this conflict is missing.
You could download the latest version at https://github.com/videojs/video.js/releases
So I think this bug has been fix (but I can't find the commit revision for this fix).