需求说明

需要在Vue2的项目中使用EasyPlayer进行H265视频流的播放。使用官方的最新版本加载H265会有问题。一直处于加载中…

实现步骤

  1. 引入easyplayer,这里最开始引入了最新版会有问题,因此引入的是3.3.12版本,可参照官方文档进行配置。
    EasyPlayer示例及使用说明
npm install @easydarwin/easyplayer@3.3.12 --save
  1. 在static文件夹中引入对应EasyPlayer.swf,crossdomain.xml,EasyPlayer-lib.min.js。并且需要在index.html中引入Easyplayer-lib.min.js 和jquery.min.js(版本:1.10.2)
 <script src="/static/jquery.min.js"></script>
 <script src="/static/EasyPlayer-lib.min.js"></script>

在这里插入图片描述
3.引入copy-webpack-plugin 。这里用到的版本是4.0.1,其实这里就是为了将对应的几个文件复制到网站的根目录。如果是H265的视频流就会去请求EasyPlayer.wasm这个文件。最开始没有使用这个,仅仅是在static中引入了对应的文件,加载H265视频流的话,请求EasyPlayer.wasm,每次都会返回index.html。应该是没有找到对应的文件

npm install copy-webpack-plugin --save-dev
  1. 关键部分(将对应的文件复制到网站根目录)webpack.dev.conf.js中
const CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
    new webpack.DefinePlugin({
      'process.env': require('../config/dev.env')
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
    new webpack.NoEmitOnErrorsPlugin(),
    // https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      inject: true
    }),
    // copy custom static assets 重点是这个位置,其他的不用管
    new CopyWebpackPlugin([
      {
        from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer.wasm'
      },
      {
        from: 'node_modules/@easydarwin/easyplayer/dist/component/crossdomain.xml'
      },
      {
        from: 'node_modules/@easydarwin/easyplayer/dist/component/EasyPlayer-lib.min.js'
      },
      {
        from: path.resolve(__dirname, '../static'),
        to: config.dev.assetsSubDirectory,
        ignore: ['.*']
      }
    ])
  ]
  1. webpack.prod.conf.js中关键代码,plugs中增加代码
const CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
	new CopyWebpackPlugin([
	      {
	        from: path.resolve(__dirname, '../static'),
	        to: config.build.assetsSubDirectory,
	        ignore: ['.*']
	      }
	    ])
]
  1. 测试
<template>
  <div class="main-box">
    <EasyPlayer :videoUrl="videoUrl" :aspect="aspect" :live="live"  :fluent="fluent" :autoplay="autoplay"
      stretch></EasyPlayer>
       
  </div>
</template>
<script>
  import EasyPlayer from "@easydarwin/easyplayer";
  export default {
      data(){
          return{
            aspect:"16:9",
            live:true,
            fluent:true,
            autoplay:true,
            videoUrl:"这个地方放测试播放地址"
          }
      },
    components: {
      EasyPlayer,
    },
    method(){

    }
  }

</script>
<style scoped>
    .main-box{
        width: 650px;
        height: 600px;
    }
</style>

Logo

前往低代码交流专区

更多推荐