首页 前端知识 vue中使用video.js播放m3u8格式的视频

vue中使用video.js播放m3u8格式的视频

2024-06-07 12:06:46 前端知识 前端哥 743 435 我要收藏

文章目录

  • 一、前言
    • 1.1、[官网](https://docs.videojs.com/)
    • 1.2、[`Github`](https://github.com/videojs/video.js)
  • 二、实现
    • 2.1、安装依赖
    • 2.2、`main.js`
    • 2.3、`video.vue`
    • 2.4、其它
  • 三、最后

一、前言

实时推送的视频流的需求,vue中就可以使用video.js播放m3u8格式的视频流

1.1、官网

在这里插入图片描述

1.2、Github

在这里插入图片描述

二、实现

2.1、安装依赖

yarn add video.js
yarn add videojs-contrib-hls // 这是播放hls流需要的插件
yarn add videojs-flash // 这是播放rtmp流需要的插件
yarn add mux.js // 在vue项目中,若不安装它可能报错

2.2、main.js

引入如下依赖:

import "video.js/dist/video-js.css"; // 引入video.js的css
import hls from "videojs-contrib-hls"; // 播放hls流需要的插件
import Vue from "vue";
Vue.use(hls);

2.3、video.vue

抽离出来一个视频组件

<template>
  <video id="videoPlayer" class="video" muted width="100%" height="580px" />
</template>

<script>
import Videojs from 'video.js'

export default {
  data() {
    return {
      player: null
    }
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose() // Removing Players,该方法会重置videojs的内部状态并移除dom
    }
  },
  activated() {
    if (this.player) {
      this.player.play()
    }
  },
  deactivated() {
    if (this.player) {
      this.player.pause()
    }
  },
  mounted() {
    this.initVideo()
  },
  methods: {
    initVideo(url) {
      if (!this.player) {
        this.player = Videojs('videoPlayer', {
          autoplay: true, // 设置自动播放
          muted: true, // 设置了它为true,才可实现自动播放,同时视频也被静音 (Chrome66及以上版本,禁止音视频的自动播放)
          preload: 'auto', // 预加载
          controls: false // 显示播放的控件
        })
      }
      this.player.src([{
        src: url,
        type: 'application/x-mpegURL' // 告诉videojs,这是一个hls流
      }])
    }
  }
}
</script>

<style lang="scss" scoped>
.video, video {
  width: 100%;
  height: 580px;
}
/deep/ .vjs-loading-spinner {
  position: relative;
  .vjs-control-text {
    opacity: 0;
  }
}
</style>

2.4、其它

rtmp流的话,需再安装依赖videojs-flash

// main.js
import flash from "videojs-flash"; // 播放rtmp流需要的插件
import Vue from "vue";
Vue.use(flash);

组件中设置src时需要注意:

this.player.src([{
    src: url,
    type: 'rtmp/flv' // 告诉videojs这是一个rtmp流视频
}])

三、最后

本人每篇文章都是一字一句码出来,希望大佬们多提提意见。顺手来个三连击,点赞👍收藏💖关注✨。创作不易,给我打打气,加加油☕

转载请注明出处或者链接地址:https://www.qianduange.cn//article/11216.html
标签
video.js
评论
发布的文章

1.10 Unity中的数据存储 JSON

2024-06-13 21:06:30

JSON 数据格式化方法

2024-06-13 21:06:26

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!