H5多媒体（用面向对象的方法控制视频、音频播放、暂停、延时暂停）

视频，音频播放器会是我们在工作中用到的一些h5新标签，它自带一些属性，比如暂停播放，快进快退，但是，我们经常不用原生的样式或者方法，我们需要自定义这些按钮来达到我们需要的样式，也需要我们自定义来实现一些比如全屏、缩屏、延时暂停等功能，那么今天就主要了解一些他们的相关属性和方法，然后再最后写两个案例。

方法               方法描述

addTextTrack()    为音视频加入一个新的文本轨迹

canPlayType()    检查指定的音视频格式是否得到支持

load()    重新加载音视频标签

play()    播放音视频

pause()    暂停播放当前的音视频

-------------------------

属性           属性描述

audioTracks    返回可用的音轨列表（MultipleTrackList对象）

autoplay    媒体加载后自动播放

buffered    返回缓冲部件的时间范围(TimeRanges对象)

controller    返回当前的媒体控制器（MediaController对象）

controls    显示播控控件

crossOrigin    CORS设置

currentSrc    返回当前媒体的URL

currentTime    当前播放的时间，单位秒

defaultMuted    缺省是否静音

defaultPlaybackRate    播控的缺省倍速

duration    返回媒体的播放总时长，单位秒

ended    返回当前播放是否结束标志

error    返回当前播放的错误状态

initialTime    返回初始播放的位置

loop    是否循环播放

mediaGroup    当前音视频所属媒体组 (用来链接多个音视频标签)

muted    是否静音

networkState    返回当前网络状态

paused    是否暂停

playbackRate    播放的倍速

played    当前播放部件已经播放的时间范围(TimeRanges对象)

preload    页面加载时是否同时加载音视频

readyState    返回当前的准备状态

seekable    返回当前可跳转部件的时间范围(TimeRanges对象)

seeking    返回用户是否做了跳转操作

src    当前音视频源的URL

startOffsetTime    返回当前的时间偏移(Date对象)

textTracks    返回可用的文本轨迹(TextTrackList对象)

videoTracks    返回可用的视频轨迹(VideoTrackList对象)

volume    音量值

事件

事件描述

abort    当音视频加载被异常终止时产生该事件

canplay    当浏览器可以开始播放该音视频时产生该事件

canplaythrough    当浏览器可以开始播放该音视频到结束而无需因缓冲而停止时产生该事件

durationchange    当媒体的总时长改变时产生该事件

emptied    当前播放列表为空时产生该事件

ended    当前播放列表结束时产生该事件

error    当加载媒体发生错误时产生该事件

loadeddata    当加载媒体数据时产生该事件

loadedmetadata    当收到总时长，分辨率和字轨等metadata时产生该事件

loadstart    当开始查找媒体数据时产生该事件

pause    当媒体暂停时产生该事件

play    当媒体播放时产生该事件

playing    当媒体从因缓冲而引起的暂停和停止恢复到播放时产生该事件

progress    当获取到媒体数据时产生该事件

ratechange    当播放倍数改变时产生该事件

seeked    当用户完成跳转时产生该事件

seeking    当用户正执行跳转时操作的时候产生该事件

stalled    当试图获取媒体数据，但数据还不可用时产生该事件

suspend    当获取不到数据时产生该事件

timeupdate    当前播放位置发生改变时产生该事件

volumechange    当前音量发生改变时产生该事件

waiting    当视频因缓冲下一帧而停止时产生该事件

<audio> 标签属性：

src：音乐的URL
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条

Html代码

<audio id=”media” src=”http://www.abc.com/test.mp3″ controls></audio>

<video> 标签属性：

src：视频的URL
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度

Html代码

<video id=”media” src=”http://www.abc.com/test.mp4″ controls width=”400px” heigt=”400px”></video>

获取HTMLVideoElement和HTMLAudioElement对象

Js代码

//audio可以直接通过new创建对象
Media = new Audio(“http://www.abc.com/test.mp3″);
//audio和video都可以通过标签获取对象
Media = document.getElementByIdx_x(“media”);

Media方法和属性：

HTMLVideoElement 和 HTMLAudioElement 均继承自 HTMLMediaElement

Js代码

//错误状态
Media.error; //null:正常
Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
//网络状态
Media.currentSrc; //返回当前资源的URL
Media.src = value; //返回或设置当前资源的URL
Media.canPlayType(type); //是否能播放某种格式的资源
Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
Media.load(); //重新加载src指定的资源
Media.buffered; //返回已缓冲区域，TimeRanges
Media.preload; //none:不预载 metadata:预载资源信息 auto:
//准备状态
Media.readyState; //1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA
Media.seeking; //是否正在seeking
//回放状态
Media.currentTime = value; //当前播放的位置，赋值可改变位置
Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
Media.duration; //当前资源长度流返回无限
Media.paused; //是否暂停
Media.defaultPlaybackRate = value;//默认的回放速度，可以设置
Media.playbackRate = value;//当前播放速度，设置后马上改变
Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
Media.seekable; //返回可以seek的区域 TimeRanges
Media.ended; //是否结束
Media.autoPlay; //是否自动播放
Media.loop; //是否循环播放
Media.play(); //播放
Media.pause(); //暂停
//控制
Media.controls;//是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音
//TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置

事件：

Js代码

eventTester = function(e){
Media.addEventListener(e,function(){
console.log((new Date()).getTime(),e);
});
}
eventTester(“loadstart”); //客户端开始请求数据
eventTester(“progress”); //客户端正在请求数据
eventTester(“suspend”); //延迟下载
eventTester(“abort”); //客户端主动终止下载（不是因为错误引起），
eventTester(“error”); //请求数据时遇到错误
eventTester(“stalled”); //网速失速
eventTester(“play”); //play()和autoplay开始播放时触发
eventTester(“pause”); //pause()触发
eventTester(“loadedmetadata”); //成功获取资源长度
eventTester(“loadeddata”); //
eventTester(“waiting”); //等待数据，并非错误
eventTester(“playing”); //开始回放
eventTester(“canplay”); //可以播放，但中途可能因为加载而暂停
eventTester(“canplaythrough”); //可以播放，歌曲全部加载完毕
eventTester(“seeking”); //寻找中
eventTester(“seeked”); //寻找完毕
eventTester(“timeupdate”); //播放时间改变
eventTester(“ended”); //播放结束
eventTester(“ratechange”); //播放速率改变
eventTester(“durationchange”); //资源长度改变
eventTester(“volumechange”); //音量改变

================================

在以前，网页没有显示视频的一个标准，所以基本都要借助插件来实现视频的播放，插件过多或者插件自身问题，很容易引起浏览器的假死，造成用户体验不佳。html5 video标签的出现改变了这一局面，可以让用户在不用安装任何插件的情况下轻松的观看视频。

　　vedio和audio的使用技巧基本相同，本文仅以vedio作示例。先引用一段别人介绍的vedio标签

　　大多数用户已经安装了Flash插件（事实上，大概95%的上网用户都装有Flash的某个版本），但HTML 5的支持者正在推动一个开放的，不需要任何插件的视频标准。这就是HTML 5的新标签<video>带来的构想，他提供了一个嵌入视频（以及与其交互）而不需要类似Flash的私有插件的方法。
　　不幸的是，视频并非那么简单。不仅仅是浏览器需要理解<video>标签，而且需要一个必要的编码译码器来播放视频。明显的解决方法只能是HTML 5规范的缔造者们选择一个视频编码译码器，并且让每一个浏览器制造商执行。
　　总之，这就是所推荐的打算。同时，这也是引起混乱的导火索。对于各种各样编码译码器的争论就已经很烦杂了，但更悲剧的事情是，浏览器制造商们还不能就此达成统一。苹果不愿意使用提议的Ogg Theora编码译码器，但Opera和Mozilla也不愿意支付由于他们的浏览器装载H.264编码译码器而造成的许可费用。Google同时支持两者，微软面对争论，远远的置身事外，因为他现在根本没有计划去支持HTML 5的视频元素。面对浏览器制造商的僵持局面，HTML 5善意的独裁者Ian Hickson甩了甩他的手并说到去他妈的。所以HTML
5规范中没有特别指名或规定的视频编码解码器。”好吧，引用到这儿。如今的情况是，微软终于陷进去了，但很悲剧的是，在IE 9中只支持H.264。同时，Googe终于在I/O大会上发布了开源的视频封装格式webM和视频编码格式VP8。Opera、Mozilla、Chrome宣布将完全支持VP8，IE宣布部分支持（需要装一个插件，但如果我没记错的话，HTML 5的一个愿景就是脱离浏览器插件，微软真是让人觉得悲剧）。苹果决定不支持VP8，乔布斯认为VP8在质量或效率方面不如H.264，不能满足其产品的要求。另外最新消息表明VP8还有可能牵扯到专利的问题（如果真的侵犯专利的话，Opera和Firefox估计马上会无视VP8的）。说了这么多，其实说到底就是，现在如果要在页面中使用video标签，需要考虑三种情况，支持Ogg
Theora或者VP8（如果这玩意儿没出事的话）的（Opera、Mozilla、Chrome），支持H.264的（Safari、IE 9、Chrome），都不支持的（IE6、7、8）。好吧，现在让我们从技术层面来认识HTML 5的视频，包括video标签的使用，视频对象可以用到的媒介属性和方法，以及媒介事件。

我们来看看video标签具体是怎么使用的以及它有哪些属性和方法。

使用方法：

 <video width="320" height="240" controls="controls">

　　<source src="movie.ogg" type="video/ogg">

　　<source src="movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

各浏览器目前对html5视频格式的支持：

浏览器 \| 影音格式	Ogg Theora	MP4(H.264)	WebM
Microsoft Internet Explorer9	×	√	×
Mozilla Firefox5+	√	×	√
Google Chrome13+	√	√	√
Apple Safari5+	×	√	×
Opera11+	√	×	√

属性列表：

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。默认为false
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。这些控件是由浏览器来提供的，样式也可能因为不同浏览器而不一样
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload	none、metadata、auto	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用"autoplay"，则忽略该属性。 auto - 当页面加载后载入整个视频 meta - 部分预加载。使用此属性值，代表页面制作者认为用户不期望此视频，但为用户提供一些元数据（包括尺寸，第一帧，曲目列表，持续时间等等） none - 不进行预加载。使用此属性值，可能是页面制作者认为用户不期望此视频，或者减少HTTP请求
src	url	要播放的视频的URL。
poster	url	预览图

媒介属性

　　一般用于js操作

属性	可读状态	描述
error	只读	使用media.error返回一个MediaError对象表明当前的错误状态，如果没有出错，返回null，共有4个可能值。 MEDIA_ERR_ABORTED（数字值为1）：媒体资源获取异常； MEDIA_ERR_NETWORK（数字值为2）：网络错误； MEDIA_ERR_DECODE（数字值为3）：媒体解码错误； MEDIA_ERR_SRC_NOT_SUPPORTED（数字值为4）：视频格式被不支持。
currentSrc	只读	返回该媒介标签的src属性值
networkState	只读	返回媒介的网络状态，共有4个可能值。 NETWORK_EMPTY（数字值为0）：尚未初始化； NETWORK_IDLE（数字值为1）：加载完成，网络空闲； NETWORK_LOADING（数字值为2）：视频加载中； NETWORK_NO_SOURCE（数字值为3）：加载失败。
preload	可读写	可获取或改变媒介标签的preload属性值
buffered	只读	返回一个TimeRanges对象，确认浏览器已缓存媒介文件
readyState	只读	返回媒介当前播放位置的就绪状态，共有5个可能值。 HAVE_NOTHING（数字值为0）：当前播放位置无有效媒介资源； HAVE_METADATA（数字值为1）：加载中，媒介资源确认存在，但当前位置没有能够加载到有效媒介数据进行播放； HAVE_CURRENT_DATA（数字值为2）：已获取到当前播放数据，但没有足够的数据进行播放； HAVE_FUTURE_DATA（数字值为3）：已获取到后续播放数据，可以进行播放； HAVE_ENOUGH_DATA（数字值为4）：可以进行播放，且浏览器确认媒体数据以某一种速度进行加载，可以保证有足够的后续数据进行播放，而不会使浏览器的播放进度赶上加载数据的末端。
seeking	只读	返回一个布尔值，表明浏览器是否正在请求数据，ture表示浏览器正在请求数据，false表示浏览器已停止请求。
seekable	只读	发挥一个TimeRanges对象，表明可以对当前媒介资源进行请求。
currentTime	可读写	获取或改变视频的播放位置。单位为秒
startTime	只读	返回媒介文件播放的开始时间，通常为0
duration	只读	返回媒介文件总的播放时长
played	只读	返回一个TimeRanges对象，标明浏览器已播放的媒介资源范围
paused	只读	返回一个布尔值，表明媒介是否暂停播放，ture表示媒介暂停播放，false表示媒介正在播放。
ended	只读	返回一个布尔值，表明媒介是否已结束，ture表示媒介已经播放完毕，false表示还未播放完毕。
defaultPlaybackRate	可读写	返回媒介默认的播放速率，或对其赋值，改变媒介的默认播放速率。
playbackRate	可读写	返回当前的媒介播放速率，或对其赋值，改变当前的媒介播放速率
autoplay	可读写	返回一个布尔值，表明当前媒介是否设置了自动播放，ture表示当前媒介为自动播放，false表示非自动播放，或对其赋值，设置是否自动播放。
loop	可读写	返回一个布尔值，表明当前媒介是否设置了循环播放，ture表示当前媒介设置了循环播放，false表示没有设置循环播放，或对其赋值，设置是否循环播放。
controls	可读写	返回一个布尔值，表明当前媒介是否使用了浏览器默认的播放控制栏，ture表示加载了，false表示没有加载，或对其赋值，设置是否使用浏览器默认的播放控制栏
volume	可读写	返回当前媒介的音量值，或对其赋值，改变媒介的播放音量，范围为0到1，0相当于静音，1为最大音量。
muted	可读写	返回一个布尔值，表明当前媒介播放是否开启静音，ture表示没有开启静音，false表示静音，或对其赋值，设置播放是否静音。

很简单，那我们来做一个demo。(很奇怪，chrome拖动进度条到最后视频有几率就死掉，自动播放到最后没有问题，这是bug？还是我自己的问题？)

<!DOCTYPE html>

<html>

    <head>

        <title>html5 视频标签学习</title>

        <meta http-equiv="Content-Type" content="text/html;charset=utf-8;">

    </head>

    <body>

        <header>

            <h1>自定义视频播放器</h1>

            <div >

                当前播放 ：《<span id="currentMovie">movie1</span>》<br>

                当前播放速度 ： <span id="currentSpeed">1X</span><br>

                当前声音大小为 ：<span id="currentVolume">100</span><br>

            </div>

        </header>

        <section>

        <article>

            <video style="float:left;" id="testVideo" preload="metadata" src="movie.ogg" height="300"  controls>

                你的浏览器不支持html5视频

            </video>

            <div style="float:left;margin-left:10px;">

                <h3>播放列表</h3>

                <ul>

                    <li><a>movie1</a></li>

                    <li><a>movie2</a></li>

                    <li><a>movie3</a></li>

                    <li><a>movie4</a></li>

                </ul>

            </div>

        </article>

        <article style="clear:both;">

            <br/>

            <button id="play">播放</button>

            <button id="pause">暂停</button>

            <button id="stop">停止</button>

            <button id="prev">前一个</button>

            <button id="next">后一个</button>

            <button id="upVolume">音量+</button>

            <button id="downVolume">音量-</button>

            <button id="fastFoward">快进</button>

            <button id="fastBackward">快退</button>

            <br/>

            从<input type="text" id="min" style="width:20px;" value="0"/>分跳转到<input type="text" id="sec"  style="width:20px;" value="0"/>播放

            <button id="locate">确认</button>

        </article>

        <section>

        <script type="text/javascript">

            var $  = function(id){return document.getElementById(id);};

            var _video = $("testVideo");

            //视频列表

　　　　　　　var playList = {

                current : 0,

                list : ["movie.ogg","war3.ogg","movie.ogv","trailer.webm","trailer.ogv"]

            }

            var videoUtil = {

                //播放

                play : function(){

                    _video.play();

                },

                //暂停

                pause : function(){

                    _video.pause();

                },

                //停止

                stop : function(){

                    _video.currentTime = 0;

                    _video.pause();

                },

                //下一个视频

                next : function(){

                    if(playList.current == playList.list.length-1){

                        playList.current = 0;

                    }else{

                        playList.current++;

                    }

                    _video.src=playList.list[playList.current];

                    _video.play();

                },

                //前一个视频

                prev : function(){

                    if(playList.current == 0){

                        playList.current = palyList.list.length-1;

                    }else{

                        playList.current--;

                    }

                    _video.src=playList.list[playList.current];

                    _video.play();

                },

                //加大声音,每次加大1/10

                upVolume : function(){

                    _video.volume += 0.1;

                },

                //减小声音，每次减小1/10

                downVolume : function(){

                    _video.volume -= 0.1;

                },

                //翻倍加快播放速度

                fastFoward : function(){

                    //FF不支持playbackRate

　　　　　　　　　　　　if(_video.playbackRate){

                        _video.playbackRate = _video.playbackRate*2;

                    }else{

                        alert("对不起，你的浏览器不支持改变播放速度！");

                    }

                },

                //降低播放速度

                fastBackward : function(){

                    if(_video.playbackRate){

                        _video.playbackRate = _video.playbackRate/2;

                    }else{

                        alert("对不起，你的浏览器不支持改变播放速度！");

                    }

                },

                //跳转到指定时间点播放

                locate : function(){

                    var min = $("min").value;

                    var sec = $("sec").value;

                    var time = parseInt(min)*60+parseInt(sec);

                    _video.currentTime = time;

                    _video.play();

                },

                bindEvent : function(){

                    var self = this;

                    //绑定页面上各个按钮的事件

　　　　　　　　　　　　var btns = document.getElementsByTagName("button");

                    for(var i = 0 ;i < btns.length ; i++){

                        var el = btns[i];

                        el.onclick = self[el.id];

                    }

                    //播放完毕自动播放下一个

                    _video.onended = function(){

                         var event = document.createEvent("HTMLEvents");

                        event.initEvent('click', true, true);

                        $("next").dispatchEvent(event);

                    }

                    //循环检查视频的当前状态

                    setInterval(function(){

                        var speed = _video.playbackRate||1;

                        var movie = "movie"+playList.current;

                        var volume = parseInt(_video.volume*100);

                        $("currentMovie").innerHTML = movie;

                        $("currentSpeed").innerHTML = speed+"X";

                        $("currentVolume").innerHTML = volume;

                    },200);

                }

            };

            window.onload = function(){

                videoUtil.bindEvent();

            }

        </script>

    </body>

</html>

audio音频播放器的延时暂停

<!DOCTYPE HTML>

<html>

<body>

<audio src="1.mp3" controls="controls"  class="js-audio">

Your browser does not support the audio element.

</audio>

<button class="js-playbtn">播放</button>

<button class="js-pausebtn">暂停</button>

<button class="js-pauseTime">5秒后暂停</button>

<script src="jquery.js"></script>

    <script>

        function Page() {

            this.audio = $(".js-audio")[0];

        }

        $.extend(Page.prototype, {

            init: function(){

                this.bindEvents();

            },

            bindEvents: function() {

                var timer = null;

                var playBtn = $(".js-playbtn"),

                    pauseBtn = $(".js-pausebtn"),

                    pauseTime = $(".js-pauseTime");

                playBtn.on("click", $.proxy(this.handlePlayBtnClick, this));

                pauseBtn.on("click", $.proxy(this.handlePauseBtnClick, this));

                pauseTime.on("click", $.proxy(this.handlePauseTimeClick, this));

            },

            handlePlayBtnClick: function() {

                this.audio.play();

            },

            handlePauseBtnClick: function() {

                this.audio.pause();

            },

            handlePauseTimeClick: function() {

                _this=this.audio;

                timer = setTimeout(function() {

                    _this.pause();

                    clearTimeout(timer);

                }, 5000);

            }

        });

        var page = new Page();

        page.init();

    </script>

</body>

</html>

video视频播放器的播放、暂停、音量、进度、全屏

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>video</title>

</head>

<body>

    <video class="js-video">

        <source src="4.ogg" type='video/ogg'>

        <source src="4.mp4" type='video/mp4'>

        <source src="4.webm"  type='video/webm'>

        浏览器不支持h5的视频播放

    </video>

    <button class="js-playbtn">播放</button>

    <button class="js-pausebtn">暂停</button>

    <button class="js-screenbtn">全屏</button>

    音量<input type="range" class="js-volume" step="0.1" max="1" min="0">

    进度<input type="range" class="js-process" step="0.1" max="1" min="0">

    <span class="js-currentspan"></span>

    <span class="js-videospan"></span>

    <script src="https://code.jquery.com/jquery-1.11.1.js"></script>

    <script>

        function Page() {

            this.video = $(".js-video")[0];

        }

        $.extend(Page.prototype, {

            init: function(){

                this.bindEvents();

            },

            bindEvents: function() {

                var playBtn = $(".js-playbtn"),

                    pauseBtn = $(".js-pausebtn"),

                    screenbtn = $(".js-screenbtn");

                    volumeRange = $(".js-volume"),

                    prcessRange = $(".js-process");

                playBtn.on("click", $.proxy(this.handlePlayBtnClick, this));

                pauseBtn.on("click", $.proxy(this.handlePauseBtnClick, this));

                volumeRange.on("change", $.proxy(this.handleVolumeChange, this));

                prcessRange.on("change", $.proxy(this.handleProcessChange, this));

                screenbtn.on("click", $.proxy(this.handleScreenClick, this));

                $(this.video).on("timeupdate", $.proxy(this.handleVideoTimeUpdated, this));

                $(this.video).on("canplay", $.proxy(this.handleCanplayTriggerd, this))

            },

            handleCanplayTriggerd: function(){

                $(".js-videospan").text(this.video.duration);

            },

            handlePlayBtnClick: function() {

                this.video.play();

            },

            handlePauseBtnClick: function() {

                this.video.pause();

            },

            handleScreenClick: function() {

                this.launchFullscreen(this.video);

            },

            handleVideoTimeUpdated: function(e){

                var ratio = this.video.currentTime / this.video.duration;

                $(".js-currentspan").text(this.video.currentTime);

                $(".js-process").val(ratio);

            },

            handleVolumeChange: function(e) {

                var target = $(e.target),

                    value = target.val();

                this.video.volume = value;

            },

            handleProcessChange: function(e) {

                var target = $(e.target),

                    value = target.val(),

                    totalTime = this.video.duration;

                this.video.currentTime = totalTime * value;

            },

            launchFullscreen: function (element){

                //此方法不可以在异步任务中执行，否则火狐会出问题

                if(element.requestFullscreen) {

                    element.requestFullscreen();

                } else if(element.mozRequestFullScreen) {

                    element.mozRequestFullScreen();

                } else if(element.msRequestFullscreen){

                    element.msRequestFullscreen();

                } else if(element.oRequestFullscreen){

                    element.oRequestFullscreen();

                }else if(element.webkitRequestFullscreen){

                    element.webkitRequestFullScreen();

                }else{

                    var docHtml = document.documentElement;

                    var docBody = document.body;

                    var videobox = document.getElementById('videobox');

                    var cssText = 'width:100%;height:100%;overflow:hidden;';

                    docHtml.style.cssText = cssText;

                    docBody.style.cssText = cssText;

                    videobox.style.cssText = cssText+';'+'margin:0px;padding:0px;';

                    document.IsFullScreen = true;

                }

            },

            //退出全屏

            exitFullscreen: function (){

                if (document.exitFullscreen) {

                    document.exitFullscreen();

                } else if (document.msExitFullscreen) {

                    document.msExitFullscreen();

                } else if (document.mozCancelFullScreen) {

                    document.mozCancelFullScreen();

                } else if(document.oRequestFullscreen){

                    document.oCancelFullScreen();

                }else if (document.webkitExitFullscreen){

                    document.webkitExitFullscreen();

                }else{

                    var docHtml = document.documentElement;

                    var docBody = document.body;

                    var videobox = document.getElementById('videobox');

                    docHtml.style.cssText = "";

                    docBody.style.cssText = "";

                    videobox.style.cssText = "";

                    document.IsFullScreen = false;

                }

            }

        });

        var page = new Page();

        page.init();

    </script>

</body>

</html>

后记：通过亲自自定义视频，其实发现了很多坑，包括页面刚加载时自动播放，或者点播放时自动全屏播放，还有pc端模拟机上运行正常，但微信内置浏览器又出现问题，等等诸多情况，具体解决方法也比较杂，这里推荐一篇文章

http://www.cnblogs.com/baiyygynui/p/6323565.html