需求说明
需要在Vue2的项目中使用EasyPlayer进行H265视频流的播放。使用官方的最新版本加载H265会有问题。一直处于加载中…文章来源:https://www.toymoban.com/news/detail-437134.html
实现步骤
- 引入easyplayer,这里最开始引入了最新版会有问题,因此引入的是3.3.12版本,可参照官方文档进行配置。
EasyPlayer示例及使用说明
npm install @easydarwin/easyplayer@3.3.12 --save
- 在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。应该是没有找到对应的文件文章来源地址https://www.toymoban.com/news/detail-437134.html
npm install copy-webpack-plugin --save-dev
- 关键部分(将对应的文件复制到网站根目录)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: ['.*']
}
])
]
- webpack.prod.conf.js中关键代码,plugs中增加代码
const CopyWebpackPlugin = require('copy-webpack-plugin')
plugins: [
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
]
- 测试
<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>
到了这里,关于Vue中使用EasyPlayer播放H265视频流的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!