javascript - Local HTML5 video playback with MP4/WebM Blob chunks -
i'm looking way play relatively large (up 500mb) mp4/webm means of html5 video. complication video isn't available url or file sequence of blob
s.
the app oriented @ desktop (chrome) , mobile (android/ios webview) offline usage. there's no ability stream video locally, i'm counting entirely on client-side js (no native platform extensions).
the video stored in resource container (storage implementation out of scope of question) , can't loaded @ once because of size, can retrieved , buffered several blob
chunks.
it more convenient read chunks unparted mp4/webm instead of splitting it, guess approach requires local streaming server.
it possible split video smaller clips (~10mb) beforehand if necessary, should played seamlessly.
an approach i've tried looks that
var player = document.queryselector('video'); getblob('webm-chunk1') .then(function (chunk1) { var url = url.createobjecturl(chunk1); player.src = url; player.play(); return getblob('webm-chunk2'); }) .then(function (chunk2) { var url = url.createobjecturl(chunk2); player.addeventlistener('ended', handler, false); function handler() { player.removeeventlistener('ended', handler); player.src = url; player.load(); player.play(); } });
here a plunker demonstrates it, works in chrome. there problem seamless playback, gap between 2 chunks noticeable. if there 2 <video>
switched on ended
event, ~100ms gap still there.
how can sequence of progressively loading blob
s played seamless html5 video?
Comments
Post a Comment