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>

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在手机端自动播放、断点续播，列表播放等问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。