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 相关文章推荐
JObj预览一个JS的框架
Mar 13 Javascript
javascript XMLHttpRequest对象全面剖析
Apr 24 Javascript
使用jQuery实现星级评分代码分享
Dec 09 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
浅谈Javascript事件对象
Feb 05 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
vue中本地静态图片路径写法
Mar 06 Javascript
深入理解Vue nextTick 机制
Apr 28 Javascript
微信小程序实现滚动加载更多的代码
Dec 06 Javascript
Vue的Options用法说明
Aug 14 Javascript
详解如何使用Node.js实现热重载页面
May 06 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
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
php 检查电子邮件函数(自写)
2014/01/16 PHP
php静态文件返回304技巧分享
2015/01/06 PHP
PHP 使用redis简单示例分享
2015/03/05 PHP
PHP的命令行命令使用指南
2015/08/18 PHP
深入分析js中的constructor和prototype
2012/04/07 Javascript
javascript跑马灯悬停放大效果实现代码
2012/12/12 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
百度地图API之本地搜索与范围搜索
2015/07/30 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
浅析AngularJS Filter用法
2015/12/28 Javascript
vue-cli webpack2项目打包优化分享
2018/02/07 Javascript
vue2 全局变量的设置方法
2018/03/09 Javascript
react build 后打包发布总结
2018/08/24 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
用Python给文本创立向量空间模型的教程
2015/04/23 Python
Django Admin实现上传图片校验功能
2016/03/06 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
python 获取页面表格数据存放到csv中的方法
2018/12/26 Python
Python实现九宫格式的朋友圈功能内附“马云”朋友圈
2019/05/07 Python
django ManyToManyField多对多关系的实例详解
2019/08/09 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Python中if有多个条件处理方法
2020/02/26 Python
python实现录屏功能(亲测好用)
2020/03/02 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
五款漂亮的纯CSS3动画按钮的实例教程
2014/11/21 HTML / CSS
HTML5新特性 多线程(Worker SharedWorker)
2017/04/24 HTML / CSS
高三英语教学反思
2014/01/13 职场文书
学生党员检讨书范文
2014/12/27 职场文书
奖励通知
2015/04/22 职场文书
八月迷情观后感
2015/06/11 职场文书
导游词幽默开场白
2019/06/26 职场文书
成人成长感言如何写?
2019/08/16 职场文书