Vue中使用EasyPlayer播放H265视频流

需求说明

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

实现步骤

1. 引入easyplayer,这里最开始引入了最新版会有问题，因此引入的是3.3.12版本，可参照官方文档进行配置。
   EasyPlayer示例及使用说明

npm install @easydarwin/easyplayer@3.3.12 --save
1

2. 在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>
1
2

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

npm install copy-webpack-plugin --save-dev
1

4. 关键部分（将对应的文件复制到网站根目录）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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

4. 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
2
3
4
5
6
7
8
9
10

5. 测试

<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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35