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 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
nodeType属性返回被选节点的节点类型介绍
Nov 22 Javascript
javascript将DOM节点添加到文档的方法实例分析
Aug 04 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
easyui-datagrid特殊字符不能显示的处理方法
Apr 12 Javascript
vue 项目 iOS WKWebView 加载
Apr 17 Javascript
小程序实现搜索框功能
Mar 26 Javascript
JavaScript函数重载操作实例浅析
May 02 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
JavaScript 绘制饼图的示例
Feb 19 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
PHP4引用文件语句的对比
2006/10/09 PHP
一个用于网络的工具函数库
2006/10/09 PHP
php实现rc4加密算法代码
2012/04/25 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
Jquery iframe内部出滚动条
2010/02/11 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
jQuery循环动画与获取组件尺寸的方法
2015/02/02 Javascript
基于JavaScript实现简单的随机抽奖小程序
2016/01/05 Javascript
javascript正则表达式定义(语法)总结
2016/01/08 Javascript
Bootstrap进度条组件知识详解
2016/05/01 Javascript
JavaScript提高网站性能优化的建议(二)
2016/07/24 Javascript
深入理解Vuex 模块化(module)
2017/09/26 Javascript
vue改变对象或数组时的刷新机制的方法总结
2019/04/24 Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
2019/06/24 Javascript
vue-cli3跨域配置的简单方法
2019/09/06 Javascript
js之切换全屏和退出全屏实现代码实例
2019/09/09 Javascript
微信小程序点击view动态添加样式过程解析
2020/01/21 Javascript
vue中实现图片压缩 file文件的方法
2020/05/28 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
python模拟点击在ios中实现的实例讲解
2020/11/26 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
美国最大的团购网站:Groupon
2016/07/23 全球购物
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
数字漫画:comiXology
2020/06/13 全球购物
利达恒信公司.NET笔试题面试题
2016/03/05 面试题
厨房工作人员岗位职责
2013/11/15 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
2015年汽车销售工作总结
2015/04/07 职场文书
大国崛起日本观后感
2015/06/02 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
简短的人生哲理(38句)
2019/08/13 职场文书
Java移除无效括号的方法实现
2021/08/07 Java/Android
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript