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

最新推荐文章于 2024-02-22 16:48:39 发布

weixin_39725702

最新推荐文章于 2024-02-22 16:48:39 发布

阅读量4.2k

点赞数

文章标签： video手机端断点续播 video手机端自动播放

本文链接：https://blog.csdn.net/weixin_39725702/article/details/85247939

版权

video标签在手机端全屏、自动播放、断点续播等问题

解决默认全屏问题：设置属性 x5-playsinline=“true” playsinline=“true” webkit-playsinline=“true”
视频宽度自适应：object-fit=“fill”
自动播放：需要通过一个点击事件引导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>

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