vue-video-player视频播放器使用配置详解


Posted in Javascript onOctober 23, 2020

本文实例为大家分享了vue-video-player视频播放器的使用配置,供大家参考,具体内容如下

1、安装

npm install vue-video-player -save

2、在main.js中添加

import VueVideoPlayer from 'vue-video-player' // 视频播放器
import 'video.js/dist/video-js.css'

Vue.use(VueVideoPlayer)

3、新建一个vueVideoPlayer.vue组件供调用

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

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

4、在其他组件调用

<vueVideoPlayer :src="data.url" :cover_url="data.cover_url" />

import vueVideoPlayer from './module/vueVideoPlayer'
// 不要忘记注册
components: {
 vueVideoPlayer 
}

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

更多vue学习教程请阅读专题《vue实战教程》

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

Javascript 相关文章推荐
让mayfish支持mysqli数据库驱动的实现方法
May 22 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
SinaEditor使用方法详解
Dec 28 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
vue2.0 elementUI制作面包屑导航栏
Feb 22 Javascript
javascript数据结构之多叉树经典操作示例【创建、添加、遍历、移除等】
Aug 01 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
JavaScript实现简易计算器小功能
Oct 22 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 #Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 #Javascript
vuejs实现下拉框菜单选择
Oct 23 #Javascript
vue 如何使用递归组件
Oct 23 #Javascript
vue 如何从单页应用改造成多页应用
Oct 23 #Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 #Javascript
jquery实现异步文件上传ajaxfileupload.js
Oct 23 #jQuery
You might like
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
zend framework文件上传功能实例代码
2013/12/25 PHP
CodeIgniter多语言实现方法详解
2016/01/20 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
PHP上传图片类显示缩略图功能
2016/06/30 PHP
PHP一个简单的无需刷新爬虫
2019/01/05 PHP
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
jQuery解析返回的xml和json方法详解
2017/01/05 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
详解微信JS-SDK选择图片遇到的坑
2018/08/15 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
Vue实现简单购物车功能
2020/12/13 Vue.js
python继承和抽象类的实现方法
2015/01/14 Python
Python 实现简单的电话本功能
2015/08/09 Python
python安装教程
2018/02/28 Python
django 开发忘记密码通过邮箱找回功能示例
2018/04/17 Python
python迭代dict的key和value的方法
2018/07/06 Python
python正则表达式之对号入座篇
2018/07/24 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
python 遗传算法求函数极值的实现代码
2020/02/11 Python
200行python代码实现贪吃蛇游戏
2020/04/24 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
matplotlib.pyplot.plot()参数使用详解
2020/07/28 Python
Python3 用什么IDE开发工具比较好
2020/11/28 Python
python中time包实例详解
2021/02/02 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
瑜伽灵感珠宝:Satya Jewelry
2018/01/06 全球购物
世界上最好的旅行夹克:BauBax
2018/12/23 全球购物
离婚协议书怎么写
2015/01/26 职场文书
2016春季田径运动会广播稿
2015/12/21 职场文书
应届毕业生的自我评价
2019/06/21 职场文书
导游词之海南-南湾猴岛
2019/10/12 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python