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

本文链接：https://blog.csdn.net/u011861287/article/details/88324109

纯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	音量变化时