适用于 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实现轮显新闻标题链接
Aug 13 Javascript
JavaScript CSS修改学习第一章 查找位置
Feb 19 Javascript
ExtJS GridPanel 根据条件改变字体颜色
Mar 08 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
JavaScript的String字符串对象常用操作总结
May 26 Javascript
JavaScript中Math对象的方法介绍
Jan 05 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 Javascript
详解 javascript对象创建模式
Oct 30 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
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
laravel获取不到session的三种解决办法【推荐】
2018/09/16 PHP
通过JAVASCRIPT读取ASP设定的COOKIE
2006/11/24 Javascript
利用javascript的面向对象的特性实现限制试用期
2011/08/04 Javascript
JS window对象的top、parent、opener含义介绍
2013/12/03 Javascript
js用typeof方法判断undefined类型
2014/07/15 Javascript
jquery实现简单的无缝滚动
2015/04/15 Javascript
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
jquery属性,遍历,HTML操作方法详解
2016/09/17 Javascript
基于javascript的Form表单验证
2016/12/29 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
vue2.0在table中实现全选和反选的示例代码
2017/11/04 Javascript
微信小程序实现分享朋友圈的图片功能示例
2019/01/18 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
小程序中使用css var变量(使js可以动态设置css样式属性)
2020/03/31 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
python生成随机mac地址的方法
2015/03/16 Python
利用Python获取赶集网招聘信息前篇
2016/04/18 Python
Python subprocess库的使用详解
2018/10/26 Python
Python实现定期检查源目录与备份目录的差异并进行备份功能示例
2019/02/27 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
python爬取音频下载的示例代码
2020/10/19 Python
关于css兼容性问题及一些常见问题汇总
2016/05/03 HTML / CSS
阿里巴巴的Oracle DBA笔试题答案-SQL tuning类
2016/04/03 面试题
接待员岗位责任制
2014/02/10 职场文书
2015年公务员个人工作总结
2015/04/24 职场文书
2016年教师新年寄语
2015/08/18 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python