需求說明

需要在Vue2的項(xiàng)目中使用EasyPlayer進(jìn)行H265視頻流的播放。使用官方的最新版本加載H265會(huì)有問題。一直處于加載中…

實(shí)現(xiàn)步驟

1. 引入easyplayer,這里最開始引入了最新版會(huì)有問題，因此引入的是3.3.12版本，可參照官方文檔進(jìn)行配置。
   EasyPlayer示例及使用說明

npm install @easydarwin/easyplayer@3.3.12 --save

2. 在static文件夾中引入對(duì)應(yīng)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，其實(shí)這里就是為了將對(duì)應(yīng)的幾個(gè)文件復(fù)制到網(wǎng)站的根目錄。如果是H265的視頻流就會(huì)去請(qǐng)求EasyPlayer.wasm這個(gè)文件。最開始沒有使用這個(gè)，僅僅是在static中引入了對(duì)應(yīng)的文件，加載H265視頻流的話，請(qǐng)求EasyPlayer.wasm,每次都會(huì)返回index.html。應(yīng)該是沒有找到對(duì)應(yīng)的文件文章來源地址http://www.zghlxwxcb.cn/news/detail-437134.html

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

4. 關(guān)鍵部分（將對(duì)應(yīng)的文件復(fù)制到網(wǎng)站根目錄）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 重點(diǎn)是這個(gè)位置，其他的不用管
    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: ['.*']
      }
    ])
  ]

4. webpack.prod.conf.js中關(guān)鍵代碼，plugs中增加代碼

const CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
	new CopyWebpackPlugin([
	      {
	        from: path.resolve(__dirname, '../static'),
	        to: config.build.assetsSubDirectory,
	        ignore: ['.*']
	      }
	    ])
]

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:"這個(gè)地方放測試播放地址"
          }
      },
    components: {
      EasyPlayer,
    },
    method(){

    }
  }

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

到了這里，關(guān)于Vue中使用EasyPlayer播放H265視頻流的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！