区块链技术博客
www.b2bchain.cn

vue-video-player 浏览器缩放

这篇文章主要介绍了vue-video-player 浏览器缩放的讲解,通过具体代码实例进行20331 讲解,并且分析了vue-video-player 浏览器缩放的详细步骤与相关技巧,需要的朋友可以参考下https://www.b2bchain.cn/?p=20331

本文实例讲述了2、树莓派设置连接WiFi,开启VNC等等的讲解。分享给大家供大家参考文章查询地址https://www.b2bchain.cn/7039.html。具体如下:

文章目录

  • 前言
  • 一、vue-video-player的封装
  • 二、调用
    • 1. 引入
    • 2. vue template代码
    • 2. 主要js代码
  • 效果

前言

此篇是在上一次《[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';     },  }              

效果

vue-video-player 浏览器缩放

vue-video-player 浏览器缩放

本文转自互联网,侵权联系删除vue-video-player 浏览器缩放

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » vue-video-player 浏览器缩放
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们