這篇文章主要介紹了html5用video標(biāo)簽流式加載的實(shí)現(xiàn)，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
站在用戶的角度思考問題，與客戶深入溝通，找到珠山網(wǎng)站設(shè)計(jì)與珠山網(wǎng)站推廣的解決方案，憑借多年的經(jīng)驗(yàn)，讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合，創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品，建站類型包括：成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名注冊(cè)、虛擬空間、企業(yè)郵箱。業(yè)務(wù)覆蓋珠山地區(qū)。
video標(biāo)簽
瀏覽器的video標(biāo)簽通常是接收一個(gè)src屬性，然后瀏覽器就會(huì)根據(jù)這個(gè)src屬性來自動(dòng)加載視頻。
這個(gè)過程是瀏覽器來加載video的。
這種方式有什么問題嗎？
mp4文件不能流式加載
webm，flv，hls等格式兼容性問題
播放器ui太丑，一些常用的功能都沒有
清晰度切換，等一些操作需要重載視頻，比較慢而且還會(huì)黑屏
無法對(duì)視頻加密
請(qǐng)求video流視頻
我們可以通過設(shè)置responseType為arraybuffer來獲取視頻流，也可以通過range字段來獲取視頻流片段。比如
重慶分公司
重慶分公司
let xhr = new window.XMLHttpRequest();
xhr.responseType = 'arraybuffer'
xhr.open('get', 'http://www.w3school.com.cn/i/movie.mp4')
xhr.responseType = 'arraybuffer';
// xhr.setRequestHeader('Range', `bytes=0-390625`)
xhr.onload = function () {
if (xhr.status === 200 || xhr.status === 206) {
console.log(xhr.response)
}
}
xhr.send();或者fetch的arrayBuffer方法返回視頻流。
fetch(videoUrl).then(function(response) {
return response.arrayBuffer();
})獲取到的數(shù)據(jù)是什么呢？二進(jìn)制的視頻流。
獲取這個(gè)有什么用呢？
video去播“流”
MediaSource
MediaSource簡稱mse，是h6的一個(gè)api，它允許通過js生成媒體流，讓瀏覽器播放。
使用
我們通過 URL.createObjectURL來創(chuàng)建一個(gè)blob格式的視頻文件，來給video標(biāo)簽播。
具體用法就是new MediaSource，然后根據(jù)這個(gè)MediaSource生成blob文件，然后向MediaSource中添加mime和視頻流。
