状況

モバイル系OSのブラウザでは、通常単純にJavaScriptから動画再生処理を行っても再生されない。

再生するためには、下記のようにユーザーアクションによるイベントから再生処理を行う必要がある。

In Safari on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and autoplay are disabled. No data is loaded until the user initiates it. This means the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onLoad="play()" event does not.
https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

しかし、例えば下記のコードのようにユーザー起点と思われるtouchstart, touchendなどのtouch系イベントでは、iOS 11のUIWebView限定で再生処理を行っても再生されなくなってしまった。

playArea.addEventListener("touchend", ev => {
  videoElement.play();
});

以下のような処理だと再生される。

// 無難にclick
playArea.addEventListener("click", ev => {
  videoElement.play();
});

// mouseupでも動いた
playArea.addEventListener("mouseup", ev => {
  videoElement.play();
});

恐らくバグだと信じているので、Appleにはバグ報告を送った。

2017/9/27追記

iPadだけの問題の様子

教訓

UIWebViewはバグが放置されがちだから早急にWKWebViewに乗り換えるべきと思われる

[iOS 11.1修正済] iOS 11のUIWebViewではtouch系イベントで動画を再生できない

2017/09/28追記

状況

2017/9/27追記

教訓