hyogo score 12
2018/07/16 22:38 投稿
| android で videoタグを一時停止のまま連続でseekすると反応が遅い |
| #android で videoタグを一時停止のまま連続でseekすると反応が遅くなる |
| div ie="seek" ボタンをclickすると0.1秒ずつvideoのcurrentTimeが増えるコードなのですが |
| - iOS(ipad,iphoneの11.2以上のsafari,chrome) |
| - PC（chrome最新,edge最新） |
| ではclickして0.1秒以内ぐらいのほぼ同時に見える時間差でseekしてくれるのですが、**androidのchrome最新**では10回ほど連打したあと１秒以上かかってからtimeupdateとseekedイベントが呼ばれてseekが完了するようになってしまいます。ゆっくりの間隔でクリックするとiOSやPCのような時間差でずっとseekしてくれるのですが。 |
| - 動画は停止した状態で0.1秒ずつseekしたい |
| - 連打しても連打した回数分0.1秒ずつseekさせたい |
| - inline再生 |
| androidの仕様なのか、他どんな環境で起こることなのか、対策など教えていただきたくよろしくお願いいたします。 |
| ```html |
| <div class="wrap" style=""> |
| <div id="play" style="background-color:red;"><p>play</p></div> |
| <div id="pause" style="background-color:skyblue;"><p>pause</p></div> |
| <div id="seek" style="background-color:pink;"><p>seek</p></div> |
| <div id="seek0" style="background-color:gray;"><p>seek0</p></div> |
| </div> |
| <div id="container" class="container"> |
| <video id="video" class="video" width="1366" height="768" playsinline="" muted=""> |
| <source src="https://res.cloudinary.com/dofcsz0es/video/upload/v1531745063/aaa.mp4"> |
| </video> |
| </div> |
| ``` |
| ```javascript |
| let v = document.getElementById("video"); |
| v.controls = false; |
| //jquery |
| jQuery(window).load(function(){ |
| //touchstart |
| $("#play").on("click",function(){ |
| v.play(); |
| // console.log("play==" + v.currentTime); |
| // $("#play p").text("play==" + v.currentTime); |
| }); |
| $("#pause").on("click",function(){ |
| v.pause(); |
| // console.log("pause==" + v.currentTime); |
| // $("#pause p").text("pause==" + v.currentTime); |
| }); |
| $("#seek0").on("click",function(){ |
| // v.pause(); |
| // v.currentTime = 0; |
| // console.log("seek0==" + v.currentTime); |
| // $("#seek0 p").text("seek0==" + v.currentTime); |
| }); |
| $("#seek").on("click",function(){ |
| currentTimeCount ++; |
| v.currentTime = currentTimeCount*0.1; |
| // console.log("seek==" + v.currentTime); |
| // $("#seek p").text("seek==" + v.currentTime); |
| }); |
| }); |
| ``` |
