2019年12月18日

プログラミング

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

目次

  1. はじめに
  2. 事象の確認
  3. 自動再生できない理由って?
  4. じゃあどうすれば良いの?
  5. まとめ
  6. 参考・リンク

はじめに

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

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

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

本日は「Safariで動画と音声が再生されない場合の解決方法」という記事を書いてきます!
ogp.png (60.2 kB)

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

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

事象の確認

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

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

<video id="video" class="video" src="./video.mp4" autoplay="autoplay" width="300" height="150"></video>
<audio id="audio" class="audio" src="./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 : ボタン(モーダル内の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で動画が自動再生されない時の対処法

2

0

AUTHOR

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP