js调用android播放器,纯JS 打造HTML5+APP 专属 VIDEO 视频播放器,支持记忆续播和缓冲进度条 ,支持 android/ios/web...

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

支持播放视频格式:

.mp4

.webm

.m3u8

.mpd

.flv

基础功能:

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

1af5535a3ae232f29972a4b0097339f3.png

b678c487f012b57270f71b233dbdaa3d.gif                        

663760.html

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

8266c75a67c82b7e8875f19a65a1dd63.png

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

17a5785801c845110ee786b305475d99.png

如何使用:

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

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值