I have a a little bit complex website mechanism for loading video,
and I have tested it in several ways,
First I have these 2 videos
the first one is a very light video with only 20seconds duration and is not HD I think and it is even less than 1MB
the second one is a video clip that runs like 4 minutes and I think it is HD and the memories are like 90MB,
Both are in mp4 format
I have both of the videos in the server,
I tried to run those videos both in IE11 and Google Chrome by streaming them from the server with "video" tag in HTML5 and both of them runs very smooth (one video at a time)
Next, I tried to save the video in a client-side storage using IndexedDB so that in the future, the browser does not have to stream it anymore,
those videos are saved as blob and then stored inside the IndexedDB (except in the Google Chrome I have to save those videos or any files as ArrayBuffer as Chrome does not support the blob inside the indexedDB just yet),
When I load the video from the indexedDB, I convert the blob to an objectURL using createObjectURL() and play them in the video source, (for Google Chrome I have to load the arrayBuffer and then convert them first to blob)
While in IE11 both videos are running fine as usual,
but in Chrome I can only play the first video (the light one), as for the second video, it never played on Chrome! I have no idea how can this happen as the 2nd video plays well if it is streamed.
Here is the properties of both videos:
On the left is video with 89MB and the right is 300KB
Can anyone tell me what I am doing wrong here? or is it just not supported in Chrome for HD?
Related
Because I dislike Youtube and Vimeo is too expensive, I chose to upload my videos directly to the server at my web host and embed the videos on my site using the HTML5 tag (see photos for the code). The videos play fine on all browsers except for Firefox and I can't figure out why. https://memoriaelinguagrumentina.org/english/saponareseCuisine.html
I've seen several other posts on here asking about very similar problems; however, nearly all are at least 8 years old. I've gone through them as part of my troubleshooting process, but without any luck.
I've seen it recommended here to use multiple video formats (.mp4 AND .ogv) because there is no universal format supported by all browsers. Firefox did not always support mp4, but I believe it does now. So I don't believe this is the root of the problem.
I checked with my web host to see if they have the correct MIME types (see photo).
I cleared the cache on my browser, set the privacy settings to normal, and checked hardware acceleration.
What am I missing?
*note: To save disk space, I'd like to not have to upload duplicate videos in different video formats to the server, ideally. Since Firefox now claims to support mp4, I was hoping to get away with using only mp4.
Firefox doesn't support all video files. They generally support MP3, WebM, Ogg, and Wave containers, and if you are using an MP4 container then it usually depends on the platform decoders for AAC and H.264 audio and video streams. The video encoder format that you are using isn't supported by firefox. You should use supported encoders for your video.
You can find more information here:
https://support.mozilla.org/en-US/kb/html5-audio-and-video-firefox
Your MP4 videos are using H.265 video codec.
You need to have them encoded as H.264 to work in most browsers.
Solution: This means you must re-save your videos as a new format.
The problem is not just Firefox, even Windows Chrome does not play H.265 encoded video.
Things to fix:
Re-encode as H.264 (use High or Main profile for better compression-vs-quality output).
Re-size your videos (when doing re-encode). 720p should be okay for demos/intros. You don't need a large 3840 x 2160 pixels video showing inside a small 672 x 398 pixels box.
Your file size is not good. 286 mb is too much data loading for just a mere 6 minute video.
Streaming a MP4 video from a remote site to Chrome using <video> element, works great on IE - but on Google Chrome, the videos buffering is extremely slow (1st second buffers for 5 seconds, then plays this second, then 5 seconds to buffer the 2nd second etc.).
The videos format is MP4 with H264 encoding.
This does not happen on all clients (though I failed to find a common attribute which can cause this).
Any idea why this is happening ?
Self-solved this issue by changing the video's bitrate to a lower value (276k).
This MPEG-DASH stream
http://54.241.9.147/new-fandor/vod/21/2157/dark_star_FILM_v11.smil/manifest_mpm4sav_mvlist.mpd
doesn't play in dash.js -- it plays the first segment at the lowest bitrate, switches to the next higher bitrate and stops after loading the second bitrate's init information. You can see this by pointing Chrome at the dash.js reference player, entering the stream URL in the top box and hitting Load. Open the JavaScript console to see that dash.js reported a media error, which means that the video element had a .error.
The same player is able to play this stream in IE11 without error.
These streams, each of which contains only one of the bitrates that play in the above sequence, both play without error in Chrome, so it's not that the underlying media is just somehow corrupt.
http://54.241.9.147/new-fandor/vod/21/2157/dark_star_FILM_v11_0.smil/manifest_mpm4sav_mvlist.mpd
http://54.241.9.147/new-fandor/vod/21/2157/dark_star_FILM_v11_1.smil/manifest_mpm4sav_mvlist.mpd
Any ideas?
A Chromium person says that this is due to audio sample rate switching, which Chrome doesn't support yet: https://code.google.com/p/chromium/issues/detail?id=315330 Although each of our videos' video bitrates should have had the same audio bitrate, some videos had different audio bitrates for different video bitrates. The solution was to reencode those videos correctly.
I am currently working on a web application for video processing. Here is the situation:
I have a mp4 h264 video as input, I split the video in multiple avi files. Each avi file is processed individually generating another avi file as an output which is immediately encoded back to h264 and is now ready to be displayed in my web application.
The problem is that in need to play those video chunks as if they were a single video but I have not been able to accomplish that in a proper way. I have tried the following solutions without having the expected results:
JW Player: Each time a chunk is played, the player goes black and as far as I know it is not plausible to pause it on the last frame
Flowplayer: Videos wont reproduce on googletv's chrome browser
HTML5 video tag: Behaves extrangely on googletv's chrome browser not playing the chunks completely when the src attribute changes and no playing at all less-than-1-second-chunks (It works fine on linux)
Any Ideas?
I'm Looking for a generic player that can play .avi, .flv, .mpg, .mp4 and .wmv video files and .mp3, .m4a, .wma and .wav audio file types in browser.
So far any player that I found only plays one or 2 types from above list.
Also for some reason video tag only shows empty screen with loading cursor on it, no matter what file type it is.
I only need to show these files in Firefox and Microsoft Internet Explorer (both latest version).
Don't look any more - there isn't such player.
Instead you may want to use some on-demand video transcoding service, check out for instance http://www.encoding.com/.