关于视频播放器

    html5的video标签配合相关的api可以写一个功能完备的播放器，不过有很多坑，我前端事件写了个自认为很小的播放器，感觉就是一步血泪史。
    先从简单的说起，由于浏览器支持的视频格式不同，需要引入不同的视频格式，基本上mp4和ogg这两种格式就能覆盖各种浏览器：

        //这里的oncontextmenu="return false;"是为了禁用鼠标右键，因为右键会有一个直接下载，很不友好的一件事
       <video id="myVideo" class="video" oncontextmenu="return false;">
            <source src="" type='video/mp4'>
            <source src="" type='video/ogg'>
        </video>

    下来就是功能了，先说一下主要功能吧：


     1. 暂停；点击屏幕或者点击左下角暂停按钮视频暂停，暂停后屏幕上出现一个大的播放按钮；
     2. 播放；点击左下角的播放按钮或者屏幕上大的播放按钮，视频播放；
     3. 时间显示；视频载入后显示当前事件和视频总事件，这里需要一个时间格式函数；
     4. 全屏；视频右下角的全屏按钮进入全屏，ie9和ie10需要模拟f11进入全屏，火狐需要用css控制全屏样式，js中捕捉不到退出全屏Esc事件，（这是最坑的地方）也做了一个双击进入全屏，由于会误触发，所以在开发代码中将那个功能注释了；
     5. 退出全屏；Esc案件和右下角的小按钮都可以对出全屏，ie9和ie10依然模拟f11，双击退出全屏功能也取消了，会误触发，（我觉得双击事件应该能优化一下，有时间再做吧）；
     6. 音量；鼠标经过出现进度条和音量百分比，进度条和百分比同步，需要支持点击事件和模拟一个鼠标拖拽事件（鼠标拖拽事件有一点小坑），还需要检测是否为静音，静音时音量按钮会边一个静音样式；音量进度条由于是鼠标经过才显示离开后要消失，所以这里需要一个定时器贯穿始终，坑了我一下午；
     7. loading；视频缓冲和seeking需要一个loading.gif，这里没多少难度；
     8. 时间进度条；有几个新出来的api是专门做这个的，需要和事件显示同步；
     9. 缓冲；也有专门的api，加上loading.gif和缓冲时间进度条即可；
     10. 鼠标离开视频或者悬浮不动时工具条自动隐藏；这个不难，网上找了一个函数，完美解决了问题，需要自己设置一个时间；
     11. 关闭按钮；这个...我不好意说；

    功能就这么多，写出来才发现我处理了那么多东西，当时在全屏那里写的差点怀疑人生了；这东西github上有一个很多的开源项目，那个好像不支持ie9和ie10；但是人家有flash自动切换解决方案；但是我为什么不怕死的做了这个东西，因为那个官网的api我实在是不知所云，国内用的人又少，详细的介绍自然就几乎没有了，于是我就对自己狠了一把，其中的坑踩的我欲罢不能。
    好了，下次开始介绍我怎么实现这些功能的吧，感觉会写很多。