• 欢迎访问新概念博客,研究javascript,css3,html5,nodejs,Ext js等技术研究,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入新概念博客

video.js在vue视频插件vue-video-player全屏播放优化

代码碎片 新概念 9个月前 (11-04) 3146次浏览 0个评论 扫描二维码

vue-video-player 是基于 video.js 二次封装而成,各种 api 基本互通,只是调用方式有些许区别

插件安装及引入

yarn add vue-video-player
或
npm install vue-video-player
复制代码

如引入样式时报错,请自行查看 node_modules 中对应的目录

全部引入

// main.js 中
import VideoPlayer from 'vue-video-player'
// 引入默认样式包
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
Vue.use(VideoPlayer)

局部引入

import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'

export default {
  name: 'Video,
  components: {
    videoPlayer
  },
data(){
return {
  playerOptions: {
        // videojs options
        width: '100%',
        // 高度按 16:9 比例
        height: (window.screen.width * 9) / 16,
        // autoplay: 'muted',
        autoplay: false,
      },
}
}

使用
以下列出的各种回调及 api 的调用,基本可以满足自定义播放器样式了

<!-- vue template 中 -->
<video-player
class="video-player 
ref="videoPlayer" 
:playsinline="true"
 :options="playerOptions" 
@play="onPlayerPlay($event)" 
@pause="onPlayerPause($event)" 
@ended="onPlayerEnded($event)" 
@waiting="onPlayerWaiting($event)" 
@playing="onPlayerPlaying($event)" 
@loadeddata="onPlayerLoadeddata($event)" 
@timeupdate="onPlayerTimeupdate($event)" 
@statechanged="playerStateChanged($event)" 
@ready="playerReadied"></video-player>
// vue script 中
data () {
  return {
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, // 加载完成后是否自动播放
        muted: false, // 是否静音。
        loop: false, // 是否循环播放
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto 浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
        language: 'zh-CN',
        aspectRatio: '16:9', // 宽高比例
        fluid: true, // 当 true 时,Video.js player 将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
        sources: [{
          type: '', // 这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看 git 网址项目
          src: require('../assets/vido/vido3.mp4') // url 地址
        }],
        poster: '', // 你的封面地址
        notSupportedMessage: '无法播放', // 允许覆盖 Video.js 无法播放媒体源时显示的默认信息。
        controlBar: false // 为 false 时不显示默认的控制按钮
      }
    }
  },
  methods: {
/**
             * 初始化视频
             **/
    initVideo: function () {
        player = app.$refs.videoPlayer.player;
          // 配置横屏插件
        player.landscapeFullscreen({
               fullscreen: {
                  enterOnRotate: true, //在横向旋转设备时进入全屏模式
                  alwaysInLandscapeMode: true, //即使设备处于纵向模式,也始终以横向模式进入全屏(适用于 chromium、firefox 和 ie>=11)
                  iOS: true // 是否在 iOS 上使用假全屏(显示播放器控件而不是系统控件所需)
                  }
                });
        }
    // -----------------------各种回调--------------------------
    // 播放的回调
    onPlayerPlay (e) {
    },
    // 暂停的回调
    onPlayerPause (e) {
    },
    // 结束的回调
    onPlayerEnded (e) {
    },
    // 等待的回调
    onPlayerWaiting (e) {
    },
    // 播放中回调
    onPlayerPlaying (e) {
    },
   	// 视频加载完成的回调
    onPlayerLoadeddata (e) {
      // e.duration() 可获取视频的总时长
    },
    // 视频播放时,时间的回调
    onPlayerTimeupdate (e) {
      this.currentVolume = (e.volume() * 100).toFixed(2) * 1
    },
    // 视频播放时状态回调
    playerStateChanged (e) {
      // e.timeupdate 存在时视频正在播放中,e.timeupdate 值为当前播放时间
      // e.pause 存在时视频为暂停状态
      // e.play 存在时视频为播放状态
    },
    // 视频加载完成回调,此时可以赋值 myPlayer
    playerReadied (e) {
      this.myPlayer = e
    },
    // -----------------------自定义的各种方法--------------------------
    // 静音或取消静音按钮
    mutedChange () {
      if (this.myPlayer) {
        if (this.myPlayer.muted()) {
          this.myPlayer.muted(false)
        } else {
          this.myPlayer.muted(true)
        }
        this.isMuted = this.myPlayer.muted()
      }
    },
    // 播放按钮
    doPlay () {
      this.myPlayer.play()
    },
    // 暂停按钮
    doPause () {
      this.myPlayer.pause()
    },
    // 重置视频按钮
    doRest () {
      this.myPlayer.src(require(`src`))
    },
    // 控制进度条按钮,入参单位为秒
    doProgress (val) {
      this.myPlayer.currentTime(val)
      this.doPlay()
    },
    // 全屏按钮
    fullScreenHandle () {
      if (!this.myPlayer.isFullscreen()) {
        this.myPlayer.requestFullscreen()
        this.myPlayer.isFullscreen(true)
      } else {
        this.myPlayer.exitFullscreen()
        this.myPlayer.isFullscreen(false)
      }
    },
    // 控制音量按钮,取值 0-1
    doVol (val) {
      this.myPlayer.volume(val)
    }
  }

1:消除视频两边留白,也就是实现视频铺满父元素

通过添加样式 object-fit:fill;来实现视频铺满,视频左右两边是没有黑边了的

video{
   width: 100% !important;
   height: calc(100vh - 95px) !important;
   object-fit:fill;  //消除留白
  }

补充 object-fit 取值的相关知识:

fill:此值为 boject-fit 的默认值,替换内容的大小被设置为填充元素的内容框,也就是说,元素的内容扩大到完全填充容器的外形尺寸,即使这打破其内在的宽高比。

contain:替换元素内容大小保持长宽比例填充元素内容容器,其具体对象大小被解析为一个包含元素的宽度和高度。也就是说,如果你在替换元素上设置一个明确的高度和宽度,此值将导致内容大小,完全在固定的比例显示,但仍在元素尺寸内显示。

cover:替换元素内容大小保持长宽比例填充元素内容容器,其具体对象大小被解析为覆盖整个元素的宽度和高度。也就是说,替换元素内容大小保持长宽比,但改变宽度和高度,以便完全覆盖内容元素。

none:替换元素内容不调整大小以适应内部元素的容器,内容完全忽略设置在元素上的任何高度和权重,并且仍在元素尺寸内显示。 scale-down:当内容大小设置了 none 或 contain,将导致具体对象变得更小。

2:实现自适应高宽

通过上面设置的 fluid:true 虽然可以自适应宽高,但有时候需求是规定视频总高度的,如果只是靠 fluid 来自适应是远远不够的。

我遇到的问题:

设置 video 视频高宽 100%后,总高度却超出了那个位置的高度,试了很多方法都不行,后来就才去了简单粗暴的方法去解决–修改 css 样式。(看具体场景使用)

注意:这里我是去掉了之前在 videoPlayerOptions 中设置的 fluid:true 和 aspectRatio: ’16:10’再改 css 样式的

html 代码:

<div class="my_video">
  <video-player class="video-player vjs-custom-skin"
          id="videoDiv"
          ref="videoPlayer"
          :playsinline="true"
          :webkit-playsinline="true"
          :options="videoPlayerOptions"
  ></video-player>
 </div>

自定义 css 样式:

@media screen and(min-width:768px){ //pc 端视频铺满且占据整个容器的高宽,而移动端不需要视频占据整个高度,因为会拉长视频,很难看

 video{
  width: 100% !important;
  height: calc(100vh - 95px) !important; //我的容器高度设置的是 100vh-95px,你们根据你们容器高度设置视频高度即可
  object-fit:fill;  //消除两边留白
 }
}
//为了填满整个 my_video 的高度,设置 video 外层 div 高度(就是移动端效果图包含黑色部分和视频部分的整个 div),使之为容器高度
#videoDiv>div{
 height: calc(100vh - 95px) !important;
 overflow: hidden;
}
.my_video{  //这是我放视频播放器的容器
 width: 100%;
 height: calc(100vh - 95px);
 background-color: white;
}

补充知识:vue 中使用 vue-video-player 的几个问题

video.js 插件在 vue 中是 vue-video-player;

我们在 vue 中播放视频可以使用这个插件;

下面简单描述几个使用中的问题,不涉及其他问题:

1、自定义播放处理 , 我们自己如何去触发播放这个事件

2、播放,停止触发的函数相关处理;

3、在安卓的微信中播放视频不能播放的问题;

1、自定义播放,假设现在自己写了一个 button, 或者其他什么东西放在视频上方,要求点击这个玩意儿播放视频,

你也可以理解为播放按钮; 那么首先肯定得绑定事件,vue 绑定事件就不说了,应该都会,那么在这个绑定的

事件函数中,我们如何去播放视频呢?:this.$refs.videoPlayer.player.play(); 就可以了

2、播放或者停止播放时,我想怎加一些额外的处理,那么可以在 <video-player @play=… @pause…>

如下代码,在相应的函数中处理即可,还有其它的事件也都类似处理;

3、在<video-player :playsinline =….> 设置 playsinline 参数的时候,如果我们设置为 true 或者 false 是会出问题的,

所以需要根据情况进行处理,这里的情况一般是微信浏览器的 x5 内核,需要设置为 false, 其它的设置为 true 即可;

如果微信的 x5 设置为 true , 那么在安卓中微信环境下是无法播放的,是有问题的;

下面的代码是部分代码,仅供参考设置:

<template>
  <div class="video">
    <video-player class="video-player-box"
         ref="videoPlayer"
         :options="playerOptions"
         :playsinline="playsinline"
         customEventName="customstatechangedeventname"
         @play="onPlayerPlay($event)"
         @pause="onPlayerPause($event)"
    >
    </video-player>
  </div>
</template> 
 
<script>
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
 
export default {
  name: 'Video',
  props: {
    videoUrl: Object
  },
  data() {
    return{
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0],
        autoplay: false,
        muted: false,
        loop: false,
        preload: 'auto', 
        language: 'zh-CN',
        aspectRatio: '16:9',
        fluid: true, 
        sources: [{
          type: "video/mp4",
          src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
        }],
        poster: "http://localhost/547be638615da10.png",
        width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放,请稍后再试',
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true //全屏按钮
        }
      },
      videoButton: require("../video_player.png"),
    }
  },
  components: {
    videoPlayer
  },
  mounted() {
   
   this.playerOptions.sources[0].src = this.videoUrl.a;
   this.playerOptions.poster = this.videoUrl.b
  },
  computed: {
   player() {
    return this.$refs.videoPlayer.player
   },
 
   playsinline(){
    var ua = navigator.userAgent.toLocaleLowerCase();
    if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
      return false
    }else{
      return true       
    }
   }
 
  },
  methods: {
    clickStartButton: function(){
      this.$refs.videoPlayer.player.play();
    },
    onPlayerPlay(player) {
      this.videoPlayState = true;
    }
  }
}
</script>

以上就是 vue video 和 vue-video-player 实现视频铺满教程,希望能帮助大家使用 vue-video-player。感谢您的认真阅读,篇幅有点长


新概念博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:video.js在vue视频插件vue-video-player全屏播放优化
喜欢 (13)
[新概念]
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

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