纯JS改写 video 支持Android / IOS /WEB三端播放。
支持播放视频格式:
.mp4
.webm
.m3u8
.mpd
.flv
基础功能:
5+APP为什么要使用HTML5 视频播放器?,主要为了更方便在视频表层添加任何图标或物品也方便对播放器样式改造,进行相关操作,相对原生视频播放器,要在视频层添加图标就困难多了。
扫一扫下载 安卓 DEMO 示例 体验, 或者电脑下载
目前支持两种全屏模式:1. 假全屏-弹出视频播放框保持竖屏,2. 强制横屏-就是通常说的全屏,强制横屏播放。
如何使用:
1. 引入视频的样式
2. 引入相关3个必须的JS 文件
//MUI 框架
// 支持视频播放优化插件
//视频插件,控制各项操作
3. 添加一个video 标签在所需的位置上
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