vue video和vue-video-player实现视频铺满教程


Posted in Javascript onOctober 30, 2020

网页放置视频播放器,我一般都是用video.js和它的插件vue-video-player

一:Video.js

需求:对于简单的视频播放需求来说,video.js足以胜任了。

它可是支持HTML5和Flash的视频播放器呦。

1:安装video.js

npm install -s video.js

2:在main.js文件中引入相关文件

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video

3:在组件中使用

<template>
 <div class="video_text">
  <video
   id="myVideo"
   class="video-js"
  >
   <source
    :src="videoUrl"
    type="video/mp4"
   >
  </video>
 </div>
</template>
<script>
 export default {
  name: "Video",
  data() {
   return {
    videoUrl:'...',//视频地址
   };
  },
  mounted() {
   this.initVideo(); //初始化视频播放器
  },
  methods: {
   initVideo() {
    //初始化视频方法
    let myPlayer = this.$video(myVideo, {
     //是否显示控制栏
     controls: true,
     //是否自动播放,muted:静音播放
     autoplay: false,
     //是否静音播放
     muted:false,
     //是否流体自适应容器宽高
     fluid:true,
     //设置视频播放器的显示宽度(以像素为单位)
     width: "800px",
     //设置视频播放器的显示高度(以像素为单位)
     height: "400px"
    });
   }
  }
 };
</script>
<style lang="less">
 .video_text{
  width: 70%;
  margin: 0 auto;
 }
 video:focus{
  outline: 0;   //去掉选中蓝框
 }
 .video-js .vjs-big-play-button{
  /*对播放按钮的样式进行设置*/
  width: 100px;
  height: 60px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%,-50%,0);
 }
</style>

4:效果图

vue video和vue-video-player实现视频铺满教程

5:附上video.js的一些基本方法

myPlayer.ready(function(){
 //视频播放器初始化完成后的回调函数,this代表当前播放器,可以在这进行一系列的操作(myPlayer为我视频播放器对象)
 myPlayer.play(); //播放
 myPlayer.pause(); //暂停
 var currentTime = myPlayer.currentTime(); //当前播放进度
 myPlayer.currentTime(120); //自定义修改当前进度
 var duration = myPlayer.duration(); //加载完成视频后就可以获取视频总时长了,注意:在flash情况下无效!
 var buffered = myPlayer.buffered(); //视频缓冲,返回值为下载了多大文件
 var bufferedPercent = myPlayer.bufferedPercent(); //视频缓冲,返回值为下载了百分之几
 var volume = myPlayer.volume(); //获取视频音量大小,值在0-1之间
 myPlayer.volume(0.2); //设置视频音量大小
 var width = myPlayer.width(); //获取视频的宽度
 myPlayer.width(640); //设置视频的宽度
 var howTallIsIt = myPlayer.height(); //获取视频的高度
 myPlayer.height(200); //设置视频高度
 myPlayer.size(640,480); //同时设置视频高宽
 myPlayer.enterFullScreen(); //视频全屏显示
 myPlayer.enterFullScreen(); //视频退出全屏显示
})

除此之外,我们还可以绑定监听事件:

//视频播放完毕的回调事件
myPlayer.on("ended", function(){
 console.log("end", this.currentTime());
});
//视频暂停的回调事件 
myPlayer.on("pause", function(){
 console.log("pause")
});
//视频删除事件
myPlayer.removeEvent(“eventName”, function(){
 console.log("delete")
});

二:vue-video-player

1:下载vue-video-player

npm install -s vue-video-player

2:在main.js中引入相关文件

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
//引入 hls,视频直播(m3u8)必须引入的
import 'videojs-contrib-hls'
//播放rtmp视频
import 'videojs-flash'
//如果你需要自定义播放器的样式,自己新建一个css
require('./assets/css/video_css/myvideo.css')
Vue.use(VideoPlayer)

3:组件中使用(有点长,其实多数是列出的一些回调函数而已,不需要使用的话忽略掉即可)

<template>
 <div class="my_video">
  <video-player class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="true"
          :options="videoPlayerOptions"
          @play="onPlayerPlay($event)"
          @pause="onPlayerPause($event)"
          @ended="onPlayerEnded($event)"
          @waiting="onPlayerWaiting($event)"
          @playing="onPlayerPlaying($event)"
          @loadeddata="onPlayerLoadeddata($event)"
          @timeupdate="onPlayerTimeupdate($event)"
          @canplay="onPlayerCanplay($event)"
          @canplaythrough="onPlayerCanplaythrough($event)"
          @statechanged="playerStateChanged($event)"
          @ready="playerReadied"
  ></video-player>
 </div>
</template>

<script>
 // 导入组件
 import {videoPlayer} from 'vue-video-player'

 export default {
  name: 'VideoPlayer',
  components: {
   videoPlayer
  },
  data () {
   return {
    video:'',     //具体视频
    fileType: 'mp4', // 资源的类型
    videoUrl: '', // 资源的路径地址
    posterUrl:'' //封面地址
   }
  },
  mounted(){
   
  },
  methods:{
   // 播放回调
   onPlayerPlay(player) {
    //console.log('player play!', player)
   },

   // 暂停回调
   onPlayerPause(player) {
    //console.log('player pause!', player)
   },

   // 视频播完回调
   onPlayerEnded($event) {
    this.$refs.videoPlayer.player.src(this.fileUrl)
   },

   // DOM元素上的readyState更改导致播放停止
   onPlayerWaiting($event) {
    //console.log(player)
   },

   // 已开始播放回调
   onPlayerPlaying($event) {
    // console.log(player)
   },

   // 当播放器在当前播放位置下载数据时触发
   onPlayerLoadeddata($event) {
    // console.log(player)
   },

   // 当前播放位置发生变化时触发。
   onPlayerTimeupdate($event) {
    //console.log(player)
   },

   //媒体的readyState为HAVE_FUTURE_DATA或更高
   onPlayerCanplay(player) {
    // console.log('player Canplay!', player)
   },

   //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
   onPlayerCanplaythrough(player) {
    // console.log('player Canplaythrough!', player)
   },

   //播放状态改变回调
   playerStateChanged(playerCurrentState) {
    //console.log('player current update state', playerCurrentState)
   },

   //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于,如果ready事件已经发生,它将立即触发该函数。。
   playerReadied(player) {
    //console.log('example player 1 readied', player);
   },
  },
  computed: {
   videoPlayerOptions () {
    const videoPlayerOptions = {
     playbackRates: [0.75, 1.0, 1.25, 1.5,2.0], //播放速度
     autoplay: false, // 是否自动播放。
     muted: false, // 是否静音播放,默认情况下将会消除任何音频。
     loop: false, // 是否循环播放。
     preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
     language: 'zh-CN',
     aspectRatio: '3:1', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
     fluid: true, // 是否流体从而按比例缩放以适应其容器。
     flash:{hls:{withCreadentials:false}},//可以播放rtmp视频
     html5:{hls:{withCreadentials:false}},//可以播放m3u8视频
     sources: [{
      type: 'video/' + this.fileType,
      src: this.videoUrl // 视频url地址
     }],
     poster: this.posterUrl, // 封面地址
     width: '100%',
     notSupportedMessage: '此视频暂无法播放...', // 当无法播放时允许覆盖Video.js,显示的默认信息。
     controlBar: {
      timeDivider: true,
      durationDisplay: true,
      remainingTimeDisplay: false,
      fullscreenToggle: true
     }
    }
    return videoPlayerOptions
   }
  },
 }
</script>
<style scoped lang="less">
 .my_video{
  width: 100%;
  height: calc(100vh - 100px);
  background-color: white;
 }
 .video-js .vjs-big-play-button{
  /*对播放按钮的样式进行设置*/
  width: 100%;
  height: 100%;
  border-radius: 50%;
 }
</style>

4:效果图

vue video和vue-video-player实现视频铺满教程

一些改进:

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

通过添加样式object-fit:fill;来实现视频铺满

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

效果图:(视频左右两边是没有黑边了的)

vue video和vue-video-player实现视频铺满教程

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

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

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

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

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

2:实现自适应高宽

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

我的需求效果图:

pc端:

vue video和vue-video-player实现视频铺满教程

移动端:

vue video和vue-video-player实现视频铺满教程

我遇到的问题:

设置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实现视频铺满教程就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 打造动态下滑菜单实现说明
Apr 15 Javascript
jquery移动节点实例
Jan 14 Javascript
JS遍历数组及打印数组实例分析
Jan 21 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
EasyUI在表单提交之前进行验证的实例代码
Jun 24 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
react-router中的属性详解
Jun 01 Javascript
详解如何实现一个简单的Node.js脚手架
Dec 04 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 Javascript
vuex分模块后,实现获取state的值
Jul 26 Javascript
vant自定义二级菜单操作
Nov 02 Javascript
Echarts.js无法引入问题解决方案
Oct 30 #Javascript
解决Vue keep-alive 调用 $destory() 页面不再被缓存的情况
Oct 30 #Javascript
vue 通过 Prop 向子组件传递数据的实现方法
Oct 30 #Javascript
微信小程序:报错(in promise) MiniProgramError
Oct 30 #Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 #Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 #Javascript
Javascript文本框脚本实现方法解析
Oct 30 #Javascript
You might like
php xml-rpc远程调用
2008/12/19 PHP
php DOS攻击实现代码(附如何防范)
2012/05/29 PHP
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
PHP下载大文件失败并限制下载速度的实例代码
2019/05/10 PHP
Prototype使用指南之form.js
2007/01/10 Javascript
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
浅谈checkbox的一些操作(实战经验)
2013/11/20 Javascript
在javascript中实现函数数组的方法
2013/12/25 Javascript
原生js实现fadein 和 fadeout淡入淡出效果
2014/06/05 Javascript
jquery实现聚光灯效果的方法
2015/02/06 Javascript
浅析Jquery操作select
2016/12/13 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
Vue键盘事件用法总结
2017/04/18 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
2018/08/22 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
JS实现给数组对象排序的方法分析
2019/06/24 Javascript
利用 JavaScript 实现并发控制的示例代码
2020/12/31 Javascript
Windows8下安装Python的BeautifulSoup
2015/01/22 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
自适应线性神经网络Adaline的python实现详解
2019/09/30 Python
pandas的resample重采样的使用
2020/04/24 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
采购主管岗位职责
2014/02/01 职场文书
通知书大全
2015/04/27 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
小学思品教学反思
2016/02/20 职场文书
Python 正则模块详情
2021/11/02 Python
openGauss数据库JDBC环境连接配置的详细过程(Eclipse)
2022/06/01 Java/Android