廣州商城網(wǎng)站建設(shè)東莞關(guān)鍵詞自動(dòng)排名
MSE的demo實(shí)現(xiàn)思路：首先準(zhǔn)備fmp4格式的視頻地址或者切片，接著將MSE掛載到video上，創(chuàng)建createObjectURL轉(zhuǎn)二進(jìn)制數(shù)據(jù)，fetch請(qǐng)求在線(xiàn)地址，分段請(qǐng)求，監(jiān)聽(tīng)這個(gè)數(shù)據(jù)流的獲取狀態(tài)，當(dāng)這個(gè)ReadyState為open的時(shí)候，?sourceBuffer.appendBuffer(buf)處理接收到的數(shù)據(jù)，否則mediaSource.endOfStream()結(jié)束接收數(shù)據(jù)流。
代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8" />
</head><body><video controls></video><script>var video=document.querySelector('video');// 視頻 URL 隊(duì)列（按順序播放）var assetURLs=[....];// 當(dāng)前播放的 URL 索引var currentIndex=0;// MIME 類(lèi)型var mimeCodec='video/mp4; codecs="avc1.42E01E, mp4a.40.2"';if('MediaSource' in window&&MediaSource.isTypeSupported(mimeCodec)) {var mediaSource=new MediaSource();video.src=URL.createObjectURL(mediaSource);mediaSource.addEventListener('sourceopen',sourceOpen);} else {console.error('Unsupported MIME type or codec: ',mimeCodec);}function sourceOpen (_) {var mediaSource=this;var sourceBuffer=mediaSource.addSourceBuffer(mimeCodec);function loadNextVideo () {if(currentIndex>=assetURLs.length) {console.log('All videos played.');return;}var assetURL=assetURLs[currentIndex];fetchAB(assetURL,function(buf) {sourceBuffer.addEventListener('updateend',function updateEndHandler (_) {sourceBuffer.removeEventListener('updateend',updateEndHandler);currentIndex++;if(currentIndex<assetURLs.length) {mediaSource.removeSourceBuffer(sourceBuffer); // 清空 SourceBuffermediaSource.endOfStream();loadNextVideo(); // 加載下一個(gè)視頻} else {mediaSource.endOfStream();console.log('All videos loaded.');}video.play();});sourceBuffer.appendBuffer(buf);});}loadNextVideo();}function fetchAB (url,cb) {console.log(url);var xhr=new XMLHttpRequest();xhr.open('get',url);xhr.responseType='arraybuffer';xhr.onload=function() {cb(xhr.response);};xhr.send();}</script>
</body></html>