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