使用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;
}



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

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值