Safariで動画と音声が再生されない場合の解決方法

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダー Day18です！

昨日は「3D空間上に2DのUIを重ねる【これからはじめるReact360】」という記事でした。

3D空間上に2DのUIを重ねる【これからはじめるReact360】

本日は「Safariで動画と音声が再生されない場合の解決方法」という記事を書いてきます！

Safariでは自動再生の規制により、動画と音声が再生されないことがあります。

コードを修正すれば解決できるので、今回はその方法をご紹介していきます。

事象の確認

動画および音声を自動再生したい場合は、autoplay をつけるのですが、Safari だけ効きません。

よく「再生できない」といわれる事象の原因は、この自動再生の挙動による可能性がかなり高いです。

<video id="video" class="video" src="/programming/safari-video-audio-action/video.mp4/" autoplay="autoplay" width="300" height="150"></video>
<audio id="audio" class="audio" src="/programming/safari-video-audio-action/audio.mp3/" autoplay="autoplay"></audio>

ページの読み込み完了後だったり…

window.addEventListener(‘load’, () => {
video.play();
audio.play();
});

弊社のWebAR案件で使用している、aframe-ar.js のマーカー検出後だったり…

marker.addEventListener('markerFound', () => {
video.play();
audio.play();
});

上記のタイミングで無理やり再生させようとしてもうまくいきません。

自動再生できない理由って？

なぜ自動再生できない仕様になったのか調べてみました。

・大きな容量のファイルのユーザーの同意なしに読み込ませないため
・広告の動画がいきなり音声付きで再生されることを防ぐため

と、すごく納得できる内容です。

ユーザーに優しいけど開発者には厳しいですね…。

じゃあどうすれば良いの？

クリックやタップなどユーザーのアクションが必要となります。

UIとしてパッと思いついたのは下記の2パターンです。
A : 再生停止ボタン
B : モーダル内ボタン

弊社で実装したことがあり自動再生っぽく見えておすすめなのは、
Bのモーダル内ボタンなので実例を見てみましょう。

音楽の世界が拡張して目の前にも現れた
かっこいいと思いませんか…？😳#1日1WebAR 5日目は音楽を拡張するWebARです！😎

音楽を流したら現実の世界も合わせて変化する、なんて未来がきたら
「音楽を聞く体験」も変わりそうですよね！#1day1WebARhttps://t.co/dhtdTct3UW pic.twitter.com/IQnnsUiIxu

— palanAR（パラナル） (@palanar_webar) December 5, 2019

処理の流れ

1 : ボタン(モーダル内のCLOSE)をタップ
2 : 動画をミュートにして再生
3 : すぐに動画を停止してミュート解除
4 : 動画の開始秒数を 0 に戻す
5 : 任意のタイミング(マーカー認識)で動画を再生

コード

※SP用にtouchstartイベントを使用しました。

// タップを検出したら...
button.addEventListener('touchstart', () => {
audio.muted = true; // ミュート有効
audio.play(); // 動画再生
audio.pause(); // 動画停止
audio.muted = false; // ミュート無効
audio.currentTime = 0; // 開始秒数を戻す
});

// マーカー認識されたら...
marker.addEventListener('markerFound', () => {
audio.play(); // 動画再生
});

まとめ

今回は「Safariで動画と音声が再生されない場合の解決方法」をご紹介しました。

メディアの挙動はブラウザ間での違いが大きいので、この記事で解決できた方がいると嬉しいです…！

参考・リンク

・iOSでのオーディオ再生制限の解除方法いろいろ
・ChromeやSafariで動画が自動再生されない時の対処法