使用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 += '<dl class="wrapLists wrapList_'+objEle+'"><dt class="videoWrap"><div class = "playingBg">';

    conHtml += '<video src="'+data[objEle].url+'" preload="none" webkit-playsinline="true" poster="app/img/poster.png" style="background-image:url('+data[objEle].cover+')"  ></video>';

    conHtml += '<div class="titleOfVideo">'+data[objEle].title+'</div><div class="timeAndNum">';

    conHtml += '<p class="time">'+timeStyle(timeDura)+'</p></div>';

    conHtml += '<div class="play"></div><div class="loadAni"></div><div class="netError">Network error ,Try again</div>';

    conHtml += '<div class="controllers"><p class="controlPlay"></p><p class="controlPause"></p><p class="currentTime"></p>';

    conHtml += '<p class="controlProg"><span class="progress"></span><span class="ball"></span></p>';

    conHtml += '<p class="duration"></p><p class="fullScreen"></p><div class="clear"></div></div></div></dt>';

    conHtml += '<dd class="loadWrap"><p class="timeOfUpdata">'+updataTime(getMins)+'</p><p class="loadBtn" data-url="'+data[objEle].url+'" data-tittle="'+data[objEle].title+'" data-type="'+data[objEle].pattern+'"><span class="arrow"></span></p></dd></dl>';

  }

  return conHtml;

}

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