jquery - iPad で HTML5 ビデオを自動再生できますか?

Question

<video>tags属性は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は iPad ではそのままです。私のデスクトップサファリでは、0、1そして最後に4. 4iPad では、「再生」矢印を手動でタップした場合にのみ到達します。

$("#periscopevideo").get(0).play()さらに、クリック経由での呼び出しonClickも機能します。

自動再生に関して Apple による制限はありますか? （ちなみに、私はiOS 5+を実行しています）。

score 158 · Accepted Answer

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 のドキュメント。

iOS の Safari で埋め込みメディアを再生できない理由について、 Safari HTML5 リファレンスページに掲載されている別の警告を次に示します。

警告: ユーザーの費用負担によるセルラーネットワーク経由での一方的なダウンロードを防ぐため、埋め込みメディアは iOS の Safari では自動的に再生できません。常にユーザーが再生を開始します。iPhone または iPod touch では、再生が開始されるとコントローラが自動的に提供されますが、iPad の場合は、controls 属性を設定するか、JavaScript を使用してコントローラを提供する必要があります。

これが (コードの観点から) 意味することは、ユーザーアクション (クリックイベントなど) によってorメソッドがトリガーされない限り、ユーザーが再生を開始するまでJavascript のplay()andメソッドが非アクティブであることです。load()play()load()

基本的に、ユーザーが開始した再生ボタンは機能しますが、onLoad="play()"イベントは機能しません。

たとえば、次のようにするとムービーが再生されます。

<input type="button" value="Play" onclick="document.myMovie.play()">

以下はiOSでは何もしません：

<body onload="document.myMovie.play()">

score 16 · Accepted Answer

この質問は古く、すでに受け入れられている答えがあることを認識していると言うことから始めたいと思います。しかし、この質問を終了の手段として使用した不幸なインターネットユーザーとして、私の考えと提案を追加したいと思います。

@DSG と @Giona は正しく、その回答には何の問題もありませんが、いわばこの制限を「回避」するために使用できる創造的なメカニズムがあります。私がこの機能の回避を容認しているというわけではなく、まったく逆で、ビデオまたはオーディオファイルが「自動再生」されているかのようにユーザーが「感じる」ためのいくつかのメカニズムにすぎません。

簡単な回避策は、モバイルページのどこかにビデオタグを非表示にすることです。私はレスポンシブサイトを構築したので、小さい画面でのみこれを行います。video タグ (HTML および jQuery の例):

HTML

<video id="dummyVideo" src="" preload="none" width="1" height="2"></video>

jQuery

var $dummyVideo = $("<video />", {
  id: "dummyVideo",
  src: "",
  preload: "none",
  width: "1",
  height: "2"
});

ページにそれが隠されていると、ユーザーが映画を見るために「クリック」すると（まだユーザーの操作であり、その要件を回避する方法はありません）、セカンダリの視聴ページに移動する代わりに、非表示のビデオをロードします。これは、メディアタグが実際には使用されず、代わりに Quicktime インスタンスに昇格されるため、主に機能するため、可視のビデオ要素はまったく必要ありません。「クリック」(モバイルでは「タッチエンド」) のハンドラー。

$(".movie-container").on("click", function() {
  var url = $(this).data("stream-url");
  $dummyVideo.attr("src", url);
  $dummyVideo.get(0).load(); // required if src changed after page load
  $dummyVideo.get(0).play();
});

そしてヴィオラ。UX に関する限り、ユーザーがビデオをクリックして再生すると、Quicktime が開き、選択したビデオが再生されます。これは、ユーザーアクションによってのみ動画を再生できるという制限内にとどまっているため、このサービスで動画を視聴することに決めていない人にデータを強制することはありません。Youtubeがモバイルでこれをどのように実現したかを理解しようとしたときに、これを発見しました。これは、本質的に、ビデオタグの場合のように、非常に優れたJavascriptページの構築と派手な要素の非表示です。

tl;dr ここでは、Apple の制限を超えずに、iOS デバイスで「自動再生」UX 機能を作成しようとする「回避策」を示します。また、ビデオ (またはオーディオ) を見たいかどうかをユーザーに決定させることもできますが、テストしていません) 自分の許可なしにロードしたばかりではありません。

また、sleep.fm からコメントした人にとっては、残念ながら、これは時間ベースのオーディオ再生の問題に対する解決策にはなりませんでした。

誰かがこの情報を役に立つと思ってくれることを願っています.この機能を持っていることを固く信じていたクライアントに悪いニュースを配信するのに1週間節約できたでしょう.

編集

さらに、上記の回避策は iPhone/iPod デバイス専用であることを示しています。iPad は、全画面表示になる前に Safari でビデオを再生するため、再生する前にクリック時にビデオのサイズを変更するメカニズムが必要です。

score 12 · Accepted Answer

iOS 10 以降、ビデオは自動再生できるようになりましたが、ミュートされているか、オーディオトラックがない場合に限られます。わーい！

要するに：

<video autoplay>要素は、次の条件を満たす要素に対して autoplay 属性を尊重するようになりました:
- <video>ソースメディアにオーディオトラックが含まれていない場合、要素はユーザーのジェスチャーなしで自動再生できます。
- <video muted>要素は、ユーザーのジェスチャーなしで自動再生することもできます。
- <video>要素がオーディオトラックを取得するか、ユーザーのジェスチャーなしでミュートが解除されると、再生が一時停止します。
- <video autoplay>要素は、ビューポートにスクロールされたとき、CSS によって可視化されたとき、DOM に挿入されたときなど、画面上に表示されたときにのみ再生を開始します。
- <video autoplay>ビューポートからスクロールアウトされるなどして、要素が見えなくなった場合、要素は一時停止します。

詳細はこちら: https://webkit.org/blog/6784/new-video-policies-for-ios/

score 12 · Accepted Answer

設定するだけ

webView.mediaPlaybackRequiresUserAction = NO;

自動再生は iOS で機能します。

score 7 · Accepted Answer

このSafari HTML5 リファレンスでは、以下を読むことができます。

ユーザーの費用負担によるセルラーネットワーク経由での一方的なダウンロードを防ぐために、埋め込みメディアは iOS の Safari では自動的に再生できません。常にユーザーが再生を開始します。iPhone または iPod touch では、再生が開始されるとコントローラが自動的に提供されますが、iPad の場合は、controls 属性を設定するか、JavaScript を使用してコントローラを提供する必要があります。

jquery - iPad で HTML5 ビデオを自動再生できますか?

6 に答える 6

Related

Reference