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 相关文章推荐
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
全面解析Bootstrap手风琴效果
Apr 17 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
Oct 26 Javascript
JS失效 提示HTML1114: (UNICODE 字节顺序标记)的代码页 utf-8 覆盖(META 标记)的冲突的代码页 utf-8
Jun 23 Javascript
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
Apr 09 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
基于JavaScript实现留言板功能
Mar 16 Javascript
封装Vue Element的table表格组件的示例详解
Aug 19 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
AM/FM收音机的安装与调试
2021/03/02 无线电
php横向重复区域显示二法
2008/09/25 PHP
鼠标图片振动代码
2006/07/06 Javascript
JQuery实现自定义对话框的代码
2008/06/15 Javascript
jquery offset函数应用实例
2012/11/14 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
解析JavaScript中的标签语句
2013/06/19 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
JavaScript中的变量作用域介绍
2014/12/31 Javascript
js事件监听器用法实例详解
2015/06/01 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
Vue.js路由vue-router使用方法详解
2017/03/20 Javascript
Vue导出json数据到Excel电子表格的示例
2017/12/04 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
2018/08/20 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
微信小程序身份证验证方法实现详解
2019/06/28 Javascript
微信小程序npm引入vant-weapp的踩坑记录
2019/08/01 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
Python随机数用法实例详解【基于random模块】
2017/04/18 Python
Python实现网站注册验证码生成类
2017/06/08 Python
python爬虫使用cookie登录详解
2017/12/27 Python
设置jupyter中DataFrame的显示限制方式
2020/04/12 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
寒假思想汇报
2014/01/10 职场文书
工程招投标邀请书
2014/01/26 职场文书
硕士生工作推荐信
2014/03/07 职场文书
学校宣传标语
2014/06/18 职场文书
学风建设演讲稿
2014/09/12 职场文书
财务人员入职担保书
2015/09/22 职场文书
2016年企业先进员工事迹材料
2016/02/25 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
Go语言操作数据库及其常规操作的示例代码
2021/04/21 Golang
解析Java中的static关键字
2021/06/14 Java/Android
oracle连接ODBC sqlserver数据源的详细步骤
2021/07/25 Oracle