読者です 読者をやめる 読者になる 読者になる

chrome54以上でtouchstartでvideo.playが使えなくなったときの対応メモ

はじめに

Androidでの動画自動再生のやり方がわからなかったのでタッチイベントで無理やりvideoを再生するようなやり方をしていることがあった。
で、今のところ問題なかったのだがふとchromeのコンソール見ると以下のようなワーニングが出ていた

Performing operations that require explicit user interaction on touchstart events is deprecated and will be removed in M54, around October 2016. See https://www.chromestatus.com/features/5649871251963904 for mo$

chrome54以上ではユーザーの明示的な操作でないところでこれを無理やりやるのがNGになるみたい。。。

解決方法

http://juggly.cn/archives/197386.html
そういえばこちらの記事にchrome53以上で音無なら自動再生可能になったという記事があった!

chromeのバージョンで処理分けるっていうのがちょっと面倒な気もしたけど今時点では他に思いつかないのでこの形で対応しました

コードのイメージは以下のようなかんじ

chrome53より前

var isStarted = false;
document.addEventListener("touchstart", function() {
    if (!isStarted) {
       isStarted = true;
       var video = document.getElementById("video");
       video.play();
       document.body.appendChild(video);                                                                                                                                                                           
    }
}, false);

chrome53以上

document.addEventListern("load", function() {
   var video = document.getElementById("video");
   video.muted = true;
   video.autoplay = true;
   document.body.appendChild(video);                                                                                                                                                                               
}, false);

以上です