Html5 video 標(biāo)簽 src 用數(shù)據(jù)流方式播放視頻
我要評(píng)論前言
當(dāng)視頻播放過(guò)大，邊看邊加載時(shí)可以用數(shù)據(jù)流方式播放視頻
可以使用 Blob 和 URL.createObjectURL() 方法來(lái)實(shí)現(xiàn)使用數(shù)據(jù)流播放視頻。具體實(shí)現(xiàn)步驟如下：
一、獲取視頻數(shù)據(jù)流 從服務(wù)器獲取視頻數(shù)據(jù)流，可以使用 XMLHttpRequest 或 fetch 方法請(qǐng)求數(shù)據(jù)流并以 Blob 對(duì)象形式返回。
二、創(chuàng)建 URL 對(duì)象 使用 URL.createObjectURL() 方法創(chuàng)建一個(gè) URL 對(duì)象，將 Blob 對(duì)象作為參數(shù)傳入該方法。
三、將 URL 對(duì)象賦值給 video 標(biāo)簽的 src 屬性 將創(chuàng)建的 URL 對(duì)象賦值給 video 標(biāo)簽的 src 屬性即可實(shí)現(xiàn)使用數(shù)據(jù)流播放視頻。 下面是一個(gè)使用數(shù)據(jù)流播放視頻的示例代碼：
<video id="myVideo" width="640" height="360" controls></video>
<script>
// 獲取視頻數(shù)據(jù)流
fetch('video.mp4')
.then(response => response.blob())
.then(blob => {
// 創(chuàng)建 URL 對(duì)象
const videoUrl = URL.createObjectURL(blob);
// 將 URL 對(duì)象賦值給 video 標(biāo)簽的 src 屬性
const myVideo = document.getElementById('myVideo');
myVideo.src = videoUrl;
})
.catch(error => {
console.error('An error occurred:', error);
});
</script>總結(jié)
在上面的代碼中，首先使用 fetch 方法獲取視頻數(shù)據(jù)流并以 Blob 對(duì)象形式返回，然后使用 URL.createObjectURL() 方法創(chuàng)建一個(gè) URL 對(duì)象，將 Blob 對(duì)象作為參數(shù)傳入該方法。最后將創(chuàng)建的 URL 對(duì)象賦值給 video 標(biāo)簽的 src 屬性即可實(shí)現(xiàn)使用數(shù)據(jù)流播放視頻。
到此這篇關(guān)于Html5 video 標(biāo)簽 src 用數(shù)據(jù)流方式播放視頻的文章就介紹到這了,更多相關(guān)Html5 video src播放視頻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
HTML中實(shí)現(xiàn)音樂(lè)或視頻自動(dòng)播放案例詳解
由于期末大作業(yè)我想插入一個(gè)背景音樂(lè)，實(shí)現(xiàn)點(diǎn)開(kāi)網(wǎng)頁(yè)就會(huì)自動(dòng)播放音頻的效果，今天通過(guò)本文給大家分享下我基于HTML實(shí)現(xiàn)音樂(lè)或視頻自動(dòng)播放功能，代碼簡(jiǎn)單易懂，需要的朋友參2022-05-27HTML5 video循環(huán)播放多個(gè)視頻的方法步驟
這篇文章主要介紹了HTML5 video循環(huán)播放多個(gè)視頻的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)2020-08-06html5中嵌入視頻自動(dòng)播放的問(wèn)題解決
這篇文章主要介紹了html5中嵌入視頻自動(dòng)播放的問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起2020-05-25html5自動(dòng)播放mov格式視頻的實(shí)例代碼
這篇文章主要介紹了html5自動(dòng)播放mov格式視頻的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-14
這篇文章主要介紹了HTML5自定義視頻播放器源碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-01-06
目前大多數(shù)網(wǎng)絡(luò)攝像頭都是通過(guò) RTSP 協(xié)議傳輸視頻流的，但是 HTML 并不標(biāo)準(zhǔn)支持 RTSP 流。本文重點(diǎn)給大家介紹HTML5 播放 RTSP 視頻的實(shí)例代碼，需要的朋友參考下吧2019-07-29HTML5 視頻播放(video),JavaScript控制視頻的實(shí)例代碼
這篇文章主要介紹了HTML5 視頻播放(video),JavaScript控制視頻的實(shí)例代碼，需要的朋友參考下吧2018-10-08- 這篇文章主要介紹了HTML5視頻播放插件 video.js介紹 ,需要的朋友可以參考下2018-09-29
- 這里主要研究的是通過(guò)應(yīng)用html5來(lái)解決視頻播放的問(wèn)題。Adobe公司因?yàn)閼?zhàn)略錯(cuò)誤，忽視了移動(dòng)互聯(lián)這塊，移動(dòng)終端對(duì)flash支持并不好，特別是蘋(píng)果終端都不支持flash（蘋(píng)果電腦和2016-11-06
html網(wǎng)頁(yè)播放多個(gè)視頻的幾種方法
本文主要介紹了html網(wǎng)頁(yè)播放多個(gè)視頻的幾種方法，包含iframe標(biāo)簽，VLC插件和一些常見(jiàn)的js插件，具有一定的參考價(jià)值，感興趣的可以了解一下2024-03-04
