EasyPlayer.js在iOS上如何做低延时直播?FLV(wasm) or WebRTC

最近连续收到客户的几个需求,要求在微信这样的直播分享页面上,能以低延时的方式播放实时视频,我们满以为这是个简单的需求,直到客户用到iPhone来测试的时候发现,iPhone只能播放HLS和WebRTC,而当视频编码格式为H.265的时候,WebRTC就失去用武之地了,HLS流的延时一如既往的大;

之前也有不少做HLS低延时直播的方法,比如减少单个切片的时长duration,减少list个数,等等,这些都跟我们的全终端适配,以及服务端录像,不能完全统一,所以,HLS低延时是特性功能,不能用于共性功能;

于是,我们只能在FLV流上做文章,WS-FLV和HTTP-FLV在Android系统上目前都得到了非常好的应用,播放既实时又稳定,而FLV在iOS上是妥妥的无法播放的;

那么,摆在我们面前的就一个方案,FLV流在iOS上的播放问题;

就跟我们做EasyPlayer.js的实时录像一样,我们又将目光转向了wasm(WebAssembly),既然FLV在iOS上用MSE无法播放,那么我们可以采用wasm的方式(其实就是视频流自己解析、自己解码、自己显示),这种就可以在iOS上也能完全可控,而且实时性强!

### 如何在 Vue 项目中集成和使用 EasyPlayer.js 播放器 #### 准备工作 确保安装了必要的开发环境,包括 Node.js 和 npm 或 yarn。创建一个新的 Vue 3.x 项目或者在一个现有的项目里操作。 #### 安装依赖库 通过命令行工具进入项目的根目录并执行如下命令来下载所需资源: ```bash npm install easyplayer.js --save ``` 如果采用手动方式引入,则按照说明[^3]找到 `EasyPlayer-element.min.js` 及 `EasyPlayer.wasm` 文件并将它们放置于项目静态资源文件夹内(通常是 public 文件夹),以便后续引用。 #### 修改 HTML 结构 编辑组件模板部分,在适当位置加入播放容器标签,如下面所示[^4]: ```html <div id="Player" class="video-js vjs-default-skin vjs-big-play-centered w100"></div> ``` 此 div 将作为视频播放区域的占位符。 #### 初始化播放实例 接下来是在 JavaScript 中初始化播放器对象的部分。可以在 mounted 生命周期钩子函数里面完成这一步骤: ```javascript import { onMounted } from 'vue'; // 如果是通过 CDN 方式加载则不需要 import 这一行 export default { setup() { let player; onMounted(() => { const options = { autoplay: false, controls: true, sources: [{ src: "your_video_url_here", // 替换成实际 URL 地址 type: "application/x-mpegURL" }] }; player = new window.EasyPlayer(options); document.getElementById('Player').appendChild(player.getContainer()); }); return {}; } } ``` 这段代码会在页面加载完成后自动运行,并利用传入配置项创建一个新播放器实例附加到指定 DOM 节点上。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值