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 相关文章推荐
List Installed Hot Fixes
Jun 12 Javascript
基于jQuery UI CSS Framework开发Widget的经验
Aug 21 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
html+javascript+bootstrap实现层级多选框全层全选和多选功能
Mar 09 Javascript
javascript使用btoa和atob来进行Base64转码和解码
Mar 20 Javascript
JS实现提交表单前的数字及邮箱校检功能
Nov 13 Javascript
webpack里使用jquery.mCustomScrollbar插件的方法
May 30 jQuery
vue组件间通信六种方式(总结篇)
May 15 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
判断JavaScript中的两个变量是否相等的操作符
Dec 21 Javascript
JavaScript浅层克隆与深度克隆示例详解
Sep 01 Javascript
原生js实现无缝轮播图效果
Jan 28 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开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
Yii框架实现邮箱激活的方法【数字签名】
2016/10/18 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
锋利的jQuery 要点归纳(一) jQuery选择器
2010/03/21 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
JS获取客户端IP地址、MAC和主机名的7个方法汇总
2014/07/21 Javascript
多个checkbox被选中时如何判断是否有自己想要的
2014/09/22 Javascript
程序员必知35个jQuery 代码片段
2015/11/05 Javascript
JavaScript File分段上传
2016/03/10 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
2016/10/10 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
2016/11/26 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
JS实现元素上下左右移动效果
2017/10/18 Javascript
动手写一个angular版本的Message组件的方法
2017/12/16 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
python实现支付宝当面付(扫码支付)功能
2018/05/30 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
利用python实现周期财务统计可视化
2019/08/25 Python
Dyson加拿大官方网站:购买戴森吸尘器,风扇,冷热器及配件
2016/10/26 全球购物
加拿大的标志性百货公司:Hudson’s Bay(哈得逊湾)
2019/09/03 全球购物
Vrbo西班牙:预订您的度假公寓(公寓、乡村房屋…)
2020/04/27 全球购物
教师试用期自我鉴定
2014/02/12 职场文书
小区推广策划方案
2014/06/06 职场文书
美化环境标语
2014/06/20 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
升学宴答谢词
2015/01/05 职场文书
小学语文教学随笔
2015/08/14 职场文书
python实现简单反弹球游戏
2021/04/12 Python
python基础之爬虫入门
2021/05/10 Python
警用民用对讲机找不同
2022/02/18 无线电