当前位置: 首页 > 工具软件 > Jessibuca > 使用案例 >

jessibucaPlayer 使用教程

彭烨烁
2023-12-01

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

jessibucaPlayer 使用教程

[1].将jessibuca文件搬运到到项目文件中,放入public文件夹下(老项目如没有public放入static文件夹)

示例(index.html):<script src="./jessibuca/index.js"></script>

[2].将jessibucaPlayer文件搬运到到项目文件components文件夹中,并将其作为组件引入到指定页面的容器中

示例:import player from '@/components/jessibucaPlayer/jessibuca.vue'

      <div class="container">
       <player
         :video-url="videoUrl"
         :has-audio="false"
         height="500px"
         :isFullResize="true"
         :background="snapURL"
         :btnimage="playPng"
         />
      </div>

jessibucaPlayer组件部分主要属性

index: { type: Number, default: 0, }, videoUrl: { type: String, default: '', }, error: { type: Function, default: null, }, hasAudio: { type: Boolean, default: false, }, height: { type: String, default: '500px', }, isFullResize: { type: Boolean, default: true, }, autoplay: { type: Boolean, default: false, }, background: { type: String, default: '', }, btnimage: { type: String, default: '', }, btnimageH: { type: String, default: '60px', }, btnimageW: { type: String, default: '60px', },

特殊事项

1.在播放器初始化过程中存在一个配置项decoder: '/jessibuca/index.js',这个地址和index.html中的地址一样是根据你源文件的存放地址来的 如果你的存放地址发生了变化请修改这两个地方的地址路径,否则无法运行。

2.当将播放器循环渲染时可能会出现底部操作栏点击后消失的情况,这时必须为每个播放器加上‘index’属性,并赋予不同值便可解决。

原文地址:jessibucaH.264andH.265: 这是一个兼容国标平台视频流编码 —— H.264以及H.265编码格式的播放器 - Gitee.com

 类似资料: