vue项目中使用EasyPlayer.js播放视频

项目中最近需要接摄像头的监控画面,一开始用了市面上一些别的插件,发现有些视频能播放,有些不能播放,最后发现是摄像头码流的问题,很多插件都无法支持h265的编码格式。但是现在市面上稍微新点的摄像头,都是h265的编码格式。

一、插件下载

npm install [email protected] --save-dev

千万不要下载6.0之后的版本,容易产生很多你意想不到的问题。

二、复制文件于public的跟目录下

node_modules\@easydarwin\easywasmplayer目录下的

 将这两个文件复制于public根目录下,不然会报错。

三、使用(直接上代码)

<template>

扫描二维码关注公众号,回复: 16334442 查看本文章

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

四、一些属性分享

 

 

猜你喜欢

转载自blog.csdn.net/weixin_56039168/article/details/129535265