[解決済み] iPadでHTML5動画を自動再生できますか?
質問
質問
<video>
タグ
autoplay="autoplay"
属性はSafariでは問題なく動作します。
iPad でテストする場合、動画は手動でアクティブにする必要があります。
読み込みの問題だと思ったので、メディアの状態をチェックするループを実行しました。
videoPlay: function(){
var me = this;
console.log('STATE: ' + $("#periscopevideo").get(0).readyState);
if ($("#periscopevideo").get(0).readyState != 4){
setTimeout(function(){me.videoPlay();}, 300);
}
else {
$("#periscopevideo").get(0).play();
}
}
での状態のままです。
0
のままです。デスクトップのサファリでは
0
,
1
そして最後に
4
.
iPad では
4
を手動でタップした場合のみです。
さらに
$("#periscopevideo").get(0).play()
をクリックすると
onClick
も動作します。
自動再生に関して、アップル社から何か制約があるのでしょうか?(ちなみにiOS5+を使用しています)。
解決方法を教えてください。
iOS 10のアップデート
iOS 10 から自動再生が解禁されました - ただし、いくつかの制限があります (例: オーディオ トラックがない場合は A が自動再生される)。
これらの制限の完全なリストを見るには、公式ドキュメントを参照してください。 https://webkit.org/blog/6784/new-video-policies-for-ios/
iOS 9 およびそれ以前
iOS 6.1時点のものです。 では、iPad 上でビデオを自動再生することはできなくなりました。
私の推測では、なぜ自動再生機能を無効にしたのでしょうか?
多くのデバイス所有者がデバイスのデータ使用量や帯域幅を制限しているため、Apple は、帯域幅の使用を開始するタイミングをユーザー自身が決定すべきだと考えたのだと思います。
少し調査した後、iOS デバイスの自動再生に関して、Apple のドキュメントで以下の抜粋を見つけ、私の推測を確認しました。
Apple は、スクリプトと属性の両方の実装を通じて、iOS デバイスでのビデオの自動再生を無効にすることを決定しました。 を無効にすることを決定しました。
Safari では、iOS (iPad を含むすべてのデバイス) で、ユーザーが携帯電話ネットワークを使用していてデータ単位で課金される可能性がある場合、プリロードおよび自動再生が無効になります。 自動再生は無効です。 ユーザーが開始するまで、データは読み込まれません。 Apple のドキュメントです。
に掲載されている別の警告を紹介します。 Safari HTML5 リファレンス ページ に、iOS の Safari で埋め込みメディアが再生できない理由についての説明があります。
警告 : 携帯電話ネットワークを介した迷惑なダウンロードを防止するため、埋め込みメディアは iOSのSafariでは、埋め込みメディアを自動的に再生することはできません。 iOSのSafariでは、埋め込みメディアを自動的に再生することはできず、常にユーザーが再生を開始します。コントローラーは iPhoneやiPod touchでは、再生が開始されると自動的にコントローラーが供給されます。 しかし、iPad では、controls 属性を設定するか、JavaScript を使用してコントローラを提供する必要があります。 JavaScriptでコントローラを提供する必要があります。
これが意味するところは(コード的には)、Javascriptの
play()
と
load()
メソッドは、ユーザが再生を開始するまで非アクティブです。
でない限り
は
play()
または
load()
メソッドは、ユーザーアクション(クリックイベントなど)によって起動されます。
基本的に、ユーザが起動した再生ボタンは動作しますが
an
onLoad="play()"
イベントは動作しません。
例えば、これはムービーを再生します。
<input type="button" value="Play" onclick="document.myMovie.play()">
一方、iOSでは以下のようにしても何も起こりません。
<body onload="document.myMovie.play()">
関連
-
[解決済み] jQueryを使って要素のIDを取得するにはどうすればよいですか?
-
[解決済み] How can I set the default value for an HTML <select> element?
-
[解決済み] キーボードがあるときに、UITextFieldを編集開始時に上に移動させるには?
-
[解決済み] UITableViewの選択を無効にするにはどうすればよいですか?
-
[解決済み] HTML5の数値入力のスピンボックスを非表示にすることはできますか?
-
[解決済み] data-id属性を取得するにはどうすればよいですか?
-
[解決済み] UIButtonのタイトルを左揃えにするにはどうしたらよいですか?
-
[解決済み] jQueryを使用してspanに値を設定する方法
-
[解決済み] jQueryで選択されたオプションのインデックスを取得する
-
[解決済み] jQuery append() - 追記された要素を返す
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] YouTube埋め込み動画:異なるサムネイルを設定する
-
[解決済み] jest.fn()の値はモック関数またはスパイである必要があります。
-
[解決済み] Microsoft JSONの日付はどのようにフォーマットするのですか?
-
[解決済み] Select <a> which href ends with some string
-
[解決済み] jQueryでオブジェクトに登録されたイベントハンドラを検索する
-
[解決済み] ドロップダウンのアイテムの選択値をjQueryで取得する
-
[解決済み] jQueryを使用して配列から特定の値を削除する方法
-
[解決済み] jQuery removeClass ワイルドカード
-
[解決済み】jQueryで入力不可属性をトグルする。
-
[解決済み】jQuery:keyPress Backspaceが発射されない?