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

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。感谢您的认真阅读，篇幅有点长

喜欢 (13)赏

[新概念]

分享 (0)