i've been running issues safari , <video> element in combination shorter high-quality videos. showcase website i'm loading 12-15 second .mp4 , .webm files <video> container using <source> element. when trying play video in chrome works flawlessly , video start playing instantaneously, safari appears want load video before starting playback.
i have looked loading video directly through src attribute of <video> , have added preload="auto" attribute in attempt force immediate playback.
i've set example using 1 of videos use on websites, around 8 mb , 12 seconds long: https://jsfiddle.net/n1eac46v/
var video = document.getelementbyid('video'); var source = document.createelement('source'); source.src = "foo.mp4"; source.type = "video/mp4"; video.appendchild(source); video.on("canplay canplaythrough", video.play); as can see i'm listening canplay , canplaythrough events, doesn't appear help. i've been looking on place days on end running out of options now.
i not os x user have no experience safari, i've had chance debug mp4 playback in chrome. chrome has buffering window tries fill until begins actual playback. safari may have bigger window. since in normal cases tables contain sample positions, durations etc. @ end of file browser may want read them begin playback. smart browser can dispatch read byte range header end of file , seek actual video data, again have no idea safari does.
what can try use mp4box on video files move meta data , tables beginning, help.
as mentioned op in comments using ffmpeg -movflags faststart (see ffmpeg mp4 options) can used achieve this.
Comments
Post a Comment