前言:Jessibuca 是一款開源的純 H5 直播流播放器,通過 Emscripten 將音視頻解碼庫(kù)編譯成 Js(ams.js/wasm) 運(yùn)行于瀏覽器之中。兼容幾乎所有瀏覽器,可以運(yùn)行在 PC、手機(jī)、微信中,無需額外安裝插件
附上中文文檔:http://jessibuca.monibuca.com/player.html
使用步驟:
1.安裝(這個(gè)插件會(huì)自動(dòng)在html插入index標(biāo)簽,所以可以在代碼中直接全局使用jessibuca變量,無需引入)??
npm install vue-cli-plugin-jessibuca -D
# use yarn
yarn add vue-cli-plugin-jessibuca -D
2.去官網(wǎng)找到這三個(gè)文件,要是最新的,不然可能會(huì)報(bào)錯(cuò)(點(diǎn)擊最新源碼,它會(huì)自動(dòng)下載壓縮包,我們只需要找到這三個(gè)文件把他們放到我們項(xiàng)目的public下面即可使用)
3.具體使用(具體的參數(shù)配置還是要根據(jù)項(xiàng)目的需求看文檔,我這里只做最簡(jiǎn)單的視頻播放)文章來源:http://www.zghlxwxcb.cn/news/detail-535289.html
// 初始化視頻函數(shù)
function init() {
if (jessibuca) {
jessibuca = new Jessibuca({
container: document.getElementById("container"),//jessibuca需要容器
videoBuffer: 0.2, // 緩存時(shí)長(zhǎng)
isResize: false,
loadingText: "瘋狂加載中...",
useMSE: true,
useWCS: true,
debug: true,
background: "@/assets/icons/svg/no-video.svg",
supportDblclickFullscreen: true,
showBandwidth: true, // 顯示網(wǎng)速
operateBtns: {
fullscreen: true,
screenshot: true,
play: true,
audio: true,
},
forceNoOffscreen: true,
isNotMute: false,
timeout: 10,
});
}
}
4.到這里基本就快完成啦? 最后就是播放?文章來源地址http://www.zghlxwxcb.cn/news/detail-535289.html
//調(diào)用初始化函數(shù)
init();
//記得寫播放的代碼哦
jessibuca.play(視頻地址 + "&&&.flv");//視頻地址后面需要加上&&&.flv后綴,不然播放不出來哦
到了這里,關(guān)于記錄一次vue使用jessibuca的視頻插件的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!