项目中最近需要接摄像头的监控画面，一开始用了市面上一些别的插件，发现有些视频能播放，有些不能播放，最后发现是摄像头码流的问题，很多插件都无法支持h265的编码格式。但是现在市面上稍微新点的摄像头，都是h265的编码格式。
一、插件下载
npm install copy-webpack-plugin@5.1.2 --save-dev
千万不要下载6.0之后的版本，容易产生很多你意想不到的问题。
二、复制文件于public的跟目录下
node_modules\@easydarwin\easywasmplayer目录下的
将这两个文件复制于public根目录下，不然会报错。
三、使用（直接上代码）
文章来源地址https://www.toymoban.com/news/detail-527236.html
<template>
<div class="video">
<div id="Player" class="video-js vjs-default-skin vjs-big-play-centered w100"></div>
</div>
</template>
<script>
export default {
data() {
return {
player: null,
videoMonitorPath: null,
timers: null,
hlsDownAddress: null,
};
},
mounted() {
this.hlsDownAddress = 'http://10.1.235.89:20154/live/cb2898445ccd4fee893e02c3722bcb82.m3u8';
that.timers = setTimeout(() => {
that.getVideo2();
}, 1000);
},
methods: {
getVideo2() {
this.player = new WasmPlayer(null, `Player`);
this.player.play(this.hlsDownAddress, 1);
},
},
beforeDestroy() {
this.timers = null
if (this.player) this.player.destroy(); // 关闭控件
this.player = null
this.hlsDownAddress = null
},
};
</script>
四、一些属性分享
文章来源：https://www.toymoban.com/news/detail-527236.html
到了这里，关于vue项目中使用EasyPlayer.js播放视频的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
