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 相关文章推荐
[转]JS宝典学习笔记
Feb 07 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
Nov 12 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
Sep 04 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
微信小程序 跳转方式总结
Apr 20 Javascript
使用Webpack提高Vue.js应用的方式汇总(四种)
Jul 10 Javascript
基于vue配置axios的方法步骤
Nov 09 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 Javascript
vue实现扫码功能
Jan 17 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入门速成教程
2007/03/19 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
php读取文件内容至字符串中,同时去除换行、空行、行首行尾空格(Zjmainstay原创)
2012/07/31 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(六)
2014/06/23 PHP
php使用curl通过代理获取数据的实现方法
2016/05/16 PHP
php进程(线程)通信基础之System V共享内存简单实例分析
2019/11/09 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
滚动条变色 隐藏滚动条与双击网页自动滚屏显示代码
2009/12/28 Javascript
iphone safari不支持position fixed的解决方法
2012/05/04 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
2013/08/07 Javascript
JS 在指定数组中随机取出N个不重复的数据
2014/06/10 Javascript
关于JavaScript作用域你想知道的一切
2016/02/04 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
js实现符合国情的日期插件详解
2017/01/19 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
vue cli 3.0 搭建项目的图文教程
2019/05/17 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
react实现移动端下拉菜单的示例代码
2020/01/16 Javascript
详解ES6 中的Object.assign()的用法实例代码
2021/01/11 Javascript
[05:45]Ti4观战指南(下)
2014/07/07 DOTA
[01:17]辉夜杯战队访谈宣传片—EHOME
2015/12/25 DOTA
如何理解python中数字列表
2020/05/29 Python
pycharm设置默认的UTF-8编码模式的方法详解
2020/06/01 Python
详解python算法常用技巧与内置库
2020/10/17 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
世界上最大的家庭自动化公司:Smarthome
2017/12/20 全球购物
施工安全标语
2014/06/07 职场文书
路政管理求职信
2014/06/18 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
我的长征观后感
2015/06/09 职场文书
vue-cli3.x配置全局的scss的时候报错问题及解决
2022/04/30 Vue.js