这次小编与大家分享一下，如何对video做一些简单基本的操作，包括了播放器的播放、暂停，音量的读取、设置的相关操作。

一、获取影片总时长

  对video操作进行操作之前，应先给video标签加个id，便于我们获取video元素，这样我们就可以开启对video的探索之旅。首先要得到的是影片的一些信息，其中一个就是总时长。

<video id="video" controls preload="auto" width="100%" x-webkit-airplay="true" webkit-playsinline="true" poster="images/cover1.jpg" src="mp4/1.mp4"></video>

获取video视频总时长，要用到video的一个事件loadedmetadata，这个事件的触发表示元数据（媒体的一些基本信息）已经加载完成，用addEventListener监听事件

    var video = document.getElementById('video');//获取video元素

    myVideo.addEventListener("loadedmetadata", function(){

      //要执行的代码

    });

这时已经监听了，那么接下来要做的就是获取总时长，其实就是用到了video的一个属性：duration

    var video = document.getElementById('video');//获取video元素

    video.addEventListener("loadedmetadata", function(){

       totalTime = video.duration;//获取总时长

    });

需要注意的是获取到的在总时长的单位为秒，显示的时候可根据需要去转换。 

二、播放、暂停

  我们经常会需要对video设置播放或者暂停，播放或者暂停用到的video的两个方法就是play和pause

         //播放

       function play(){

           video.play();

       }

       //暂停

       function pause(){

           video.pause();

       }

三、获取影片的播放时间和设置播放点

  很多时候我们都想知道video视频播到哪了，这需要监听一个事件和获取一个属性的值，用到的是video的timeupdate事件和currentTime属性

    //更新播放时间点

   video.addEventListener("timeupdate", function(){

      var currentTime = video.currentTime; //获取当前播放时间

     console.log(currentTime); //在调试器中打印

     // 如果播放时间等于视频总时间，就暂停播放

     if(currentTime == totalTime){

        pause();

     }

   });

设置播放点，设置播放点用得还是currentTime属性，currentTime属性是可读写的，要注意的是设置值的单位是秒，如果播放点不是秒为单位那就要进行转换 

         //设置播放点

       function playBySeconds(num){

           video.currentTime = num;

       }

       playBySeconds(30); // 从30秒开始播放

四、音量的获取和设置

   获取音量可以直接用volume属性，但是在这里还要介绍的是音量改变的触发事件，方面以后需要自定义UI使用，那就是volumechange事件

     //改变音量

     video.addEventListener("volumechange", function(){

         var videoVolume = video.volume;//获取当前音量

         console.log(videoVolume);//在调试器中打印

     });

要注意的是音量的范围值为0~1，一般在UI中都是用百分比，所以需要的时候要进行转换。

音量是可以通过改变属性来设置的，跟播放的时间点是相似的，只不过音量设置的是volume属性。

//设置音量

     function setVol(num){

         video.volume = num;

     }

     setVol(0.5);

案例演示：

五、一些常用且需要重点关注的video事件

六、属性差异

attributes	iOS	android
poster 封面图片	支持，但是加载速度明显比在中要慢；	不一定支持（浏览器厂商的实现标准不统一）；
preload 预加载	iPhone不支持；	可能支持；
autoplay 自动播放	iPhone Safari中不支持，但在webview中可能被开启；iOS开发文档明确说明蜂窝网络下不允许autoplay；	可能支持；
loop 循环播放	支持	可能支持；
controls 控制条	支持，但是需要开始播放了才显示	基本都支持显示或者不显示
width和height	一定给出明确的属性设置，且不能为0；	如果不设置，仅仅通过CSS样式去控制视频大小，可能会导致标签失效。

七、其他怪异bug和不友好表现