使用video的那些坑

2，video标签api中的加载事件支持不太好：在现代浏览器中应该使用监听事件或者jq封装的on事件。而不是用οnclick=function（）{}这样的样式

videoEle.addEventListener("durationchange",function(e){

       //测试4.2下只执行durationchange事件。

       $(videoEle).siblings(".loadAni").hide();

      // if(oneDoFlag){

        setNextPro(videoEle,controllers);

        // oneDoFlag = false;

      // }

      e.stopPropagation();

    })

3，设置video标签的进度条，也可以使用video标签的"timeupdate"事件来判定事件。触发频率较高；

var setCurrent = "";

function setProgress(controllers,videoEle,duration){

    var currentEle = controllers.children(".currentTime");

    clearInterval(setCurrent);

    setCurrent = setInterval(function(){

    currentTimes = parseInt(videoEle.currentTime);

    currentEle.text(timeStyle(currentTimes));

    var bufferTimes = ((videoEle.buffered.end((videoEle.buffered.length) - 1)) - currentTimes);

    var percentage = (currentTimes / duration * 100) + "%";

    controllers.children('.controlProg').children('.progress').width(percentage);

    controllers.children('.controlProg').children('.ball').css("left",percentage);

    if(((currentTimes+0.5) > duration) && (duration!=0)){

      returnInit();

    }

    bufferOrPlay(videoEle,bufferTimes);

  }, 1000);

}

4.设置进度条，分为点击和滑动

function clickOrDrag(controllers,videoEle){

  var whiteProg = $(controllers).children(".controlProg").children(".progress");

  var whiteBall = $(controllers).children(".controlProg").children(".ball");

   $(controllers).children(".controlProg")[0].addEventListener("touchstart",function(e){

    // alert("da");

    var touch = e.touches[0];

    disctance.oldAddrX = touch.clientX;

    disctance.oldAddrY = touch.clientY;

    disctance.newAddrX = touch.clientX;

    disctance.newAddrY = touch.clientY;

    e.preventDefault();

   },false);

   $(controllers).children(".controlProg")[0].addEventListener("touchmove",function(e){

    var touch = e.touches[0];

    disctance.newAddrX = touch.clientX;

    disctance.newAddrY = touch.clientY;

   },false)

   $(controllers).children(".controlProg")[0].addEventListener("touchend",function(e){

    var disY =  Math.abs(disctance.newAddrY - disctance.oldAddrY);

    var disX = disctance.newAddrX - disctance.oldAddrX;

    var angle = parseInt(Math.atan(disY/Math.abs(disX))*360)/(2*Math.PI);

     if(angle>10){

        return false;

      }

    var progLeft = $(controllers).children(".controlProg").offset().left

    var progWidth = $(controllers).children(".controlProg").width();

    var progEnd = progLeft + progWidth ;

    if(disX > 0){

      if(disctance.newAddrX > progEnd){

        videoEle.currentTime = duration;

        whiteProg.css("width","100%");

        whiteBall.css("left","100%");

      }else{

        var newAddr = ((disctance.newAddrX - progLeft)/progWidth) * 100;

        videoEle.currentTime = parseInt((duration*newAddr)/100);

        whiteProg.css("width",newAddr+"%");

        whiteBall.css("left",newAddr+"%");

      }

    }else if(disX == 0 && disY < 10){

        var newAddr = ((disctance.newAddrX - progLeft)/progWidth)*100;

        videoEle.currentTime = parseInt((duration*newAddr)/100);

        whiteProg.css("width",newAddr+"%");

        whiteBall.css("left",newAddr+"%");

    }else{

      if(disctance.newAddrX < progLeft){

        videoEle.currentTime = 0;

        whiteProg.css("width",0);

        whiteBall.css("left",0);

      }else{

        var backAddr = ((disctance.newAddrX - progLeft) / progWidth)*100;

        videoEle.currentTime = parseInt((duration*backAddr)/100);

        whiteProg.css("width",backAddr+"%");

        whiteBall.css("left",backAddr+"%");

      }

    }

   },false)

}

5.返回视频的初始状态，需要先将定时器清除掉，移除里边的所有元素，将记录的元素重新填充进去

function returnInit(){

  clearInterval(setCurrent);

  var thisParent = $(playingEle).parents(".wrapLists");

  $(playingEle).parents(".wrapLists").empty();

   thisParent.html(oldHtml);

}

6.调用html5的全屏方法

 function requestFullScreen(thisVideo) {

  // console.log(thisVideo.webkitRequestFullScreen())

    if (thisVideo.requestFullscreen) {

      // alert(1);

        thisVideo.requestFullscreen();

    } else if (thisVideo.mozRequestFullScreen) {

      // alert(2)

        thisVideo.mozRequestFullScreen();

     } else if (thisVideo.webkitRequestFullScreen) {

      // alert(3)

         thisVideo.webkitRequestFullScreen();

     }

 }

7.在使用video标签时。因为其实现原理是平台层实现的，因此不同的手机的对video标签的播放样式不同，在个别手机不加poster属性时会出现一个默认的三角形，解决方法是将poster属性设置成一个透明图，然后将video的背景图设置成给出的封面图；这样就可以解决poster属性不可操作的坑；使用for...in...语句

function inserHtml(data){

  conHtml = "";

  var nowTime = new Date().getTime();

  // console.log(nowTime);

  for(var objEle in data){

    var timeDura = parseInt(data[objEle].duration/1000);

    var getMins =parseInt(((nowTime - data[objEle].pub_date)/60000));

    // var videoUrl = data[objEle].url.replace(".3gpp",".mp4");

    // console.log(videoUrl);

    conHtml += '

';

    conHtml += '';

    conHtml += '

'+data[objEle].title+'

';

    conHtml += '

'+timeStyle(timeDura)+'

';

    conHtml += '

Network error ,Try again

';

    conHtml += '

';

    conHtml += '

';

    conHtml += '

';

    conHtml += '

'+updataTime(getMins)+'

';

  }

  return conHtml;

}

因为第一次使用，当前好多不足，会继续更新