React中Mpegts播放器的使用

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

随着互联网的不断发展，视频的格式也越来越多，视频格式兼容问题也随之出现，这篇文章主要对mpegts.js播放flv和ts视频格式进行简单使用。

---

一、mpegts.js是什么？

mpegts.js 是在 HTML5 上直接播放 MPEG2-TS 流的播放器，针对低延迟直播优化，可用于 DVB/ISDB 数字电视流或监控摄像头等的低延迟回。mpegts.js 基于 flv.js 改造而来。

二、使用步骤

1.引入库

使用npm install --save mpegts.js安装mpegts.js 包
在项目中引入mpegts.js

import Mpegts from 'mpegts.js';

2.创建Mpegts播放器

1.定义播放器容器

在render函数中定义播放器容器

render() {
    
    
    return (
      <video id="videoElement"></video>
    );
  }

2.在容器里创建播放器

if (mpegts.getFeatureList().mseLivePlayback) {
    
    
        var videoElement = document.getElementById('videoElement');
        var player = mpegts.createPlayer({
    
    
            type: 'mse',  // 可以是flv ts格式
            isLive: true,
            hasAudio: false,//chrome似乎不支持
            url: ''//url
        });
        player.attachMediaElement(videoElement);
        player.load();
        setTimeout(() => {
    
    //进行异步处理
        this.player.play()
      },0);
    }

---

总结

Mpegts播放器对资源的加载比较慢