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).
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.
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?
I'm streaming a 256 kbps mp3 in real-time for a radio-style site I'm creating. I'm streaming it over HTTP.
When I access the stream URL via Firefox, it starts playing the mp3 back immediately at the point in the song the server was streaming when it connected.
With Chrome however, it needs to buffer for at least 8 seconds before it starts playing.
How can I get Chrome (and Safari) to behave like Firefox and start playing the audio immediately?
I'm playing the audio with this code:
var a = new Audio('/stream');
a.play();
Thanks
This is a bit older but it looks like this was a known bug with Chrome per this link:
https://bugs.chromium.org/p/chromium/issues/detail?id=362387
Updated versions of Chrome should have resolved your issue for mp3 but it seems as though the issue is still a problem with other formats such as AAC.
I'm being forced to use rather large videos within an html 5 video player and I can't seen ti get the buffering to work while playing in Chrome on both a Mac and PC.
The player buffers great in Firefox and Safari, not sure about IE being on a mac.
I'm using the following code in the video tags:
video mp4="http://xeroproject.com/sqwm/wp-content/uploads/2013/04/benefits.mp4" ogg="http://xeroproject.com/sqwm/wp-content/uploads/2013/04/benefits.ogg" webm="http://xeroproject.com/sqwm/wp-content/uploads/2013/04/benefits.webm" poster="http://xeroproject.com/sqwm/wp-content/uploads/2013/04/slide.jpg" preload="none" width="820" height="462" captions="http://xeroproject.com/sqwm/wp-content/uploads/2013/04/intro.srt
And the video player can be viewed here
I've also ready that Chrome's initial preload is only around 2mb as opposed to FF and Safari which are around 10mb, which would explain slower buffer, but the videos get to a point and then just stopp buffering in Chrome and stick.
Any help would be greatly appreciated.
http://screencast.com/t/NKb9erVyd0
I'm using the Projekktor HTML5 video player. The video starts playing immediately in all browsers except for internet explorer. In developer tools IE shows a huge Wait time. What is this wait time and why does IE feel the need to waste 10 seconds of my user's life?
That MP4 has the index at the end of the file so Internet Explorer downloads the entire file before starting playback. I don't know why it does this, but you can run QTIndexSwapper on that MP4 to fix the problem.
http://renaun.com/blog/code/qtindexswapper/