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 相关文章推荐
用js判断用户浏览器是否是XP SP2的IE6
Mar 08 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
JavaScript基本编码模式小结
May 23 Javascript
JavaScript?Apple设备检测示例代码
Nov 15 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
jquery 重写 ajax提交并判断权限后 使用load方法报错解决方法
Jan 19 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
详细总结Javascript中的焦点管理
Sep 17 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
五分钟搞懂Vuex实用知识(小结)
Aug 12 Javascript
js模拟实现百度搜索
Jun 28 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
详解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在线打包程序源码
2008/07/27 PHP
tp5实现微信小程序多图片上传到服务器功能
2018/07/16 PHP
如何在PHP中使用数组
2020/06/09 PHP
PHP操作Redis常用命令的实例详解
2020/12/23 PHP
Dom在ajax技术中的作用说明
2010/10/25 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
用JS动态设置CSS样式常见方法小结(推荐)
2016/11/10 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
react-router4 嵌套路由的使用方法
2017/07/24 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
微信小程序实现天气预报功能
2018/07/18 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
python绘图库Matplotlib的安装
2014/07/03 Python
python字典get()方法用法分析
2015/04/17 Python
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
Python logging管理不同级别log打印和存储实例
2018/01/19 Python
详解Python3之数据指纹MD5校验与对比
2019/06/11 Python
使用Python代码实现Linux中的ls遍历目录命令的实例代码
2019/09/07 Python
Python 矩阵转置的几种方法小结
2019/12/02 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
新加坡最佳婴儿用品店:Mamahood.com.sg
2018/08/26 全球购物
ASICS印度官方网站:日本专业运动品牌
2020/06/20 全球购物
Android interview questions
2016/12/25 面试题
老师自我鉴定范文
2013/12/25 职场文书
投标邀请书范文
2014/01/31 职场文书
环境整治工作方案
2014/05/18 职场文书
文员试用期转正自我鉴定
2014/09/14 职场文书
金砖之国观后感
2015/06/11 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书