Html5 video 标签 src 用数据流方式播放视频
发布时间：2023-09-27 17:08:59 作者：zby18638890018 
我要评论
我要评论HTML5中的video标签用于播放视频文件的，本文介绍了Html5 video 标签 src 用数据流方式播放视频，具有一定的参考价值，感兴趣的可以了解一下
前言
当视频播放过大，边看边加载时可以用数据流方式播放视频
可以使用 Blob 和 URL.createObjectURL() 方法来实现使用数据流播放视频。具体实现步骤如下：
一、获取视频数据流 从服务器获取视频数据流，可以使用 XMLHttpRequest 或 fetch 方法请求数据流并以 Blob 对象形式返回。
二、创建 URL 对象 使用 URL.createObjectURL() 方法创建一个 URL 对象，将 Blob 对象作为参数传入该方法。
三、将 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播放视频内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
由于期末大作业我想插入一个背景音乐，实现点开网页就会自动播放音频的效果，今天通过本文给大家分享下我基于HTML实现音乐或视频自动播放功能，代码简单易懂，需要的朋友参2022-05-27- 这篇文章主要介绍了HTML5 video循环播放多个视频的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来2020-08-06
- 这篇文章主要介绍了html5中嵌入视频自动播放的问题解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起2020-05-25
- 这篇文章主要介绍了html5自动播放mov格式视频的实例代码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-14
这篇文章主要介绍了HTML5自定义视频播放器源码,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2020-01-06
目前大多数网络摄像头都是通过 RTSP 协议传输视频流的，但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码，需要的朋友参考下吧2019-07-29HTML5 视频播放(video),JavaScript控制视频的实例代码
这篇文章主要介绍了HTML5 视频播放(video),JavaScript控制视频的实例代码，需要的朋友参考下吧2018-10-08- 这篇文章主要介绍了HTML5视频播放插件 video.js介绍 ,需要的朋友可以参考下2018-09-29
- 这里主要研究的是通过应用html5来解决视频播放的问题。Adobe公司因为战略错误，忽视了移动互联这块，移动终端对flash支持并不好，特别是苹果终端都不支持flash（苹果电脑和2016-11-06
本文主要介绍了html网页播放多个视频的几种方法，包含iframe标签，VLC插件和一些常见的js插件，具有一定的参考价值，感兴趣的可以了解一下2024-03-04
最新评论