vue使用video插件vue-video-player的示例


Posted in Javascript onOctober 03, 2020

一、安装插件

npm install vue-video-player --save

二、配置插件

在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)

三、使用插件

在vue组件中的程序如下:

<template>
  <!--在视频外面加一个容器-->
  <div class="input_video">
  <video-player class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions"
  ></video-player>
  </div>
</template>
<script>
  export default {
    name : 'BusImg',
    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 : "",
            src : 'http://www.html5videoplayer.net/videos/madagascar3.mp4'//url地址
          } ],
          poster : "", //你的封面地址
          // width: document.documentElement.clientWidth,
          notSupportedMessage : '此视频暂无法播放,请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar : {
            timeDivider : true,//当前时间和持续时间的分隔符
            durationDisplay : true,//显示持续时间
            remainingTimeDisplay : false,//是否显示剩余时间功能
            fullscreenToggle : true //全屏按钮
          }
        }
      }
    }
  }
</script>
<style>
  .input_video{
    width: 400px;
    height: 400px;
    margin: 0 auto;

  }
</style>

四、结果

结果如图所示:

vue使用video插件vue-video-player的示例

vue-video-player的npm社区地址:https://www.npmjs.com/package/vue-video-player

以上就是vue使用video插件vue-video-player的示例的详细内容,更多关于vue使用video插件的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
用javascript编写的第一人称射击游戏
Feb 25 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
Aug 06 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
Angular的自定义指令以及实例
Dec 26 Javascript
JS多文件上传的实例代码
Jan 11 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
May 12 Javascript
vue.js实现只弹一次弹框
Jan 29 Javascript
JS实现判断图片是否加载完成的方法分析
Jul 31 Javascript
vue自定义指令之面板拖拽的实现
Apr 14 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
如何通过vscode运行调试javascript代码
Jul 24 Javascript
区分vue-router的hash和history模式
Oct 03 #Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 #Javascript
Chrome插件开发系列一:弹窗终结者开发实战
Oct 02 #Javascript
js通过canvas生成图片缩略图
Oct 02 #Javascript
JS检测浏览器开发者工具是否打开的方法详解
Oct 02 #Javascript
JavaScript检测是否开启了控制台(F12调试工具)
Oct 02 #Javascript
js屏蔽F12审查元素,禁止修改页面代码等实现代码
Oct 02 #Javascript
You might like
用PHP+MySql编写聊天室
2006/10/09 PHP
安装PHP可能遇到的问题“无法载入mysql扩展” 的解决方法
2007/04/16 PHP
PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
javascript 浏览器检测代码精简版
2010/03/04 Javascript
JSQL  一个 web DB 的封装
2010/05/05 Javascript
JS获取页面窗口大小的代码解读
2011/12/01 Javascript
JavaScript打开word文档的实现代码(c#)
2012/04/16 Javascript
js作用域及作用域链概念理解及使用
2013/04/15 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
深入解析JavaScript的闭包机制
2015/10/20 Javascript
jQuery布局组件EasyUI Layout使用方法详解
2017/02/28 Javascript
微信小程序 跳转方式总结
2017/04/20 Javascript
用vue2.0实现点击选中active其他选项互斥的效果
2018/04/12 Javascript
微信小程序wepy框架学习和使用心得详解
2019/05/24 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
Python语言的12个基础知识点小结
2014/07/10 Python
python传递参数方式小结
2015/04/17 Python
python入门教程之识别验证码
2017/03/04 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
Python入门之三角函数全解【收藏】
2017/11/08 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
文件上传服务器-jupyter 中python解压及压缩方式
2020/04/22 Python
Python退出时强制运行一段代码的实现方法
2020/04/29 Python
英国莱斯特松木橡木家具网上商店:Choice Furniture Superstore
2019/07/05 全球购物
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
英语专业自荐书
2014/06/13 职场文书
实习生工作证明范本
2014/09/14 职场文书
班子四风对照检查材料思想汇报
2014/09/29 职场文书
我的长征观后感
2015/06/09 职场文书
企业反腐倡廉心得体会
2015/08/15 职场文书
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android
国际最新研究在陨石中发现DNA主要成分 或由陨石带来地球
2022/04/29 数码科技