Vue2中easyplayer，使用教程详解！

Vue2中easyplayer的使用教程详解

更新时间：2023年08月11日 15:19:36 作者：会说法语的猪

EasyPlayer.js是集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器, 使用简单, 功能强大，下面大家就跟随小编一起学习一下它的具体使用吧

GPT4.0+Midjourney绘画+国内大模型会员永久免费使用！
【 如果你想靠AI翻身，你先需要一个靠谱的工具！ 】

说一下easyplayer在vue2中的使用，vue3中没测试，估计应该差不多，大家可自行验证。

安装：

1	`pnpm i @easydarwin/easyplayer`

免费讲解

组件封装

习惯性将其封装为单独的组件

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

<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: '无信号'
      },
      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,'播放异常或播放结束或直播断流------->>>>>>>>>')
        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%;
}
  /* 阻止单击双击视频全屏或者跳转官网 */
  /* /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>

免费讲解

报错处理

会发现控制台有下面报错

看到报错不要慌，大家跟着我处理

首先我们安装个插件(注意：不要大于6.0版本的，不然会有bug ，还会有乱七八槽的报错)：

1	`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  相关
  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
});

免费讲解

配置上之后还没完，还需要在public/index.html 引入EasyPlayer-element.min.js，可以直接在node_modules里找到@easydarwin/easyplayer下的dist/element/EasyPlayer-element.min.js复制到pubilc目录下,还有需要EasyPlayer.wasm同样放到public目录下如下所示：

然后在public/index.html下再引入即可

1	`<script` `src="/lib/EasyPlayer-element.min.js"></script>`

免费讲解

这样就OK了！

以上就是Vue2中easyplayer的使用教程详解的详细内容，更多关于Vue easyplayer的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

微信公众号搜索 “ 脚本之家 ” ，选择关注

程序猿的那些事、送书等活动等着你

原文链接：https://blog.csdn.net/m0_51431448/article/details/132182810

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 reterry123@163.com 进行投诉反馈，一经查实，立即处理！

基于Vue组件化的日期联动选择器功能的实现代码
这篇文章主要介绍了基于Vue组件化的日期联动选择器的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-11-11
Vue3 setup的注意点及watch监视属性的六种情况分析
这篇文章主要介绍了Vue3 setup的注意点及watch监视属性的六种情况,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-04-04
vxe-table vue table 表格组件功能
这篇文章主要介绍了vxe-table vue table 表格组件功能，功能非常强大，文中给大家提到了功能点,需要的朋友可以参考下
2019-05-05
vue中控制mock在开发环境使用,在生产环境禁用方式
这篇文章主要介绍了vue中控制mock在开发环境使用,在生产环境禁用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
vant-ui AddressEdit地址编辑和van-area的用法说明
这篇文章主要介绍了vant-ui AddressEdit地址编辑和van-area的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Ruoyi-Vue处理跨域问题同时请求多个域名接口(前端处理方法)
跨域问题一直都是很多人比较困扰的问题,这篇文章主要给大家介绍了关于Ruoyi-Vue处理跨域问题同时请求多个域名接口的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-05-05
解决vue-cli 卸载不掉的问题
这篇文章主要介绍了vue-cli 卸载不掉的问题解决方法，文中给大家介绍了安装后问题分析及解决方案，需要的朋友可以参考下
2023-01-01
解决webpack+Vue引入iView找不到字体文件的问题
今天小编就为大家分享一篇解决webpack+Vue引入iView找不到字体文件的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue中使用echarts的方法实例详解
这篇文章主要介绍了vue中使用echarts的方法,结合实例形式详细分析了vue中使用echarts的包安装、引入、生命周期函数元素挂载等相关操作技巧与使用注意事项,需要的朋友可以参考下
2023-05-05
Vue动态获取数据后控件不可编辑问题
这篇文章主要介绍了Vue动态获取数据后控件不可编辑问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04

Vue2中easyplayer，使用教程详解！

Vue2中easyplayer的使用教程详解

相关文章

最新评论