vue實現監(jiān)控視頻直播的示例代碼

更新時間：2022年05月15日 09:09:06 作者：踏行JAVA

本文主要介紹了vue實現監(jiān)控視頻直播的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

要想使用videojs我們勢必是需要安裝videojs的, 而且在生產環(huán)境中我們也需要依賴它, 所以如下

npm: ?npm install video.js -S
npm install videojs-flash videojs-contrib-hls -S

我們打開Vue工程中的主入口main.js進行引入

// 引入videojs
import Video from 'video.js';
import 'video.js/dist/video-js.css';
Vue.prototype.$video = Video; 
import hls from 'videojs-contrib-hls';
Vue.use(hls); // 要播放hls流

創(chuàng)建監(jiān)控視頻九宮格

<template>
? <div class="cell">

? ? <div class="cell-player">
? ? ? <div :class="cellClass(i)" v-for="i in cellCount" :key="i">
? ? ? ? <playVideo :video="videoInfo[i]" v-if="cellCount != 6"></playVideo>
? ? ? ? <playVideo :video="videoInfo[i]" v-if="cellCount == 6 && i != 2 && i != 3"></playVideo>
? ? ? ? <template v-if="cellCount == 6 && i == 2">
? ? ? ? ? <div class="cell-player-6-2-cell">
? ? ? ? ? ? <playVideo :video="videoInfo[i]"></playVideo>
? ? ? ? ? ? <playVideo :video="videoInfo[++i]"></playVideo>
? ? ? ? ? </div>
? ? ? ? </template>
? ? ? </div>
? ? </div>
? ? <div class="cell-tool">
? ? ? <div class="bk-button-group">
<!-- ? ? ? ?<el-button @click="cellCount = 1" size="small">1</el-button>-->
? ? ? ? <el-button @click="cellCount = 4" size="small">4</el-button>
<!-- ? ? ? ?<el-button @click="cellCount = 6" size="small">6</el-button>-->
? ? ? ? <el-button @click="cellCount = 9" size="small">9</el-button>
<!-- ? ? ? ?<el-button @click="cellCount = 16" size="small">16</el-button>-->
? ? ? </div>
? ? </div>
? </div>
</template>

<script>
? import playVideo from '@/views/test/playVideo'

? export default {
? ? name: 'dashboard',
? ? components: {
? ? ? playVideo
? ? },
? ? data() {
? ? ? return {
? ? ? ? videoInfo: [
? ? ? ? ? {url: "", index: 0, name: "測試1"},
? ? ? ? ? {url: "http://hls01open.ys7.com/openlive/699a3134f0864d81a72s5d84ded3180d81.m3u8", index: 1, name: "測試1"},
? ? ? ? ? {url: "http://hls01open.ys7.com/openlive/699a3134f0864d81a725sd84ded3180d81.m3u8", index: 2, name: "測試2"},
? ? ? ? ? {url: "http://hls01open.ys7.com/openlive/699a3134f0864d81a7s25d84ded3180d81.m3u8", index: 3, name: "測試3"},
? ? ? ? ? {url: "http://hls01open.ys7.com/openlive/b27fa374e9d749ddb22bs4a12e843a3131.m3u8", index: 10, name: "測試4"},
? ? ? ? ? {url: "http://hls01open.ys7.com/openlive/699a3134f0864d81a7s2s5d84ded3180d8.m3u8", index: 4, name: "測試5"},
? ? ? ? ? {url: "http://hls01open.ys7.com/openlive/699a3134f0864d81a725sd84ded3180d8.m3u8", index: 5, name: "測試6"},
? ? ? ? ? {url: "http://hls01open.ys7.com/openlive/699a3134f0864d81a725sd84ded31280d8.m3u8", index: 6, name: "測試7"},
? ? ? ? ? {url: "http://hls01open.ys7.com/openlive/699a3134f0864d81a725sd84ded33180d8.m3u8", index: 7, name: "測試8"},
? ? ? ? ? {url: "http://hls01open.ys7.com/openlive/699a3134f0864d81a725sd84ded31480d8.m3u8", index: 8, name: "測試9"},


? ? ? ? ],
? ? ? ? cellCount: 9
? ? ? }
? ? },
? ? methods: {},
? ? computed: {
? ? ? cellClass() {
? ? ? ? return function (index) {
? ? ? ? ? switch (this.cellCount) {
? ? ? ? ? ? case 1:
? ? ? ? ? ? ? return ['cell-player-1']
? ? ? ? ? ? case 4:
? ? ? ? ? ? ? return ['cell-player-4']
? ? ? ? ? ? case 6:
? ? ? ? ? ? ? if (index == 1)
? ? ? ? ? ? ? ? return ['cell-player-6-1']
? ? ? ? ? ? ? if (index == 2)
? ? ? ? ? ? ? ? return ['cell-player-6-2']
? ? ? ? ? ? ? if (index == 3)
? ? ? ? ? ? ? ? return ['cell-player-6-none']
? ? ? ? ? ? ? return ['cell-player-6']
? ? ? ? ? ? case 9:
? ? ? ? ? ? ? return ['cell-player-9']
? ? ? ? ? ? case 16:
? ? ? ? ? ? ? return ['cell-player-16']
? ? ? ? ? ? default:
? ? ? ? ? ? ? break;
? ? ? ? ? }
? ? ? ? }
? ? ? },
? ? },
? }
</script>
<style>
? .cell-tool {
? ? height: 40px;
? ? line-height: 30px;
? ? padding: 0 7px;
? }
? .cell-player {
? ? flex: 1;
? ? display: flex;
? ? flex-wrap: wrap;
? ? justify-content: space-between;
? }
? .cell-player-4 {
? ? width: 50%;
? ? height: 50% !important;
? ? box-sizing: border-box;
? }

? .cell-player-1 {
? ? width: 100%;
? ? box-sizing: border-box;
? }

? .cell-player-6-1 {
? ? width: 66.66%;
? ? height: 66.66% !important;
? ? box-sizing: border-box;
? }
? .cell-player-6-2 {
? ? width: 33.33%;
? ? height: 66.66% !important;
? ? box-sizing: border-box;
? ? display: flex;
? ? flex-direction: column;
? }
? .cell-player-6-none {
? ? display: none;
? }
? .cell-player-6-2-cell {
? ? width: 100%;
? ? height: 50% !important;
? ? box-sizing: border-box;
? }
? .cell-player-6 {
? ? width: 33.33%;
? ? height: 33.33% !important;
? ? box-sizing: border-box;
? }
? .cell-player-9 {
? ? width: 33.33%;
? ? height: 33.33% !important;
? ? box-sizing: border-box;
? }
? .cell-player-16 {
? ? width: 25%;
? ? height: 25% !important;
? ? box-sizing: border-box;
? }
? .cell {
? ? display: flex;
? ? flex-direction: column;
? ? height: 100%;
? }

</style>

創(chuàng)建視頻容器

雖然是遍歷視頻容器組件，但是監(jiān)控視頻只播放第一個，所以這里創(chuàng)建視頻容器時，需要保證容器id不一致。

<template>
<div class="player">
? <div>{{video.name}}</div>
? <video :id='"A"+video.index'
? ? ? ? ?style="width: 100%;"
? ? ? ? ?class="video-js vjs-default-skin vjs-big-play-centered ?"> </video>
</div>
</template>

<script>
? export default {
? ? name: "playVideo",
? ? props: {
? ? ? video: {
? ? ? ? url: "",
? ? ? ? index:0,
? ? ? }
? ? },
? ? data() {return {}},
? ? mounted() {
? ? ? this.initVideoPlayer();
? ? },
? ? methods: {
? ? ? initVideoPlayer() {
? ? ? ? var that=this;
? ? ? ? var id="#A"+this.video.index;
? ? ? ? ? const currentInstance = that.$video(document.querySelector(id),{
? ? ? ? ? ? autoplay:true,
? ? ? ? ? ? controls:true
? ? ? ? ? }).src({
? ? ? ? ? ? src: that.video.url,
? ? ? ? ? ? type: 'application/x-mpegURL',
? ? ? ? ? })
? ? ? },
? ? }
? }
</script>
<style scoped>
? .player ?{
? ? background-color: black;
? ? width: 100%;
? ? height: 100%;
? ? border: 1px solid white;
? ? color: white;
? ? text-align: center;
? }
</style>