H5-video

定义：

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

或

<video>

        <source src="./movie1.mp4">

        <source src="./movie2.mp4">

        <source src="./movie3.mp4">

</video>

video的事件

    canplay() 视频可以播放的时候执行

    timeupdate() 播放时间改变就会触发

video的方法：

    play() 播放视频

    pause() 暂停视频

    全屏：对应浏览器内核+RequestFullScreen() 

                        mozRequestFullScreen()--火狐

                        webkitRequestFullScreen()--谷歌

video的属性：

    paused 判断当前视频是否暂停，暂停返回true,反之返回false

    disablePictureInPicture  禁用  video  元素的画中画特性

    currentTime 返回视频当前播放的秒数时间

    duration 返回视频总秒数时长

    controls 显式播放控件

    loop 循环

    muted 静音

    autoplay 自动播放(谷歌浏览器有限制，静音后才能自动播放)

进度条：

<progress max="100" value="0" id="progress"></progress>

进度条点击事件：

progress.οnclick=function(e){

            console.log(this.offsetWidth)

            console.log(e.offsetX)

        }

this.offsetWidth    ---总宽度

e.offsetX    ---点击位置水平方向距离左侧顶点的距离

封装一个能匹配浏览器内核的方法，调用：getFullMethod(videoObj)

   function   getFullMethod ( parms ) {

     if  ( parms . webkitRequestFullScreen ) {

         return   parms . webkitRequestFullScreen ();

    }  else   if  ( parms . mozRequestFullScreen ) {

         return   parms . mozRequestFullScreen ()

    }  else   if  ( parms . msRequestFullScreen ) {

         return   parms . msRequestFullScreen ()

    }  else   if  ( parms . oRequestFullScreen ) {

         return   parms . oRequestFullScreen ()

    }