rideo选中 vue_适用于 Vue 的播放器组件Vue-Video-Player操作
如果h5的标签不能满足你的需求,那就用这个组件Vue-Video-Player吧,也许可以覆盖到你的需求。
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
>
配置参数:
playerOptions: {
height: 400,
playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
autoplay: false, // 如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: "auto", // 建议浏览器在加载元素后是否应该开始下载视频数据。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 // 全屏按钮
}
},
具体使用自行查阅,附上链接
补充知识:vue 关于在安卓低版本下空白页
上网搜索了好些原因都没解决,猜测是哪部分代码不兼容,最后注释代码一步步排查原因
然后发现是swiper的锅,我们用的高版本5.3.6的版本,应该是安卓低版本不兼容swiper5的es6或es7高级语法
后面回退到3.4.2版本,成功解决
总结:
以后要注意各种插件版本的兼容性
以上这篇适用于 Vue 的播放器组件Vue-Video-Player操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
rideo选中 vue_适用于 Vue 的播放器组件Vue-Video-Player操作相关推荐
- vue音频播放器组件
因为原生audio 播放器太丑了 重新整理 百度综合完成了播放器, 基于element ui 组件书写的 需要的自取 <template><div class="audio ...
- 微信小程序之网易云音乐(五)- 排行详情页、歌单详情页、播放器组件开发
微信小程序之网易云音乐(五)- 排行详情页.歌单详情页.播放器组件开发 一. 排行详情页模块 二. 歌单详情页模块 三. 播放器组件 微信小程序之网易云音乐导航 一. 排行详情页模块 rank.vue ...
- vue自定义音频播放组件_易于创建Vue的自定义音频播放器组件
vue自定义音频播放组件 音频更好 (vue-audio-better) Easy to create custom audio player components for Vue.js. 易于为Vu ...
- Vue 自定义音乐播放器组件为H5添加背景音乐
自定义音乐播放器组件为H5添加背景音乐: 1.创建music.vue组件 <template><div><div @click="changeOn" ...
- vue 音乐播放器上一首 下一首切换
vue 音乐播放器上一首 下一首切换 根据自定义属性的值找到元素 我是使用监听来实现切换的,将v-for循环列表的index存储在vuex中,点击上一首或下一首改变index的值,在另一个组件中监听i ...
- video网络页面播放器: 组件video-player-vue和video.js 常用库
网页放置视频播放器,一般都是用video.js(h5也使用过)和它的插件vue-video-player: 正常情况下对于简单的视频 video.js够用了,支持H5和flash视频播放: 播放RT ...
- Vue3实现简易的音乐播放器组件
前言 用Vue3实现一个简易的音乐播放器组件 其效果图如下所示: 实现这个组件需要提前做的准备: 引入ElementUI 引入字节跳动图标库 一张唱见图片 将要播放的音乐上传到文件服务器上,并提供一个 ...
- 树莓派全语音控制媒体播放器(Fully Speech-Controlled Media Player)
树莓派全语音控制媒体播放器(Fully Speech-Controlled Media Player) 主要特点: *全程无外设操作,可以在无鼠标键盘显示器等外设的情况下(Headless),完全通过 ...
- uniapp h5直播拉流的几种方法 flv.js, video.js, 阿里播放器sdk,video标签
uniapp h5直播拉流的几种方法 flv.js, video.js, 阿里播放器sdk,video标签 前言 首先引入资源文件 需要创建index.html 模板文件 flv.js video.j ...
最新文章
- HTML5 WebAudioAPI简介(一)
- FPGA之道(29)VHDL的串行语句
- oc-29-可变数组
- 自律到极致-人生才精致:第11期
- WebSocket学习与使用
- Short-Session的推荐如何做?
- java项目功能详情介绍,JAVAEE—spring的详细介绍
- C#LeetCode刷题之#819-最常见的单词(Most Common Word)
- Debug解决问题方法论
- 封装一个操作文件的函数
- 关于时间、日期的一些应用
- PDF转JPG的工具
- 教你制作纯净的,原生的WinPE环境【无桌面无任何添加剂】
- 8款测试HLS m3u8视频流的免费在线播放器
- systemverilog随机函数
- 关于android 使用audiorecord 录制pcm文件 音频速度变快的问题求教
- Chrome插件安装时出现的“程序包无效”问题
- 小萝莉五子棋(高能绕行)
- Android开发唯一的出路:进阶学习,附超全教程文档
- bzoj4605: 崂山白花蛇草水(权值线段树套k-dtree)
热门文章
- typedef 函数指针的用法
- 正儿八经的详细讲java内部类
- 新视野教育计算机题库,校园网.新视野教育计算机等级考试《二级公共基础》课后习题答案...
- java中的解码和编码_关于java中编码和解码(一)
- autofac 作用域_控制作用域和生命周期
- el-date-picker设置默认日期_ERP入门教程:快速掌握金蝶ERP的基础-物料批次管理的应用及设置...
- 学计算机广东2B大学,2017年广东2B大学最新排名情况
- STM32 之十 供电系统及内部参照电压(VREFINT)使用及改善ADC参考电压
- arm交叉编译器gnueabi、none-eabi、arm-eabi等的区别
- OS / linux 内核 read 操作源代码分析