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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
jQuery 入门讲解1
Apr 15 Javascript
js利用数组length属性清空和截短数组的小例子
Jan 15 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
浅析jQuery 3.0中的Data
Jun 14 Javascript
jQuery实现简单倒计时功能的方法
Jul 04 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
Jul 28 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
vue 自定义右键样式的实例代码
Nov 06 Javascript
JS+DIV实现拖动效果
Feb 11 Javascript
如何在JavaScript中正确处理变量
Dec 25 Javascript
15个值得收藏的JavaScript函数
Sep 15 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实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
Javascript 判断Flash是否加载完成的代码
2010/04/12 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
jquery实现人性化的有选择性禁用鼠标右键
2014/06/30 Javascript
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
jQuery网页版打砖块小游戏源码分享
2015/08/20 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
AngularJS模块详解及示例代码
2016/08/17 Javascript
vue中element 上传功能的实现思路
2018/07/06 Javascript
vue中倒计时组件的实例代码
2018/07/06 Javascript
如何实现小程序tab栏下划线动画效果
2019/05/18 Javascript
VUE子组件向父组件传值详解(含传多值及添加额外参数场景)
2020/09/01 Javascript
Python MySQLdb模块连接操作mysql数据库实例
2015/04/08 Python
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
Python根据已知邻接矩阵绘制无向图操作示例
2018/06/23 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
python3 实现验证码图片切割的方法
2018/12/07 Python
django模板结构优化的方法
2019/02/28 Python
python实现简单图片物体标注工具
2019/03/18 Python
pytorch torch.expand和torch.repeat的区别详解
2019/11/05 Python
PyCharm Anaconda配置PyQt5开发环境及创建项目的教程详解
2020/03/24 Python
Python数据可视化实现多种图例代码详解
2020/07/14 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
中国网上药店领导者:1药网
2017/02/16 全球购物
英国皇家造币厂:The Royal Mint
2018/10/05 全球购物
如何查询Oracle数据库中已经创建的索引
2013/10/11 面试题
电大物流学生的自我评价
2013/10/25 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
请假条范文大全
2014/04/10 职场文书
校庆口号
2014/06/20 职场文书
应届大专生求职信
2014/06/26 职场文书
培训师岗位职责
2015/02/14 职场文书
2015年收银工作总结范文
2015/04/01 职场文书
新学期家长寄语2016
2015/12/03 职场文书
小学四年级作文之人物作文
2019/11/06 职场文书
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫