vue使用video.js實(shí)現(xiàn)播放m3u8格式的視頻

更新時(shí)間：2023年12月08日 10:47:13 作者：小馬甲丫

這篇文章主要為大家詳細(xì)介紹了vue如何使用video.js實(shí)現(xiàn)播放m3u8格式的視頻,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

一、前言

實(shí)時(shí)推送的視頻流的需求，vue中就可以使用video.js播放m3u8格式的視頻流

1.官網(wǎng)

2.Github

二、實(shí)現(xiàn)

2.1、安裝依賴

yarn add video.js
yarn add videojs-contrib-hls // 這是播放hls流需要的插件
yarn add videojs-flash // 這是播放rtmp流需要的插件
yarn add mux.js // 在vue項(xiàng)目中，若不安裝它可能報(bào)錯(cuò)

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

抽離出來一個(gè)視頻組件

<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,該方法會(huì)重置videojs的內(nèi)部狀態(tài)并移除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, // 設(shè)置自動(dòng)播放
          muted: true, // 設(shè)置了它為true，才可實(shí)現(xiàn)自動(dòng)播放,同時(shí)視頻也被靜音 （Chrome66及以上版本，禁止音視頻的自動(dòng)播放）
          preload: 'auto', // 預(yù)加載
          controls: false // 顯示播放的控件
        })
      }
      this.player.src([{
        src: url,
        type: 'application/x-mpegURL' // 告訴videojs,這是一個(gè)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);

組件中設(shè)置src時(shí)需要注意：

this.player.src([{
    src: url,
    type: 'rtmp/flv' // 告訴videojs這是一個(gè)rtmp流視頻
}])

到此這篇關(guān)于vue使用video.js實(shí)現(xiàn)播放m3u8格式的視頻的文章就介紹到這了,更多相關(guān)vue video.js播放m3u8視頻內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: