video在手机端自动播放、断点续播,列表播放等问题

video标签在手机端全屏、自动播放、断点续播等问题
  1. 解决默认全屏问题:设置 属性 x5-playsinline=“true” playsinline=“true” webkit-playsinline=“true”
    视频宽度自适应:object-fit=“fill”

  2. 自动播放:需要通过一个点击事件引导video自动播放
    例如:html

<video id="video" controls="controls"  object-fit="fill"  x5-playsinline="" playsinline="true" webkit-playsinline="true" poster=""  ></video>
<div id="mask"></div>
   	<div class="continue">
   		<div style="color:#ff5400">是否继续学习?</div>
   		<div class="user_choise">
   		<span class="yes" style="border-right:1px solid #ccc">是</span>
   		<span class="no">否</span></div>
   	</div>

js

$(".continue .user_choise>span").click(function(){
   		$(this).attr("data-choose","enter")
   		$("#mask").hide();
   		$(".continue").hide();
   		player.play();		
   })

3.兼容PC,移动断点续播以及列表播放

player.play = function (init) {
   var now_chapter=pos.split(".");
   if(init){now_chapter[0]=0;}
       video.src = coursePath+course.course_no+"/"+video_list[curr];
       player.currentIndex=curr;
   	video.load();
   	video.play();
   	if($(".user_choise>span[data-choose='enter']").attr("class")=="yes"){
   		var timer=setInterval(function(){
   			 if(!$("#"+player_id)[0].paused){
   	 			player.setPosition(now_chapter[0]);		   
   	 		}
   		},1000)
   	}else{
   		clearTimeout(timer);	
   	}
   	curr++;
       	if (curr >= video_list.length) {
           		//video.pause();
          		 curr = 0;//播放完后,重新播放
      	 }
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值