王者地带
王者地带
  • 发布:2019-03-07 18:30
  • 更新:2022-07-29 11:18
  • 阅读:10547

纯JS 打造HTML5+APP 专属 VIDEO 视频播放器,支持记忆续播 和 缓冲进度条 ,音量调节和亮度调节,支持 Android/ios

分类:MUI

基础开发工具: HBuilder X

纯JS改写 video 支持 Android / IOS 播放。

支持播放视频格式:.mp4 .webm .m3u8 .mpd .flv

基础功能:

 支持: 左右滑动快进退、缓冲进度条、记忆续播、 上下视频按键播放 ,假全屏、强制横屏全屏,音量调节和亮度调节,  支持自由修改样式

5+APP为什么要使用HTML5 视频播放器?,主要为了更方便在视频表层添加任何图标或物品也方便对播放器样式改造,进行相关操作,相对原生视频播放器,要在视频层添加图标就困难多了。

http://www.html5-app.com/uploads/file/20190307/20190307015130536845.jpg

http://www.html5-app.com/uploads/file/20190307/20190307172355597386.gif

http://www.html5-app.com/uploads/file/20190307/20190307172436572807.png

扫一扫下载 安卓 DEMO 示例 体验, 或者电脑下载

http://www.html5-app.com/uploads/file/20190308/20190308053247332872.jpg

目前支持两种全屏模式:1. 假全屏-强出视频播放框保持竖屏,2. 强制横屏-就是通常说的全屏,强制横屏播放。

http://www.html5-app.com/uploads/file/20190307/20190307021341598893.jpg

如何使用:

  1. 引入视频的样式
<link href="videoStyleBlue.css" rel="stylesheet"/>
  1. 引入相关3个必须的JS 文件

    <script src="js/mui.min.js"></script> //MUI 框架  
    <script src="js/mediaeplayer.js"></script> // 支持视频播放优化插件  
    <script src="js/AppH5Video.js"></script> //视频插件,控制各项操作
  2. 添加一个video 标签在所需的位置上

    <video id="player" style="max-width:100%;display: none;"   preload="none"  controls playsinline webkit-playsinline>
  3. 初始化视频插件

    var player=new AppH5Video("player",{}); 

插件参数

autoplay: 是否自动播放视频,默认: fasle
showfull : 是否显示全屏按钮,默认: true
fakefull : 是否开启假全屏模式 ,默认: false
loop : 是否循环媒体,默认: false
back : 是否显示返回键,默认: true
drag: 是否开启左右滑动快进后退功能,默认: true

详情内容浏览:
http://www.html5-app.com/show/115

13 关注 分享
暮雪骄阳 2***@qq.com 1***@qq.com 阿落 k***@126.com miskss 9***@qq.com 9***@qq.com 2***@qq.com 1***@qq.com 全栈工程师 不光头的程序猿 t***@qq.com

要回复文章请先登录注册

王者地带

王者地带 (作者)

回复 即时通讯开发 :
这个html 已弃用,建议使用uniapp 自带的视频播放
2022-07-29 11:18
即时通讯开发

即时通讯开发

支持getUserMedia 的视频流吗
2022-07-28 17:47
圣斗士

圣斗士

iOS 播放有问题,一直在加载, 不能自动播放
2020-09-02 15:58
6***@qq.com

6***@qq.com

h5下,支持控制进度条吗,有些项目是要统计学时,就要禁用进度条
2020-08-31 13:20
t***@qq.com

t***@qq.com

这个h5+ 已经是 很久的h5+ sdk了,希望重新打包一个新的版本
2020-08-31 12:42
1***@qq.com

1***@qq.com

怎么只有声音没有画面,是什么原因
2020-05-12 16:23
Lings

Lings

求解强制横屏播放怎么做的
2020-05-10 01:37
6***@qq.com

6***@qq.com

叼的很 .
2020-04-16 09:09
5***@qq.com

5***@qq.com

不错,可以研究一下
2020-04-16 08:51
2***@qq.com

2***@qq.com

老哥, 有Github地址嘛
2020-04-16 08:41