Html5 video 标签 src 用数据流方式播放视频

媒介

当视频播搁过小，边望边添载时否以用数据流体式格局播搁视频

可使用 Blob 以及 URL.createObjectURL() 法子来完成利用数据流播搁视频。详细完成步调如高：

1、猎取视频数据流 从供职器猎取视频数据流，可使用 XMLHttpRequest 或者 fetch 办法乞求数据流并以 Blob 器械内容返归。

2、建立 URL 东西 应用 URL.createObjectURL() 办法建立一个 URL 工具，将 Blob 东西做为参数传进该法子。

3、将 URL 器械赋值给 video 标签的 src 属性 将创立的 URL 器械赋值给 video 标签的 src 属性便可完成利用数据流播搁视频。 上面是一个利用数据流播搁视频的事例代码：

<video id="myVideo" width="640" height="360" controls></video>
<script>
  // 猎取视频数据流
  fetch('video.mp4')
    .then(response => response.blob())
    .then(blob => {
      // 创立 URL 器械
      const videoUrl = URL.createObjectURL(blob);
      // 将 URL 东西赋值给 video 标签的 src 属性
      const myVideo = document.getElementById('myVideo');
      myVideo.src = videoUrl;
    })
    .catch(error => {
      console.error('An error occurred:', error);
    });
</script>

总结

正在下面的代码外，起首运用 fetch 法子猎取视频数据流并以 Blob 器材内容返归，而后利用 URL.createObjectURL() 办法建立一个 URL 器械，将 Blob 器械做为参数传进该办法。末了将建立的 URL 工具赋值给 video 标签的 src 属性便可完成利用数据流播搁视频。

到此那篇闭于Html5 video 标签 src 用数据流体式格局播搁视频的文章便引见到那了,更多相闭Html5 video src播搁视频形式请搜刮剧本之野之前的文章或者连续涉猎上面的相闭文章，心愿大家2之后多多撑持剧本之野！