纯JS 打造HTML5+APP 专属 VIDEO 视频播放器,支持记忆续播和缓冲进度条 ,支持 android/ios/web
纯JS改写 video 支持Android / IOS /WEB 三端播放。
支持播放视频格式：
| .mp4 | .webm | .m3u8 |
|---|---|---|
| .mpd | .flv |
基础功能：
5+APP为什么要使用HTML5 视频播放器？，主要为了更方便在视频表层添加任何图标或物品也方便对播放器样式改造，进行相关操作，相对原生视频播放器，要在视频层添加图标就困难多了。
扫一扫下载 安卓 DEMO 示例 体验, 或者电脑下载
目前支持两种全屏模式：1. 假全屏-弹出视频播放框保持竖屏，2. 强制横屏-就是通常说的全屏，强制横屏播放。
如何使用：
1. 引入视频的样式
<link href="videoStyleBlue.css" rel="stylesheet"/>
2. 引入相关3个必须的JS 文件
<script src="js/mui.min.js">script> //MUI 框架
<script src="js/mediaeplayer.js">script> // 支持视频播放优化插件
<script src="js/AppH5Video.js">script> //视频插件，控制各项操作
3. 添加一个video 标签在所需的位置上
<video id="player" style="max-width:100%;display: none;" preload="none" controls playsinline webkit-playsinline>
4. 初始化视频插件
var player=new AppH5Video("player",{});
插件参数
| 名称 | 说明 |
|---|---|
| autoplay | 是否自动播放视频,默认: fasle |
| showfull | 是否显示全屏按钮,默认: true |
| fakefull | 是否开启假全屏模式 ,默认: false |
| loop | 是否循环媒体,默认: false |
| back | 是否显示返回键,默认: true |
| drag | 是否开启左右滑动快进后退功能,默认: true |
插件方法
| 名称 | 说明 |
|---|---|
| setPlay() | 设置视频播放 player.setPlay({ src:"", //视频链接 poster:"" //封面链接 title:"", //视频标题 duration:"", // 视频总时间格式 00:00 memoryVideoID:"" // 记忆续播的视频ID ，留空则不记录 } ); |
| innerHTML() | 可以在 player.innerHTML(‘’); 方法里添加一些HTML 内容，例如需要在视频层添加一些图标或物件， 为了方便视频播放时统一显示或隐藏的需要。 |
| setloading() | 设置加载框显示或隐藏，在ajax 加载的时候可以控制显示或隐藏 true /false |
| next() | 下一个 按键事件 player.next(function(){ }); |
| last() | 上一个 按键事件 player.last(function(){ }); |
| nextButState() | 设置下一个按键 显示或隐藏 true /false |
| lastButState() | 设置上一个按键 显示或隐藏 true /false |
| hide() | 该方法隐藏视频表层相关物件 |
| orientation() | 监听视频横竖屏状态 player.rientation(function() { //横屏 },function(){ //竖屏 }); |
| Video() | var video=player.Video(); 返回一个video 对象，它和实质video 标签一样 |
监听事件
| 名称 | 说明 |
|---|---|
| loadedmetadata | 加载数据，视频就绪时执行 |
| progress | 正在获取媒体数据 |
| timeupdate | 播放位置改变时 |
| seeking | 表示已开始搜索 |
| seeked | 表示搜索已结束 |
| canplay | 当缓冲已足够开始时 |
| play | 媒体准备好开始播放 |
| playing | 媒体已经播放 |
| pause | 用户暂停或以编程方式暂停 |
| ended | 媒体结束时 |
| volumechange | 音量变化时 |
详情内容可浏览： http://www.html5-app.com/show/115
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！