React中Jessibuca播放器的使用

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

---

前言

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

---

一、Jessibuca.js是什么？

Jessibuca是一款开源的纯H5直播流播放器，通过Emscripten将音视频解码库编译成Js（ams.js/wasm)运行于浏览器之中。兼容几乎所有浏览器，可以运行在PC、手机、微信中，无需额外安装插件。

二、使用步骤

1.引入库

因为Jessibuca不能使用npm导入，所以我们在官网的demo中找到react的demo,进入GitHub网页，下载jessibuca.js和decoder.js包，将包在index.html中进行全局导入

 <script 
 type="text/javascript" 
 src="%PUBLIC_URL%/jessibuca/jessibuca.js">
 </script>

2.创建播放器容器

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

render() {
    return (
        <div style={myStyles} id='container'></div>
    );
  }

3.创建Jessibuca播放器

代码如下：

create() {//创建jessibuca播放器
  // var showOperateBtns = true; // 是否显示按钮
  // var forceNoOffscreen = true; //
  let $container = document.getElementById('container');//容器
  this.jessibuca = new window.Jessibuca({
      container: $container,//播放器容器
      videoBuffer: 0.2, // 缓存时长
      isResize: false, //适应浏览器
      isFlv: true,
      text: "",
      loadingText: "加载中....",
      decoder: "/jessibuca/decoder.js",//必须与引入jessibuca.js在同一个文件夹
      useMSE: false,
      debug: false,
      hasAudio:false,//是否开启声音，谷歌不支持开启声音，
      useWCS:false,
      //showBandwidth: true, // 显示网速
      operateBtns: {//配置按钮
          //fullscreen: true,
          // screenshot: showOperateBtns,
          // play: showOperateBtns,
          // audio: showOperateBtns,
          // recorder: showOperateBtns
      },
      //forceNoOffscreen: true,//离屏渲染
      isNotMute: false,//是否开启声音
  });
    this.jessibuca.play(”url“).then(() => {//播放,在url处填写url
    console.log('play success')
  }).catch((e) => {
    console.log('play error', e)
  })
}

4.Jessibuca播放

componentDidMount() {
this.create();//挂载
}

---

总结

Jessibuca播放器只能播放flv格式的视频，decoder配置项的路径必须与jessibuca.js放在同一个目录下。