H5 - video.Js 视频播放(video)

参考文献：
1、赵达-腾讯全栈开发工程师；	2、 video.js使用技巧 -歪麦博客； + Video.js 简书使用；
3、 video-js 官网；
4、github video-js 地址；	5、 青蛙哥的video.js；
6、github 基本videoJs下载地址；

对于在安卓手机上 poster属性展示封面图的兼容问题，可以在视频上层加一个div图片，视频播放是显示video，隐藏该图片即可。

http://www.cnblogs.com/Renyi-Fan/p/9539663.html -API详解
vjs-big-play-centered - 居中播放按钮
vjs-fluid - 视频auto，自适应容器大小

<video id="my-player" class="video-js vjs-big-play-centered vjs-fluid" controls preload="none" poster="http://img3.cache.netease.com/photo/0001/2009-09-14/5J6G8BHU0G5V0001.JPG" data-setup='{}'>
    <source src="../../img/videoxs.mp4" type="video/mp4">source>
    <p class="vjs-no-js">
        当前浏览器不支持 video直接播放!
    p>
video>

1、默认属性

preload = "auto"   是否预加载数据
值：
auto   - 页面加载后载入整个数据
meta - 页面加载后载入数据
none - 不载入视频 

autoplay  - 如果出现该属性，则视频在就绪后马上播放
controls  - 如果出现该属性，则向用户显示控件，比如播放按钮,双击全屏播放。
muted - 音频输出静音

/* 隐藏控制条 */
::-webkit-media-controls{
    opacity: 0;
    cursor: pointer;
}

autoplay 在 Chrome浏览器上不能自动播放，原因可能在于 视频体积过大 或者 视频没有放在根目录下。

解决办法：muted 属性，在高版本的浏览器下，对视频静音后，可以保证自动播放。

<video id="video" class="" poster="images/icon-banner.jpg" preload="meta" autoplay="" loop="" muted >
  <source src="https://vjs.zencdn.net/v/oceans.mp4" type='video/mp4' />
video>

---

2、视频暂停

这里主要运用到了play() ；pause()这两个事件。

	/* 点击视频时 暂停/开始 */
    var video1=document.getElementById("video");
    video1.onclick=function(){
        if(video1.paused){
            video1.play();
        }else{
            video1.pause();
        }
    }
	/* 点击图标后视频 暂停/开始 */
    var video2=document.getElementById("videoPlay1");
    var video3=document.getElementById("video");
    video2.onclick=function(){
        if(video3.paused){
            video3.play();
        }else{
            video3.pause();
        }
    }
    /* 点击视频后图标 隐藏/显示 */
    $(function() {
        $(".m-video-header .swiper-slide").click(function(){
            $("#videoPlay1").toggle();
        });

    })

大致结构：

---

3、videojs插件：

    //默认调用
    var options = {};
    var player = videojs("example_video_1", options, {
        "autoplay":'muted',
        "loop": 'true',  //循环
        controlBar: {
            captionsButton: false,
            chaptersButton : false,
            liveDisplay:false,
            playbackRateMenuButton: false,
            subtitlesButton:false
          }

    }, function(){

        this.on('loadeddata',function(){
            console.log(this)
        })

        this.on('ended',function(){
             this.pause();
             this.hide()
        })

    });
    player.autoplay('muted');
    player.loop('true');

结构可参考上面的使用技巧。