基础开发工具: HBuilder X
纯JS改写 video 支持 Android / IOS 播放。
支持播放视频格式:.mp4 .webm .m3u8 .mpd .flv
基础功能:
支持: 左右滑动快进退、缓冲进度条、记忆续播、 上下视频按键播放 ,假全屏、强制横屏全屏,音量调节和亮度调节, 支持自由修改样式
5+APP为什么要使用HTML5 视频播放器?,主要为了更方便在视频表层添加任何图标或物品也方便对播放器样式改造,进行相关操作,相对原生视频播放器,要在视频层添加图标就困难多了。
扫一扫下载 安卓 DEMO 示例 体验, 或者电脑下载
目前支持两种全屏模式:1. 假全屏-强出视频播放框保持竖屏,2. 强制横屏-就是通常说的全屏,强制横屏播放。
如何使用:
- 引入视频的样式
<link href="videoStyleBlue.css" rel="stylesheet"/>
-
引入相关3个必须的JS 文件
<script src="js/mui.min.js"></script> //MUI 框架 <script src="js/mediaeplayer.js"></script> // 支持视频播放优化插件 <script src="js/AppH5Video.js"></script> //视频插件,控制各项操作
-
添加一个video 标签在所需的位置上
<video id="player" style="max-width:100%;display: none;" preload="none" controls playsinline webkit-playsinline>
-
初始化视频插件
var player=new AppH5Video("player",{});
插件参数
autoplay: 是否自动播放视频,默认: fasle
showfull : 是否显示全屏按钮,默认: true
fakefull : 是否开启假全屏模式 ,默认: false
loop : 是否循环媒体,默认: false
back : 是否显示返回键,默认: true
drag: 是否开启左右滑动快进后退功能,默认: true
28 个评论
要回复文章请先登录或注册
王者地带 (作者)
即时通讯开发
圣斗士
6***@qq.com
t***@qq.com
1***@qq.com
Lings
6***@qq.com
5***@qq.com
2***@qq.com