質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

1回答

2188閲覧

PCでは動画の自動再生ができるが、iOS,アンドロイドでもそれを実現させたい

mttkd399

総合スコア13

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2018/05/02 07:08

編集2018/05/07 09:14

■実現したいこと
・ Mobile環境での自動再生(chrome,safari,firefoxなどの各ブラウザで)
・mute状態にせずに自動再生したい

■現状
・PCでの動画自動再生はできる(ページを読み込んだ時に、自動で再生される)
・Mobile環境では、jsのsetTimeout(1秒後)で、再生ボタンクリックイベントを強制的に発生させるように実装している。
・iOSとアンドロイドにおいて、ページを読み込んだ時に音量がmuteになっているときは自動再生される。一方で音量がONになっている状態では自動再生されない。

■コード
↓PC、Mobileの両方でこのHelperを読み込んでいる。

ruby

1#app/helper/video_helper.rb 2module VideoHelper 3 def render_video_tag(src: '', **options) 4 options = { type: 'video/mp4', controls: true, autoplay: true, controlsList: 'nodownload', playsinline: true }.merge options 5 render partial: 'partials/video_tag', locals: { src: src, options: options } 6 end 7end

haml

1// app/views/partials/_video_tag.html.haml 2%video 3 %source{src: src, type: options[:type]} 45 6 :javascript 78

■問題点
・モバイルで自動再生が実現できない。

■特記事項
・youtube、dailymotionなどでは、Mobile環境でもページの読み込み時に自動再生が有効になっている。
・Chromeのポリシーによると、何らかのユーザーインタラクションと取れるような行動があった場合に自動再生が許可されるようである。

不足している項目などあればおっしゃってください。
ご教示よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

Mobile環境ではChrome 53以降はミュートであれば自動再生が有効になっていると思いますが
ミュートでない限り自動再生はブラウザ側で無効です。

iOSは10,Chromeは53からのようです。

Muted autoplay is supported by Safari on iOS 10 and later.
Playback of the muted video starts automatically in Chrome 53 or later.

Muted Autoplay on Mobile: Say Goodbye to Canvas Hacks and Animated GIFs!

投稿2018/05/02 09:02

u-ta

総合スコア60

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問