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 相关文章推荐
JS 用6N±1法求素数 实例教程
Oct 20 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
javascript验证身份证完全方法具体实现
Nov 18 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
动态加载js的方法汇总
Feb 13 Javascript
浅谈Jquery为元素绑定事件
Apr 27 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
使用JavaScript实现点击循环切换图片效果
Sep 03 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
移动端自适应flexible.js的使用方法(不用三大框架,仅写一个单html页面使用)推荐
Apr 02 Javascript
Vue使用zTree插件封装树组件操作示例
Apr 25 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
留言板翻页的实现详解
2006/10/09 PHP
php程序的国际化实现方法(利用gettext)
2011/08/14 PHP
php数组合并的二种方法
2014/03/21 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
jQuery常见开发技巧详细整理
2013/01/02 Javascript
使用JQuery库提供的扩展功能实现自定义方法
2014/09/09 Javascript
详谈JavaScript 匿名函数及闭包
2014/11/14 Javascript
Javascript中prototype属性实现给内置对象添加新的方法
2015/05/14 Javascript
Bootstrap每天必学之下拉菜单
2015/11/25 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
拥Bootstrap入怀——导航栏篇
2016/05/30 Javascript
Webpack+Vue如何导入Jquery和Jquery的第三方插件
2017/02/20 Javascript
Vue监听数据对象变化源码
2017/03/09 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
原生js实现可兼容PC和移动端的拖动滑块功能详解【测试可用】
2019/08/15 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
js实现随机点名器精简版
2020/06/29 Javascript
Python中用Spark模块的使用教程
2015/04/13 Python
Python PyQt4实现QQ抽屉效果
2018/04/20 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
Python面向对象之Web静态服务器
2019/09/03 Python
python中的错误如何查看
2020/07/08 Python
Python 中Operator模块的使用
2021/01/30 Python
CSS3 2D模拟实现摩天轮旋转效果
2016/11/16 HTML / CSS
HTML5之web workers_动力节点Java学院整理
2017/07/17 HTML / CSS
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
学校招生宣传广告词
2014/03/19 职场文书
学校火灾防控方案
2014/06/09 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
新闻稿格式范文
2015/07/18 职场文书
安全教育主题班会教案
2015/08/12 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
创业计划书之烤红薯
2019/09/26 职场文书
MySQL连接控制插件介绍
2021/09/25 MySQL