vue-video-player 浏览器缩放

前言

此篇是在上一次《[Vue 播放rtmp直播流]》基础之上的更新及补充；近期接到客户需求，需要在视频流上显示额外的信息；当然，视频流上叠加信息可以通过canvas来完成（透明canvas实现），但是在测试的过程中发现，当浏览器缩放时，叠加的图层信息与初始化的时候会产生错位及偏移，这主要是由于，默认情况下，视频流显示大小会随着浏览器的缩放而自动调整大小，但图片确实固定的；为解决该问题，尝试过很多办法，最后终于解决，故记录下来

一、vue-video-player的封装

本人将vue-video-player的封装在vueVideo.vue中，代码如下：

<template>
    <div style="width:100%;height:100%" ref="videoContainer">
        <video-player 
           class="video-js vjs-big-play-centered"
           ref="myPlayer" 
           :options="playerOptions" 
           v-show="contianerW"
           id="videoPlayer"
           @play="onPlayerPlay"
           :info="info"
        >
        </video-player>
    </div>
</template>

<script>
import Vue from 'vue'
import VideoPlayer from 'vue-video-player'
import 'videojs-flash'

require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer);
const { $ } = window;

export default {
    components: {},
    data() {
       return {
        contianerW: 0,
        info : {}
       }
    },
    props: {
        videoOptions: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    computed: {
        playerOptions() {
            return {
                width: this.contianerW,
                sources: [{
                    type: "rtmp/mp4",
                    src: this.videoOptions.sourceSrc || ``
                }],
                techOrder: ['flash'],
                autoplay: true,
                controls: false,
                loop: false,
                notSupportedMessage: `当前无可播放视频源`
            }
        }
    },
    mounted() {
        this.contianerW = this.$refs.videoContainer.offsetWidth;
    },
    methods : {
        onPlayerPlay(){
           let ele = $('#videoPlayer').children('div').eq(0);
           this.info = {
               w : ele.width(),
               h : ele.height()
            };
            this.$emit('info',this.info);
        }
    }
};
</script>

注意：

1. video-player标签的class必须设置为：class=“video-js vjs-big-play-centered”，此类将使视频流不会随着浏览器的缩放而自动调整带下
2. @play="onPlayerPlay"为视频流播放时，获取视频流播放区域的宽、高；在设置过class="video-js vjs-big-play-centered"的前提下，视频流播放区域的宽高是固定的，不会随着浏览器缩放而改变

二、调用

1. 引入

代码如下（示例）：

import VueVideo from "$pc/components/vueVideo";
...
components: {
  VueVideo
},

2. vue template代码

<template>
    <div class='center-top-image' ref="topImgContainer" style="height:100%" v-loading="loading">
         <VueVideo 
            :videoOptions="videoOptions" 
            v-on:info="getInfo"
        >
        </VueVideo>
        <div class="video-cover-img" ref="coverImg" >
             <canvas id="myCanvas"></canvas>
             <img v-if="imgSrc" :src="imgSrc" style="width: 100% !important;height: 100%;"/>
        </div>
    </div>
</template>

2. 主要js代码

props: {
     options: {
         type: Object,
         default: () => ({})
     }
 },
 data() {
     return {
          videoOptions: {
             sourceType: 'video/mp4',
             sourceSrc : ''
         },
         imgSrc : '',
         CanvasServer : null,
         socket : null,
         stInfo : {},
         isShowCoverImage : false,
         info : {}
     };
 },
 ...
 methods: {
    getInfo(obj){
        let {w,h} = obj;
        this.$refs.coverImg.style.width = w + 'px';
        this.$refs.coverImg.style.height = h + 'px';
    },
 }
            

效果