web-dev-qa-db-ja.com

iPadでHTML 5ビデオを自動再生できますか？

<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();
    }
}

IPadの状態は0のままです。私のデスクトップサファリでは、それは0、1そして最後に4を通ります。 iPadでは、 "play"の矢印を手動でタップすると4にしか到達しません。

さらに、クリックからonClickを介して$("#periscopevideo").get(0).play()を呼び出すこともできます。

自動再生に関してAppleによる制限はありますか？ （私はところでiOS 5+を実行しています）。

jqueryiosobjective-chtml5cocoa-touch
122
Jem

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で埋め込みメディアを自動的に再生することはできません。ユーザーは常に再生を開始します。コントローラは、再生が開始されるとiPhoneまたはiPod touchに自動的に提供されますが、iPadの場合は、controls属性を設定するか、JavaScriptを使用してコントローラを提供する必要があります。

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

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

たとえば、これは映画を再生します：

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

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

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

私は、この質問は古く、すでに受け入れられた答えがあることに気づいたと言うことから始めたいと思います。しかし、この質問を使用したことが不幸なインターネットユーザーであり、その直後に（ただし、クライアントを少し混乱させる前ではなく）間違っていることを証明するための手段として使用しました。

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

私はレスポンシブサイトを構築したので私は小さいスクリーンのためにこれをするだけなので、簡単な回避策は携帯ページのどこかにビデオタグを隠すことです。ビデオタグ（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"
});

それがページに隠されている状態で、ユーザーが映画を見るために「クリック」したとき（まだユーザーインタラクション、その要件を回避する方法はありません）、私は隠れたビデオをロードします。 mediaタグは実際には使用されていませんが、代わりにQuicktimeインスタンスにプロモートされているので、これは主に機能します。 「クリック」（またはモバイルでは「touchend」）のハンドラ内。

$(".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によるものであるとコメントした人には、残念ながらこれは時間ベースのオーディオ再生であるあなたの問題に対する解決策ではなかったでしょう。

誰かがこの情報を役に立ちそうだと願っています、それは彼らがこの機能を持っていることを確信していたクライアントへの悪いニュース配信の私の週を救って、最後にそれを届ける方法を見つけることができてうれしいです。

EDIT

それ以上の調査結果は上記の対応策がiPhone/iPodデバイスだけのためであることを示します。 iPadは、フルスクリーンされる前にSafariでビデオを再生するので、再生前にクリックでビデオのサイズを変更するための何らかのメカニズムが必要です。そうしないと、オーディオでビデオが表示されなくなります。

16
Brandon Buck

ただセット

webView.mediaPlaybackRequiresUserAction = NO;

自動再生はiOS上で私のために働きます。

12
Er Li

IOS 10以降、ビデオはcanautoplayになりましたが、ミュートされているかオーディオトラックがないかのいずれかです。わーい！

要するに：

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

ここでより多くの情報： https://webkit.org/blog/6784/new-video-policies-for-ios/

11
JackKalish

これで Safari HTML5リファレンス 、あなたは読むことができます

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

7
Giona

IOSで自動再生を確実にするためにビデオを最初にミュートにしてから、必要に応じてミュートを解除します。

<video autoplay loop muted playsinline>
  <source src="video.mp4?123" type="video/mp4">
</video>

<script type="text/javascript">
$(function () {
  if (!navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    $("video").prop('muted', false);
  }
});
</script>
3
Mohammad Ali Akbari