vue视频播放插件vue-video-player的具体使用方法


Posted in Javascript onNovember 08, 2019

安装

npm install vue-video-player --save

引入

可以全局引入插件,也可以在需要用到该插件的组件内单独引入(二选一)

【1】全局引用, 在main.js里面导入并引用

import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
 
Vue.use(VideoPlayer)

【2】组件内引用import { videoPlayer } from 'vue-video-player'

import 'video.js/dist/video-js.css'

export default {
 components: {
 videoPlayer
 }
}

使用

【1】html部分 

<template>
 <div class='demo'>
  <video-player class="video-player vjs-custom-skin" 
   ref="videoPlayer" 
   :playsinline="true" 
   :options="playerOptions">
  </video-player>
 </div>
 </template>

【2】js部分   

export default {
  data() {
  return {
   playerOptions: {
   playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
   autoplay: false, // 如果为true,浏览器准备好时开始回放。
   muted: false, // 默认情况下将会消除任何音频。
   loop: false, // 是否视频一结束就重新开始。
   preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频(如果浏览器支持)
   language: 'zh-CN',
   aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
   fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
   sources: [{
    type: "video/mp4", // 类型
    src: '' // url地址
   }],
   poster: '', // 封面地址
   notSupportedMessage: '此视频暂无法播放,请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
   controlBar: {
    timeDivider: true, // 当前时间和持续时间的分隔符
    durationDisplay: true, // 显示持续时间
    remainingTimeDisplay: false, // 是否显示剩余时间功能
    fullscreenToggle: true // 是否显示全屏按钮
   }
   }
  }
  }
 }

【3】效果图​

vue视频播放插件vue-video-player的具体使用方法

视频格式

type:"video/webm" // 可以播放,用ogg也可打开
type:"video/ogg" // 可以播放,用webm也可打开
type:"video/3gp" // 可以播放
type:"video/mp4" // 可以播放
type:"video/avi" // 打不开
type:"video/flv" // 打不开
type:"video/mkv" // 打不开
type:"video/mov" // 打不开
type:"video/mpg" // 打不开
type:"video/swf" // 打不开
type:"video/ts"  // 打不开
type:"video/wmv" // 打不开
type:"video/vob" // 没转化
type:"video/mxf" // 转化出错
type: "video/rm"  // 转化出错

控制播放和暂停

this.$refs.videoPlayer.player.play() // 播放
this.$refs.videoPlayer.player.pause() // 暂停
this.$refs.videoPlayer.player.src(src) // 重置进度条

回调函数

<template>
 <div class='demo'>
  <video-player class="video-player vjs-custom-skin" 
  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)"
  @canplay="onPlayerCanplay($event)"
  @canplaythrough="onPlayerCanplaythrough($event)"
  @statechanged="playerStateChanged($event)"
  @ready="playerReadied"
  >
  </video-player>
 </div>
 </template>

 <script>
 export default {
  methods: {
  // 播放回调
  onPlayerPlay(player) {
   console.log('player play!', player)
  },

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

  // 视频播完回调
  onPlayerEnded($event) {
   console.log(player)
  },

  // 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);
  }
  
  },
 }
 </script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
jquery validator 插件增加日期比较方法
Feb 21 Javascript
display和visibility的区别示例介绍
Feb 26 Javascript
滚动条响应鼠标滑轮事件实现上下滚动的js代码
Jun 30 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
Oct 26 Javascript
Vue Render函数创建DOM节点代码实例
Jul 08 Javascript
详解Vscode中使用Eslint终极配置大全
Nov 08 #Javascript
Vue实例的对象参数options的几个常用选项详解
Nov 08 #Javascript
Vuex中实现数据状态查询与更改
Nov 08 #Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 #Javascript
vue.js的简单自动求和计算实例
Nov 08 #Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 #Javascript
Vue搭建后台系统需要注意的问题
Nov 08 #Javascript
You might like
如何使用PHP计算上一个月的今天
2013/05/23 PHP
浅析is_writable的php实现
2013/06/18 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
php表单处理操作
2017/11/16 PHP
php下的原生ajax请求用法实例分析
2020/02/28 PHP
javascript removeChild 使用注意事项
2009/04/11 Javascript
jquery 学习之二 属性(类)
2010/11/25 Javascript
重写javascript中window.confirm的行为
2012/10/21 Javascript
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
js动态修改整个页面样式达到换肤效果
2014/05/23 Javascript
js上传图片及预览功能实例分析
2015/04/24 Javascript
JavaScript事件方法(实例讲解)
2017/06/27 Javascript
JavaScript运行原理分析
2018/02/09 Javascript
解决node修改后需频繁手动重启的问题
2018/05/13 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
2019/02/27 Javascript
js数据类型转换与流程控制操作实例分析
2019/12/18 Javascript
prettier自动格式化去换行的实现代码
2020/08/25 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
浅谈python和C语言混编的几种方式(推荐)
2017/09/27 Python
python生成多个只含0,1元素的随机数组或列表的实例
2018/11/12 Python
Python初学者常见错误详解
2019/07/02 Python
Python异常处理例题整理
2019/07/07 Python
Tensorflow 卷积的梯度反向传播过程
2020/02/10 Python
python让函数不返回结果的方法
2020/06/22 Python
Java爬虫技术框架之Heritrix框架详解
2020/07/22 Python
python脚本第一行如何写
2020/08/30 Python
使用Python解析Chrome浏览器书签的示例
2020/11/13 Python
python搜索算法原理及实例讲解
2020/11/18 Python
应届生个人求职信模板
2013/11/26 职场文书
英文自荐信格式
2013/11/28 职场文书
经典禁毒标语
2014/06/16 职场文书
社区助残日活动总结
2014/08/29 职场文书
学生安全责任协议书
2016/03/22 职场文书
详解JVM系列之内存模型
2021/06/10 Javascript