当前位置: 首页 > article >正文

MSE学习

MSE简介

媒体源拓展(Media Source Extensions,简称 MSE)是一个由 W3C 制定的标准,它允许 JavaScript 代码通过 AJAX 请求获取媒体数据,并将其提供给 HTML 的 <video> 或 <audio> 元素进行播放。

MSE特点

  1. 动态加载媒体:MSE 支持在网页中动态加载和播放音视频内容,而无需将整个文件下载到浏览器。
  2. 自定义播放逻辑:开发者可以使用 MSE 实现自定义的流媒体协议、DRM(数字版权管理)、广告插入等功能。
  3. 分段传输:媒体文件可以被分割成多个小片段依次加载,从而实现边下载边播放的效果。
  4. 跨平台兼容性:现代主流浏览器如 Chrome、Firefox、Safari 等都支持 MSE。

案例

在使用 MSE 时,通常会结合 MediaSource 和 SourceBuffer API 来操作

// 创建 MediaSource 对象
let mediaSource = new MediaSource();
let videoElement = document.querySelector('video');

// 将 MediaSource 对象绑定到 <video> 元素
videoElement.src = URL.createObjectURL(mediaSource);

mediaSource.addEventListener('sourceopen', () => {
    // 当 MediaSource 准备好后,创建 SourceBuffer 并添加媒体数据
    let sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.64001e, mp4a.40.2"');
    
    fetch('/path/to/video.mp4')
        .then(response => response.arrayBuffer())
        .then(data => {
            sourceBuffer.appendBuffer(data);
            // 播放完成后关闭 SourceBuffer
            mediaSource.endOfStream();
        })
        .catch(error => console.error('Error:', error));
});

追更

更多学习资源

Streaming media on demand with Media Source Extensions - Mozilla Hacks - the Web developer blog

Blob - Web APIs | MDN

https://www.w3.org/TR/media-source/#addsourcebuffer-method


http://www.kler.cn/a/473525.html

相关文章:

  • JS进阶--JS听到了不灭的回响
  • xxl-job回调执行器,发生NPE空指针异常
  • uniapp实现后端数据i18n国际化
  • 【Vue】:解决动态更新 <video> 标签 src 属性后视频未刷新的问题
  • Ubuntu中使用miniconda安装R和R包devtools
  • HTML 迷宫游戏
  • 【Vue】:解决动态更新 <video> 标签 src 属性后视频未刷新的问题
  • Google Chrome 去除更新 Windows
  • Unity 热更新基础知识
  • vue-整合校验validator demo
  • 79 Openssl3.0 RSA公钥加密数据
  • Fastapi + vue3 自动化测试平台(2)--日志中间件
  • WordPress Crypto插件前台任意用户登录漏洞复现(CVE-2024-9989)(附脚本)
  • 学习第六十二行
  • <论文>什么是胶囊神经网络?
  • 使用java springboot 使用 Redis 作为限流工具
  • 使用 SQL 和表格数据进行问答和 RAG(7)—将表格数据(CSV 或 Excel 文件)加载到向量数据库(ChromaDB)中
  • MySql---进阶篇(十一)----游标,条件处理程序,存储函数
  • Bash语言的计算机基础
  • 【优选算法】Binary-Blade:二分查找的算法刃(下)
  • 一款FPGA芯片开发的核心板(EP4CE6核心板)
  • WebRTC 的优缺点详细解析
  • 怎麼在iPhone iOS(Wi-Fi/蜂窩數據)上查找IP地址?
  • vue js实现时钟以及刻度效果
  • HTML5 波动动画(Pulse Animation)详解
  • 微信小程序中使用weui组件库