vue aplayer 进度条无法拖动_Vue-rideo-player视频播放插件的使用

***** git项目地址： https://github.com/surmon-china/vue-video-player

***** 参考文章： https://www.jianshu.com/p/532fc1d8c90c

使用

安装：

npm install vue-video-player --save

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)

这里需要注意，我们如果按照官网上的方式如上代码所示引入，会报错找不到

video.js/dist/video-js.css（反正我用的时候没有报错）
这里我们只需要将引入video-js.css的路径改为vue-video-player/node_modules/video.js/dist/video-js.css。
如：require('vue-video-player/node_modules/video.js/dist/video-js.css')。

3. 在页面中引用

<video-player class="video-player"ref="videoPlayer":playsliline="true":options="playerOptions">
</video-player>

4. 配置数据

playerOptions: {playbackRates: [0.7,1.0,1.5,2.0], //播放速度autoplay： false，//如果true，浏览器准备好时自动开始播放muted： flase，//默认情况下将会消除任何音频loop： false，//导致视频一结束就重新开始preload： 'auto', //language：'zh-CN',aspectRatio: '16:9', //将播放器至于流畅模式，并在计算播放器动态大小时使用该值fluid： true， //当true时，Video.js player将拥有流体大小，按比例适应其容器source： [{type: "",  //播放视频种类： 基本视频格式、直播、流媒体等src： "", //视频的url地址}]poster: "../../static/images/test.jpg", //你的封面地址notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。controlBar: {timeDivider: true,  //进度条durationDisplay: true,remainingTimeDisplay: false,fullscreenToggle: true  //全屏按钮}
}}

5. 具体其他的按^[1]钮样式可以在外部css中设置

如：
// 调整播放器样式
.video-js .vjs-icon-placeholder {width: 100%;height: 100%;display: block;
}

6. 效果图

效果图1

效果图2

效果图3

参考

^参考文章 https://www.jianshu.com/p/532fc1d8c90c

vue aplayer 进度条无法拖动_Vue-rideo-player视频播放插件的使用相关推荐

vue aplayer 进度条无法拖动_为 Vue 的惰性加载加一个进度条
// 每日前端夜话第412篇// 正文共:1800 字// 预计阅读时间:8 分钟简介通常用 Vue.js 编写单页应用(SPA)时,当加载页面时,所有必需的资源(如 JavaScript 和 ...
vue aplayer 进度条无法拖动_「最近项目小结」使用Vue实现一个简单的鼠标拖拽滚动效果插件...
演示事例 http://www.longstudy.club/vue-drag-scroll/index.html 最近在做一个新的项目,有个需求是这样的: 简单描述一下,就是鼠标拖动页面,整个页面会 ...
vue+vue-video-player进度条拖动及断续播放
vue-video-player是一款视频播放插件,具体怎么引入vue-video-player 直接点进去有详细的介绍. 项目中视频可以正常播放,但是不能拖动进度条,拖动进度条就会从头开始,解决办法 ...
vue中进度条写法_vue组件实现进度条效果
这篇文章主要为大家详细介绍了vue组件实现进度条效果,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 本文实例为大家分享了vue实现进度条效果的具 ...
Android小项目之--前台界面与用户交互的对接进度条与拖动条（附源码）
都知道水果公司(苹果)是己尊重用户体验著称的公司,其设计的产品人性化十足,不得不令后来者赞叹,竞相模仿.iphone的成功就是其典型的案例,做为其移动系统的死对头 Google 想要在市场上分得一杯羹 ...
Linux 基于QT的mplayer视频播放器（实现进度条的拖动、播放列表等）
UI随手做的,有点简陋先放效果图: 功能:实现了音量的进度条,播放进度条,播放暂停,停止,快进快退等等,并且界面可以跟随窗口缩放.(进度条可拖动控制视频.音频) 下面界面视频的功能: 1.播放用m ...
vue 环形进度条组件封装
子组件circle: <template><div :style="svgStyle"><svg :style="svgStyle" ...
vue实现进度条隐藏_Vue 中使用 NProgress 实现进度条
简介:NProgress 是浏览器加载时,出现在浏览器顶部的进度条. 文章目录: 一.NProgress 安装二.NProgress 使用三.NProgress 配置四.Vue 中修改进度条颜色 ...
vue中进度条写法_vue实现简单loading进度条
jq进度条 0% $(function () { var html = $('.meter'); var htmlW = $('.meter').val(); var styleW = parseIn ...

vue aplayer 进度条无法拖动_Vue-rideo-player视频播放插件的使用

使用

参考

vue aplayer 进度条无法拖动_Vue-rideo-player视频播放插件的使用相关推荐

最新文章

热门文章