vue使用video插件vue-video-player详解


Posted in Javascript onOctober 23, 2020

本文实例为大家分享了vue使用video插件vue-video-player的具体代码,供大家参考,具体内容如下

进入我们的项目文件夹中,并打开命令行窗口,然后进行下面的步骤:

1、安装vue-video-player

输入命令:

npm install vue-video-player -S

2、引入插件

在项目的入口文件main.js中引入插件,如下:

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer)

3、使用插件

创建vue组件文件VideoPlayer.vue,文件内容如下:

<template>
 <div>
  <!-- 使用组件 -->
  <video-player class="video-player vjs-custom-skin"
   ref="videoPlayer"
   :playsinline="true"
   :options="playerOptions"
  ></video-player>
 </div>
</template>

<script>
// 导入组件
import {videoPlayer} from 'vue-video-player'
import 'videojs-flash'

export default {
 name: 'VideoPlayer',
 components: {
 videoPlayer
 },
 data () {
 return {
 fileAreaHeight: 100,
 fileType: 'mp4', // 资源的类型
 fileUrl: 'xxx' // 资源的路径地址
 }
 },
 computed: {
  playerOptions () { // 使用计算属性
  const playerOptionsObj = {
   techOrder: ['flash'], // 使用flase播放,可以播放flv格式的文件
   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:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
   fluid: false, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
   sources: [{
   type: 'video/' + this.fileType, // 资源格式写法:'video/mp4',否则控制台会出现notSupportedMessage设置的错误
   src: this.fileUrl // url地址
   }],
   poster: '', // 你的封面地址
   // width: document.documentElement.clientWidth,
   height: this.fileAreaHeight, // 设置高度,fluid需要设置成flase
   notSupportedMessage: '此视频暂无法播放...', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
   controlBar: {
   timeDivider: true,
   durationDisplay: true,
   remainingTimeDisplay: false,
   fullscreenToggle: true //全屏按钮
   }
  }
  return playerOptionsObj
  }
 }
}
</script>
<style scoped>
.video-js .vjs-big-play-button{ /*对播放按钮的样式进行设置*/ }
</style>

注:

如果在VideoPlayer.vue中不导入组件,则会报如下错误:

vue使用video插件vue-video-player详解

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

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

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

Javascript 相关文章推荐
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
jquery层级选择器的实现(匹配后代元素div)
Sep 05 Javascript
js入门之Function函数的使用方法【新手必看】
Nov 22 Javascript
jquery mobile实现可折叠的导航按钮
Mar 11 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
JS 设置Cookie 有效期 检测cookie
Jun 15 Javascript
基于JavaScript实现表格滚动分页
Nov 22 Javascript
解决vue props 拿不到值的问题
Sep 11 Javascript
JavaScript中常用的简洁高级技巧总结
Mar 10 Javascript
一篇文章带你从零快速上手Rollup
Sep 07 Javascript
javascript实现智能手环时间显示
Sep 18 Javascript
vue-video-player视频播放器使用配置详解
Oct 23 #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
You might like
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
PHP二进制与字符串之间的相互转换教程
2016/10/14 PHP
jquery json 实例代码
2010/12/02 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
JavaScript打印iframe内容示例代码
2013/08/20 Javascript
详解JavaScript中undefined与null的区别
2014/03/29 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
jQuery提示插件alertify使用指南
2015/04/21 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
2015/08/27 Javascript
JS实现样式清新的横排下拉菜单效果
2015/10/09 Javascript
js实现滚动条滚动到页面底部继续加载
2015/12/19 Javascript
jquery判断页面网址是否有效的两种方法
2016/12/11 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
微信小程序如何获取手机验证码
2018/11/04 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
python实现协同过滤推荐算法完整代码示例
2017/12/15 Python
python之matplotlib学习绘制动态更新图实例代码
2018/01/23 Python
浅谈django 重载str 方法
2020/05/19 Python
keras分类之二分类实例(Cat and dog)
2020/07/09 Python
DeinDesign德国:设计自己的手机壳
2019/12/14 全球购物
JSF面试题:如何管量web层中的Bean,用什么标签。如何通过jsp页面与Bean绑定在一起进行处理?
2012/10/05 面试题
幼儿园教师教育感言
2014/02/28 职场文书
2014年元旦感言
2014/03/06 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
详解JVM系列之内存模型
2021/06/10 Javascript
如何正确理解python装饰器
2021/06/15 Python
Python之matplotlib绘制饼图
2022/04/13 Python
vue使用watch监听属性变化
2022/04/30 Vue.js
springcloud整合seata
2022/05/20 Java/Android
利用Python实时获取steam特惠游戏数据
2022/06/25 Python