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;//播放完后，重新播放
      	 }
}

转载自原文链接, 如需删除请联系管理员。

原文链接：video在手机端自动播放、断点续播，列表播放等问题，转载请注明来源！