Vue2中easyplayer的使用教程詳解
更新時(shí)間：2023年08月11日 15:19:36 作者：會(huì)說(shuō)法語(yǔ)的豬
EasyPlayer.js是集播放http-flv,?hls,?websocket?于一身的H5視頻直播/視頻點(diǎn)播播放器,?使用簡(jiǎn)單,?功能強(qiáng)大，下面大家就跟隨小編一起學(xué)習(xí)一下它的具體使用吧
說(shuō)一下easyplayer在vue2中的使用，vue3中沒(méi)測(cè)試，估計(jì)應(yīng)該差不多，大家可自行驗(yàn)證。
安裝：
pnpm i @easydarwin/easyplayer
組件封裝
習(xí)慣性將其封裝為單獨(dú)的組件
<template>
<div class="EasyPlayer">
<easy-player
style="width: 100%;height: 100%;"
@error="restartPlayer"
@ended="restartPlayer"
@play="videoPlay"
ref="EasyPlayerRef"
:videoUrl="url"
:aspect="aspect"
:showEnterprise="false"
:show-custom-button="false"
:alt="alt"
:autoplay="autoplay"
:loop="loop"
:muted="muted"
fluent
stretch
>
</easy-player>
</div>
</template>
<script>
import EasyPlayer from '@easydarwin/easyplayer'
export default {
data() {
return {
timer: null
}
},
components: { EasyPlayer },
props: {
url: {
type: String,
default: ''
},
aspect: {
type: String,
default: '16:9'
},
alt: {
type: String,
default: '無(wú)信號(hào)'
},
autoplay: {
type: Boolean,
default: true
},
loop: {
type: Boolean,
default: true
},
muted: {
type: Boolean,
default: true
}
},
destroyed() {
if(this.timer) {
clearInterval(this.timer)
this.timer = null
}
},
methods: {
restartPlayer(e) {
console.log(e,'播放異?；虿シ沤Y(jié)束或直播斷流------->>>>>>>>>')
this.$refs.EasyPlayerRef.initPlayer() //初始化播放器
this.$emit('pullFlow')
this.timer = setInterval(() => {
this.$refs.EasyPlayerRef.initPlayer() //初始化播放器
this.$emit('pullFlow')
}, 3000)
},
// 播放事件
videoPlay(a) {
// console.log(a,'視頻播放------>>')
if(this.timer) {
clearInterval(this.timer)
this.timer = null
}
},
},
}
</script>
<style scoped>
.EasyPlayer {
width: 100%;
height: 100%;
}
/* 阻止單擊雙擊視頻全屏或者跳轉(zhuǎn)官網(wǎng) */
/* /deep/ .vjs-tech {
pointer-events: none!important;
} */
/* /deep/ .video-js.vjs-fullscreen::backdrop,:not(:root):fullscreen::backdrop {
position: fixed!important;
top: 0!important;
left: 0!important;
width: 50%!important;
height: 50%!important;
right: 50%!important;
bottom: 50%!important;
background-color: transparent!important;
}
/deep/ .video-js.vjs-fullscreen .vjs-tech {
position: absolute;
top: 50%;
left: 50%;
width: 50%!important;
height: 50%!important;
transform: translateX(-50%)!important;
}
/deep/ .video-js {
background-color: transparent!important;
} */
</style>引入使用
<template>
<div class="container">
<div class="easy-player">
<EasyPlayer
:url="playerUrl"
@pullFlow="pullFlow"
/>
</div>
</div>
</template>
<script>
import EasyPlayer from './EasyPlayer/index.vue'
export default {
data() {
return {
playerUrl: 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
}
},
components: { EasyPlayer },
methods:{
// 播放異常 重新拉流
pullFlow() {
// .....
}
},
}
</script>
<style scoped>
.container {
width: 100%;
height: 100%;
padding: 100px 0 0 100px;
box-sizing: border-box;
}
.easy-player {
width: 450px;
height: 300px;
border: 1px solid red;
}
</style>報(bào)錯(cuò)處理
會(huì)發(fā)現(xiàn)控制臺(tái)有下面報(bào)錯(cuò)
看到報(bào)錯(cuò)不要慌，大家跟著我處理
首先我們安裝個(gè)插件(注意：不要大于6.0版本的，不然會(huì)有bug ，還會(huì)有亂七八槽的報(bào)錯(cuò))：
pnpm add copy-webpack-plugin@5.1.2 --save-dev
然后在vue.config.js中：
const { defineConfig } = require("@vue/cli-service");
const CopyWebpackPlugin = require('copy-webpack-plugin')
module.exports = defineConfig({
// easy-player 相關(guān)
configureWebpack: {
plugins: [
new CopyWebpackPlugin([
{
from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.swf',
to: './libs/EasyPlayer/'
},
{
from: 'node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml',
to: './libs/EasyPlayer/'
},
{
from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js',
to: './libs/EasyPlayer/'
}
])
]
},
transpileDependencies: true,
lintOnSave: false,
productionSourceMap: false
});配置上之后還沒(méi)完，還需要在public/index.html 引入EasyPlayer-element.min.js，可以直接在node_modules里找到@easydarwin/easyplayer下的dist/element/EasyPlayer-element.min.js復(fù)制到pubilc目錄下,還有需要EasyPlayer.wasm同樣放到public目錄下如下所示：
然后在public/index.html下再引入即可
<script src="/lib/EasyPlayer-element.min.js"></script>
這樣就OK了！
以上就是Vue2中easyplayer的使用教程詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue easyplayer的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家學(xué)習(xí)介紹了Vue3如何使用echarts實(shí)現(xiàn)繪制儀表盤(pán)，文中的示例代碼積極學(xué)習(xí)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-07-07
vue-quill-editor插入圖片路徑太長(zhǎng)問(wèn)題解決方法
這篇文章主要介紹了vue-quill-editor插入圖片路徑太長(zhǎng)問(wèn)題解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要給大家介紹了在Vue.Js中的$watch()方法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-03-03
這篇文章主要介紹了Vue項(xiàng)目中如何安裝element組件問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
手把手教你將vue前端和python腳本使用electron打包成桌面應(yīng)用程序
這篇文章主要介紹了如何將Vue項(xiàng)目和Python腳本打包,并將打包后的文件部署到Vue項(xiàng)目中,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),需要的朋友可以參考下2025-01-01
這篇文章主要介紹了vue如何在新窗口打開(kāi)頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
詳解vue2.0組件通信各種情況總結(jié)與實(shí)例分析
本篇文章主要介紹了詳解vue2.0組件通信各種情況總結(jié)與實(shí)例分析，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-03-03
Vue keepAlive 數(shù)據(jù)緩存工具實(shí)現(xiàn)返回上一個(gè)頁(yè)面瀏覽的位置
這篇文章主要介紹了Vue keepAlive 數(shù)據(jù)緩存工具，實(shí)現(xiàn)返回上一個(gè)頁(yè)面瀏覽的位置，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-05-05
關(guān)于vue組件的更新機(jī)制?resize()?callResize()
這篇文章主要介紹了關(guān)于vue組件的更新機(jī)制?resize()?callResize()，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue實(shí)現(xiàn)點(diǎn)擊某個(gè)div顯示與隱藏內(nèi)容功能實(shí)例
最近做項(xiàng)目有用到某個(gè)div顯示與隱藏內(nèi)容,所以下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)點(diǎn)擊某個(gè)div顯示與隱藏內(nèi)容功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12