纯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(‘<span></span>’);  方法里添加一些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

音量变化时