欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Html5 video 標(biāo)簽 src 用數(shù)據(jù)流方式播放視頻

  發(fā)布時(shí)間：2023-09-27 17:08:59   作者：zby18638890018   我要評(píng)論
HTML5中的video標(biāo)簽用于播放視頻文件的，本文介紹了Html5 video 標(biāo)簽 src 用數(shù)據(jù)流方式播放視頻，具有一定的參考價(jià)值，感興趣的可以了解一下

前言

當(dāng)視頻播放過大，邊看邊加載時(shí)可以用數(shù)據(jù)流方式播放視頻

可以使用 Blob 和 URL.createObjectURL() 方法來實(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)音樂或視頻自動(dòng)播放案例詳解

    由于期末大作業(yè)我想插入一個(gè)背景音樂，實(shí)現(xiàn)點(diǎn)開網(wǎng)頁就會(huì)自動(dòng)播放音頻的效果，今天通過本文給大家分享下我基于HTML實(shí)現(xiàn)音樂或視頻自動(dòng)播放功能，代碼簡單易懂，需要的朋友參
    2022-05-27

  • HTML5 video循環(huán)播放多個(gè)視頻的方法步驟

    這篇文章主要介紹了HTML5 video循環(huán)播放多個(gè)視頻的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來
    2020-08-06

  • html5中嵌入視頻自動(dòng)播放的問題解決

    這篇文章主要介紹了html5中嵌入視頻自動(dòng)播放的問題解決，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起
    2020-05-25

  • html5自動(dòng)播放mov格式視頻的實(shí)例代碼

    這篇文章主要介紹了html5自動(dòng)播放mov格式視頻的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-01-14

  • HTML5自定義視頻播放器源碼

    這篇文章主要介紹了HTML5自定義視頻播放器源碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
    2020-01-06

  • HTML5 播放 RTSP 視頻的實(shí)例代碼

    目前大多數(shù)網(wǎng)絡(luò)攝像頭都是通過 RTSP 協(xié)議傳輸視頻流的，但是 HTML 并不標(biāo)準(zhǔn)支持 RTSP 流。本文重點(diǎn)給大家介紹HTML5 播放 RTSP 視頻的實(shí)例代碼，需要的朋友參考下吧
    2019-07-29

  • HTML5 視頻播放(video),JavaScript控制視頻的實(shí)例代碼

    這篇文章主要介紹了HTML5 視頻播放(video),JavaScript控制視頻的實(shí)例代碼，需要的朋友參考下吧
    2018-10-08

  • HTML5視頻播放插件 video.js介紹

    這篇文章主要介紹了HTML5視頻播放插件 video.js介紹 ,需要的朋友可以參考下
    2018-09-29

  • html5 視頻播放解決方案

    這里主要研究的是通過應(yīng)用html5來解決視頻播放的問題。Adobe公司因?yàn)閼?zhàn)略錯(cuò)誤，忽視了移動(dòng)互聯(lián)這塊，移動(dòng)終端對(duì)flash支持并不好，特別是蘋果終端都不支持flash（蘋果電腦和
    2016-11-06

  • html網(wǎng)頁播放多個(gè)視頻的幾種方法

    本文主要介紹了html網(wǎng)頁播放多個(gè)視頻的幾種方法，包含iframe標(biāo)簽，VLC插件和一些常見的js插件，具有一定的參考價(jià)值，感興趣的可以了解一下
    2024-03-04

最新評(píng)論