MP4 in Video.js not playing until fully loaded - html5-video

I'm using Video.js to play back videos in MP4 format on a client's website.
The player uses html5 video and Adobe Flash Player as a fallback.
(In my case it seems to use Flash always so I don't know if the problem exists in the native html5 player as well.)
The video only starts playing after the *.mp4 file is completely loaded. So no buffer for a few seconds. The file must be completely downloaded by the browser before it starts playing.
When the video is long, the visitor has to wait very long before he can even see that the video is working.
The question now is, is it the browser, the script (video.js) or the video file that creates that problem.
On the videojs.com website however the video is playing back while loading, so works properly. Therefore I think it can't be the browser.
Has anyone else had that problem? How can I fix this issue?
Any advice is very much appreciated!
Thanks
Max


That occurs because the moov atom of the mp4 file is on the end of the file, the player needs to know the moov atom before start playing, you can move easily the moov atom to the beginning of the file with MP4Box, there is a gui version for Windows.
In Linux command line you move the MA with: MP4Box -add my_video.mp4 my_newVideo.mp4.
This takes a few seconds.
More info:Adobe's explanation of moov atomhere


Are you sure that you have your tag with preload="none" because I was having the same issue and I had preload="auto". I changed it to "none", it worked great!!
My issue had nothing to do with the moov atom because I tried that too and it didn't have any effect. I even removed this converted video and it still worked with preload="none".
kjsharks


I use this command to add the metadata:
MP4Box -isma your-file.mp4
;)


Quoting http://docs.videojs.com/docs/guides/options.html
The preload attribute informs the browser whether or not the video data should begin downloading as soon as the video tag is loaded. The options are auto, metadata, and none.

Related

HLS Player: Clear video.js buffer on click

I have two live videos feeding an encoder which creates H.264 chunk files and an HLS manifest which is being served by an apache web server.
A browser page using video.js shows a player. Pressing "play" on the browser properly plays the video. It works well.
However, if we change video sources (by flipping the switch in the picture below), there is a considerable delay (10 seconds) before the new content is displayed in the player. I'd like to get that to 3 seconds.
It appears that video.js and/or the HTML5 player in browser is buffering that amount of content. (if you delete the files on the web server, kill apache, or even pull the ethernet cable, the video keeps on playing!)
A button on the web page controls the switch. When clicked, I would also like to clear or reset the player so that it immediately re-reads the index.m3u8 manifest and downloads the new chunks.
So far, haven't found anything promising searching the internet or in the video.js API docs. There are lots of articles on API calls for fetching the current buffer percentage but cannot find any API for clearing it altogether.
Any ideas?
The encoder is set for 3 second chunks and the playlist depth is set for 10 entries.

I had a similar problem. Since i could not find a reliable API for this, i came up with a rather dirty workaround to clear the buffer:
var ctime = player.currentTime();
player.currentTime(0);
player.currentTime(ctime);
This currently works for me in all major browsers.

How to get the video file for a movie currently playing in browser?

So I have a youtube page open where I can watch a video.
But this video was taken down by the user. My open page still has the video, if you go to it again (refresh) the new page does not.
Since I have the video loaded in my browser tab (chrome), how can I go about finding the actual file and saving it?

In the old days of YouTube, it may have been possible to find the single video file on your harddrive and save it, but this is no longer the case. As explained in this Computerphile video, all YouTube videos are now split into tiny pieces and downloaded piece by piece.
You can observe this for yourself if you open up Chrome (or Firefox's) Dev Tools and watch the nnetwork tab. You'll see:
all of the pieces of the video loading bit by bit.
One additional thing you'll learn from the Network tab is that the videos are downloaded as octet streams, so you won't be able to find the links to the pieces hidden in the DOM.
One thing you migth try is, in the Network tab, clear the results and then move the cursor to the beginning of the video. You should see the streams come up again. Right click on the path name and then do a "save as", and save it as 0000.mp4 (or whatever), for all the pieces. You should be able to reassemble these pieces in any video editing software. I tested this by getting two pieces from a random YouTube video.

I couldn't find anything that doesn't require a restart (and hence reload) of Chrome.
One (kludgy) hack if possible, though, would be to run a screen video capture and play the video.

I have done this long back using IE6, i.e. fetch the file from the temporary files location and rename it to the extension flv.
The following links should point you in the right direction, but can't say it will work for sure, as I believe recent chrome versions seem to have a defensive cache implementation.
Ubuntu Forum solutions
You might need to tweak the above for your use.

Run a screen recording/capture program such as:
Screenr
CamStudio
Then edit out the youtube bar if its visible.

The buffered video is cached at the following location:
C:\Users\<user name>\AppData\Local\Temp\flaxxxx.tmp
Note you have to change to whatever user you are using, and xxxx is a random number. Also, the .tmp file might be hidden, so make sure your windows explorer is displaying the hidden files.
While the tab is open, you won't be able to copy the file, but if you close it, the file will be automatically deleted. For doing so, download HoboCopy, extract it and after that, run cmd as administrator. Change the directory on the console to the directory where you have extracted HoboCopy and type the following command:
hobocopy C:\users\<user name>\Appdata\Local\Temp C:\videos fla1234.tmp
<user name> - replace with your windows username
C:\videos - the directory where you want the video to be copied to
fla1234.tmp - the name of the file to be copied.
Wait for the copy to be done and then you can rename the destination file, changing '.tmp' to '.flv'. This file can be played with any FLV supporting media player.

i find this software to get the video from temp files folder and play it http://www.nirsoft.net/utils/video_cache_view.html

Video file is cached, therefore suggested ways can help you to save the file. But if you deal with same problems I offer using IDM(Internet Download Manager). After installation of this application for every online video stream (e.g. all flv files in youtube) IDM brings a small picture that you can click on it and downloading will be started automatically without need of any configuration.

You have to install a browser extension to download YouTube videos. You won't find a simple URL for an mp4 file in the HTML source. Try googling "youtube downloader" + your browser name.
As far as I recall, YouTube videos are not served as a continuous HTTP resource, but instead divided into small chunks and assembled client-side by the Flash player. This is why you can jump into the middle of a video, without having to buffer the first half of the video.
Generally speaking, YouTube don't want you to rip their content, so they aren't exactly making it easy for downloaders.

Why is video playing in Firefox but not in Chrome or Safari?

I have a video thumbnail on the top right of this screen that, when clicked, plays fine in Firefox. However, in Chrome and Safari the video will not play. The loading image spins forever and will not continue to the video.
Any advice is much appreciated. I have tried upgrading VideoJS from v2.0.2 to v4.1.0 and that still did not solve the problem.
Here is the link: http://www.therefinerycreative.com/#!/theatrical

I believe it is the actual source movie files that are the problem. The mp4 file is 15mb which is quite big for a 1 minute movie. I can see the dimension size of the movie is fine. Try decreasing the size of the file down first. Or to save you time first, try putting in the standard video from videojs just to double check that it definitely is the source file(s). http://vjs.zencdn.net/v/oceans.mp4
I also noticed that you use an ogg file too. In most cases you can get away with just using an mp4 file. Try both of these solutions and let me know how you get on.

Flash playback slow with progressive download

Using VideoJS 4.0.4 (it also did this in version 3) the playback is slow/choppy in Chrome (not tested in other browsers) when using the Flash player. The playback smooths out after the buffer finishes loading the full video. Is there any fix for this?

I'm not sure if this is exactly what you are experiencing so apologies if this is irrelevant, but for me the flash player was waiting until the whole video was loaded before it would start playing.
If you are using the mp4 format, I found that moving the moov atom to the front of the movie file with qt-faststart helped a lot.
Here are some resources I found when I had this similar problem.
http://www.adobe.com/devnet/video/articles/mp4_movie_atom.html
http://help.videojs.com/discussions/problems/1141-ie8-flash-fallback-buffers-entire-video-before-it-starts-to-play
Post processing in ffmpeg to move 'moov atom' in MP4 files (qt-faststart)

I fixed it. It ended up being the Flash player. I went to chrome://plugins, clicked the + at the top right, and noticed I had 2 Flash plugins installed: 11.7.700.225 (pepflashplayer.dll) and 11.7.700.224 (NPSWF32_11_7_700_224.dll). I disabled them one at a time and retried the video - the 11.7.700.224 one ran flawlessly while buffering, while the 11.7.700.225 version was the one causing the choppiness.

Chrome stops video execution

Using IE everything goes well (i got a mp4 video with priority execution setted on flash). when i try to view my video on chrome all seem to be good too, but in few seconds (not always but often) videojs crashes.
This is the log:
error:MediaError
code:3
What should i do?

According to HTML5 spec error code MEDIA_ERR_DECODE = 3 means that video was failed to be decoded. Chrome could reach broken frame e.g. video was encoded incorrectly.
In my experience HTML5 video decoding has poor support when it comes to error handling. Flash is more bullet-proof here. I got an example when Chrome (HTML5) failed to play video but it was playing fine in FF (flash). Converting to different pixel map (yuvj420p -> yuv420p) resolved my issue.
It means that first you should try encoding video with different options. As an option you can use ffmpeg