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