js修改video的source_利用 javascript MediaSource 将 HTML video标签的src转成加载blob

最新推荐文章于 2024-06-14 09:30:36 发布
最新推荐文章于 2024-06-14 09:30:36 发布
阅读量1.5k 收藏 2
点赞数
文章标签： js修改video的source
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_39929377/article/details/111846224
版权
本文介绍了如何使用JavaScript的MediaSource Extensions (MSE)将HTML5 video标签的src转换为加载Blob资源。通过创建MediaSource对象，设置合适的MIME类型，并监听'sourceopen'事件，然后使用fetch获取视频数据并追加到SourceBuffer中，最后播放视频。此外，还提供了一个相关的DEMO源代码供参考。
摘要由CSDN通过智能技术生成

目前很多视频网站都是采用video标签形式，src是blob://http开头,效果如下

实现方式，用用H5的MediaSource方法

blob

var video = document.querySelector('video');

var assetURL = 'https://adtuu-blog.oss-cn-shenzhen.aliyuncs.com/v0-new.mp4';

// Need to be specific for Blink regarding codecs

// ./mp4info frag_bunny.mp4 | grep Codec

// video/mp4; codecs="avc1.42E01E, mp4a.40.2

//var mimeCodec = 'video/webm;codecs="vorbis,vp8"';

var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

if('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {

var mediaSource = new MediaSource();

video.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', sourceOpen);

} else {

最低0.47元/天 解锁文章
weixin_39929377
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript-videostream
05-18
为了实现视频流，可能还会使用到`src`属性的`blob:`或`mediaSource:` URL，以支持流式媒体内容。 在压缩包子文件的文件名称列表中，“javascript-videostream-master”可能表示这是项目的主分支或源代码库，通常...
MSE（Media Source Extensions）的一点尝试
前端原创分享，常年坚持记录和分享，全网阅读量超百万
09-05 8991
最近对于blob这个东西真的是很感兴趣，图片可以是blob协议，视频可以是blob协议，直播也可以是blob协议，感觉很厉害啊。与之紧密联系的MSE（Media Source Extensions）这个概念。研究一波。 Media Source Extensions 允许JavaScript动态地为<audio>和<video&am
Javascrit中使用MediaSource播放加密视频
細水、長流√的专栏
11-04 3157
Javascrit中使用MediaSource播放加密视频
探秘每月最佳的JavaScript开源项目：javascript-open-source
最新发布
gitblog_00017的博客
06-14 334
探秘每月最佳的JavaScript开源项目：javascript-open-source 项目地址:https://gitcode.com/Mybridge/javascript-open-source 在这个日新月异的编程世界中，JavaScript一直以其强大的生命力和创新能力引领着前端开发的潮流。为了帮助开发者们紧跟技术的步伐，我们为您精心挑选了javascript-open-source这...
别想盗我视频之——blob加密+mediaSource防止用户下载视频
liv空间站
12-28 4100
文章目录前言一、blob二、mediaSource三、后台处理四、代码展示1、后台代码2、前台代码1.无插件，纯H5htmljs2. 开源播放器插件htmljs相关报错 前言 公司做的都是些企业官网，后台管理系统，忽然让做个视频播放功能，需求禁止用户下载视频，我有点方。作为一个前端，看一些视频的时候，会首先看video标签的地址是不是能打开并下载的，但是大部分的视频都是ts文件流传回来的，这样又可以防止下载，又可以随时切换清晰度，很高级，但是我们不用这种方法，因为太高级了，今天我们来用blob加密来处理，
videojs动态设置sources
夏末、阳光依然耀眼...˜˜羽悠﹏ˇ⊙ˇ
11-23 4070
var player; $(document).ready(function() { player = videojs('my_video_1', { techOrder: ['flash', 'html5'], autoplay: true, sources: [{ type: "video/flv", src: "http://www.longtailvideo...
js实现一个video标签播放不同的视频
qq_45268602的博客
03-28 4147
在学习html的时候，我们知道，使用video元素提供了播放、暂停和音量控件来控制视频，这里就不展开讨论。 我们今天主要了解的是，如何使用js来实现一个video元素播放不同的视频。话不多说，看代码： <body> <video id="myvideo" width="300" height="auto" controls="controls" muted="m...
前端进行src地址blob处理
qq_39126593的博客
12-10 2911
前端进行src地址blob加密处理 这里我用的axios； async getBlob(url) { //发送请求 //return 返回axios 的请求值 return axios.get(url, { responseType: 'blob' }) .then(response => { if (response.status == 200) { //请求成功 let blob = response.data; //将加密地址
nginx-1.10.2_海康；javascript_nginx/1.10.2_nginx转发海康_
09-28
通常，我们会使用如HTML5的`<video>`标签结合MediaSource Extensions (MSE)和HLS或RTSP流来显示视频。JavaScript可以处理流媒体的播放、暂停、切换摄像头等操作，也可以实现动态加载和错误处理。 例如，你可以使用`...
如何在JavaScript中按块读取输入字节数组
04-04
videoElement.src = URL.createObjectURL(mediaSource); mediaSource.addEventListener('sourceopen', () => { const sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.640028"'); // 指定...
HTML5录制视频
02-24
<source src="movie.mp4" type="video/mp4"> Your browser does not support the video tag. </video> ``` 二、HTML5 Media Capture API HTML5的Media Capture API允许用户直接从设备摄像头和麦克风捕获音视频...
reactnative的视频组件Video
08-08
在React Native框架中，`<Video />`组件是用于实现视频播放的核心工具，它是由`react-native-video`库提供的。这个库使得JavaScript开发者能够轻松地在iOS和Android原生应用中集成视频播放功能，无需深入学习原生...
html video src blob,Video.js - 使用createObjectURL创建blob（本地文件@客户端）
weixin_31838473的博客
06-17 1155
我想在本地播放视频(无需将其上传到服务器)。 我能做到这一点的纯JavaScript和HTML5，像这样：Video.js - 使用createObjectURL创建blob(本地文件@客户端)HTML：JavaScript的使用jQuery：var $video = $('#video1');$video.prop('src', URL.createObjectURL($('#fileInput...
src转换成base64，src转换成Blob，base64转换为file文件流
ccsundhine的博客
08-02 1245
代码】图片链接转base64。
HTML5 Video Blob
weixin_34088838的博客
01-31 1456
我的博客搬家到https://www.w2le.com/了 <video src="blob:http://www.bilibili.com/d0823f0f-2b2a-4fd6-a93a-e4c82173c107"></video> var video = document.querySelector('video'); var mediaSource = ne...
js下载文件、音频、视频的方式
lavendersue的博客
12-15 4469
下载文件可以直接通过a标签的href属性直接下载，也可以通过Blob对象转换为文件流进行下载。如果要对大数据量或者需要分片下载、上传等操作，可以考虑Blob对象。同事Blob对象可以对下载过程进行额外操作（拦截等操作），这是a标签直接下载做不到的。 1、a标签下载文件 const downloadFileA = document.createElement('a') document.body.append(downloadFileA) downloadFileA.href=`https://xxx` do
js 取video 标签的source属性
weixin_30501857的博客
02-22 4203
<script>function loadAnotherVideo(){ var video = document.getElementsByTagName('video')[0]; var sources = video.getElementsByTagName('source'); sources[0].src ='video2.mp4'; sources[...
videojs vue 动态source_手把手教你搭建 Vue 服务端渲染项目
weixin_39771614的博客
11-21 836
建议先阅读官方指南——Vue.js 服务器端渲染指南，再回到本文开始阅读。本文将分成以下两部分：简述 Vue SSR 过程从零开始搭建 SSR 项目好了，下面开始正文。简述 Vue SSR 过程客户端渲染过程访问客户端渲染的网站。服务器返回一个包含了引入资源语句和 <div id="app"></div> 的 HTML 文件。客户端通过 HTTP 向服务器请求资源，当必要的...
解决video动态切换src视频不改变问题
热门推荐
Z_0926的博客
09-24 1万+
解决video动态切换src视频不改变 1、问题： 在react项目中，有个需求是要动态的改变video中的视频，但是通过查看，video标签中的src已经更新但是视频还是原来的视频，并未更新。 2、百度产生原因： 当 video 中存在 source 标签的时候，浏览器渲染之后会自动去获取地址，即便地址改变，浏览器也不会再去获取地址。 3、有效的解决方案： 1、不使用source标签，直接在video中使用src，动态切换这里面的src <video src={'http://' + item.vi
video标签加blob vue
09-09
你可以使用URL.createObjectURL方法创建一个blob URL，并将其赋值给video标签的src属性。具体操作如下： 首先，你需要在Vue组件中引入video标签和相关的方法和属性。你可以在组件的模板中添加以下代码： ```html ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值