适用于 Vue 的播放器组件Vue-Video-Player操作


Posted in Javascript onNovember 16, 2020

如果h5的标签<vedio>不能满足你的需求,那就用这个组件Vue-Video-Player吧,也许可以覆盖到你的需求。

<video-player
   class="video-player vjs-custom-skin"
   ref="videoPlayer"
   :playsinline="true"
   :options="playerOptions"
></video-player>

配置参数:

playerOptions: {
    height: 400,
    playbackRates: [0.7, 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: "video/mp4", // 这里的种类支持很多种:基本视频格式、直播、流媒体等,具体可以参看git网址项目
      src: require("@/assets/vedio.mp4") // url地址
     }
    ],
    poster: require("@/assets/poster.png"), // 你的封面地址
    // width: document.documentElement.clientWidth, //播放器宽度
    notSupportedMessage: "此视频暂无法播放,请稍后再试", // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
    controlBar: {
     timeDivider: true,
     durationDisplay: true,
     remainingTimeDisplay: false,
     fullscreenToggle: true // 全屏按钮
    }
   },

具体使用自行查阅,附上链接

https://www.npmjs.com/package/vue-video-player

补充知识:vue 关于在安卓低版本下空白页

上网搜索了好些原因都没解决,猜测是哪部分代码不兼容,最后注释代码一步步排查原因

然后发现是swiper的锅,我们用的高版本5.3.6的版本,应该是安卓低版本不兼容swiper5的es6或es7高级语法

后面回退到3.4.2版本,成功解决

总结:

以后要注意各种插件版本的兼容性

以上这篇适用于 Vue 的播放器组件Vue-Video-Player操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 面向对象 function类
May 13 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
再论Javascript下字符串连接的性能
Mar 05 Javascript
JS高级笔记
Jul 13 Javascript
解析javascript 数组以及json元素的添加删除
Jun 26 Javascript
js操作label给label赋值及取label的值示例
Nov 07 Javascript
Javascript中的Array数组对象详谈
Mar 03 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
浅谈jquery的html方法里包含特殊字符的处理
Nov 30 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
Jul 12 Javascript
js自定义input文件上传样式
Oct 26 Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 #Javascript
Vue 数据绑定的原理分析
Nov 16 #Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 #Javascript
Vue指令实现OutClick的示例
Nov 16 #Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 #Javascript
vue组件中传值EventBus的使用及注意事项说明
Nov 16 #Javascript
小程序自定义弹框效果
Nov 16 #Javascript
You might like
PHP4之COOKIE支持详解
2006/10/09 PHP
什么是MVC,好东西啊
2007/05/03 PHP
php 删除无限级目录与文件代码共享
2008/11/22 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
javascript 全等号运算符使用说明
2010/05/31 Javascript
深入理解jQuery中live与bind方法的区别
2013/12/18 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
js实现鼠标触发图片抖动效果的方法
2015/02/27 Javascript
JQuery悬停控制图片轮播——代码简单
2015/08/05 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
深入理解Angular中的依赖注入
2017/06/26 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
简述vue中的config配置
2018/01/23 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
Python实现Tab自动补全和历史命令管理的方法
2015/03/12 Python
探究Python多进程编程下线程之间变量的共享问题
2015/05/05 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
Django框架的中的setting.py文件说明详解
2018/10/15 Python
老生常谈python中的重载
2018/11/11 Python
python中selenium操作下拉滚动条的几种方法汇总
2019/07/14 Python
解析python 类方法、对象方法、静态方法
2020/08/15 Python
使用CSS3实现圆角,阴影,透明
2014/12/23 HTML / CSS
运动会广播稿200米
2014/01/27 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
《纸船和风筝》教学反思
2016/02/18 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
Python爬虫框架之Scrapy中Spider的用法
2021/06/28 Python