欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

最新評(píng)論