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

123

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

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

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

jquery  ios  objective-c  html  cocoa-touch 
— ジェム
ソース
— apsillers
多分、我々は、ブラウザ検出を見なければならない、とあなたはplayVideoを呼び出す必要があるかどうか（）：stackoverflow.com/questions/26895492/...
— Redtopia
この作品は私のためにgithub.com/Stanko/html-canvas-video-player
— dimitar '17
このトピックに関する有用なブログ記事：webkit.org/blog/6784/new-video-policies-for-ios
— Matthias M
iosのopera miniはデフォルトで自動再生をサポートしていますが、chrome、firefox、safariはオンにするオプションを提供しておらず、提供していません。
— 匿名

回答:

156

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()とload()メソッドが非アクティブであることです。play()load()

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

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

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

一方、iOSでは次のことは何も行いません。 

<body onload="document.myMovie.play()">
— dsgriffin
ソース
1
うーん、iPhone Safari用のオンライン目覚まし時計を3か月作成してみてください。私たち（sleep.fm）は、アプリが開いている間、電話を覚醒させ続ける方法を考え出しましたが、iOS 6.1では、アラームオーディオが再生されません。iOS 6.0では問題なく動作しました。回避策はありますか？
— chaser7016 2013年
1
iPhone Safari用のモバイルWeb目覚まし時計（sleep.fm）が稼働し始めたので、html5自動再生がサポートされていないための回避策があります。
— chaser7016 2013
1
@ Jonah1289 Sleep.fmのブログ投稿によると、Brian Cavalierが次のタイトルのgithubリンクにツイートしました。オーディオタグの代わりにwebkitaudiocontextを使用して、iPadまたはiPhoneでオーディオを自動再生します。
— サンフランシスコ
1
詳細を教えてください-自動再生がサポートされていないため、具体的な回避策はありますか？
— Umopepisdn 2014年
11
彼らがすべきことは、wifiでの自動再生を許可し、モバイルネットワークで動画を自動再生したいことを手動で再生するか、ユーザーに促すことです。
— Ric
16

まず、この質問は古く、すでに受け入れられた回答があることを理解することから始めたいと思います。しかし、残念なことに、この質問を使用して終了した直後（ただしクライアントを少し混乱させる前ではない）に終了する手段としてこの質問を使用したインターネットユーザーとして、自分の考えと提案を追加したいと思います。

@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"
});

ページで非表示にした状態で、ユーザーが「クリック」して映画を見ると（まだユーザーの操作ですが、その要件を回避する方法はありません）、セカンダリの再生ページに移動するのではなく、非表示のビデオをロードします。これは主に機能します。メディアタグは実際には使用されず、代わりに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でビデオを再生するので、再生する前にクリックでビデオのサイズを変更するためのメカニズムが必要です。そうしないと、オーディオが表示されてビデオが表示されなくなります。

— ブランドンバック
ソース
2
$dummyVideo.get(0)ブラケットの代わりに使用することをお勧めします。選択が空の場合、jQueryは正常に失敗する可能性があります。
— Micros
12

設定するだけ

webView.mediaPlaybackRequiresUserAction = NO;

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

— 李
ソース
29
これはWebサイトでは機能せず、ネイティブアプリケーションでラップしたサイトでのみ機能します。
— Brandon Buck
5
つまり、（質問が尋ねているように）Webページからこれは完全にアクセスできないものです-はい、ブラウザのJavaScriptはこれを行うことができません。これは、自分が制御できるアプリケーションからWebView内でサイトを実行している場合にのみ機能するため、実際には問題の解決策にはなりません。
— ブランドンバック
6
@izurielは公平であるように、質問に「objective-c」と「cocoa-touch」のタグを付けたので、ウェブビューを使用していると推測するのはそれほど難しいことではありません
— Kloar
3
@Kloarタグは、通常、解決しようとしている問題に対するより多くの注意または一般的な誤解を得るための手段として追加されます。質問をしている人は、objective-cについて言及することは「iOS」と言うことと同じだと思ったかもしれません（そしてココアタッチについても同様です）。「uiwebview」タグはリストされていませんが、実行可能なオプションとして除外します。この質問では、デスクトップとiPadでのSafariの使用法について言及し（アプリについては何もありません）、JavaScriptデモコードを使用して状況をデバッグします。全体として、この質問は実際にはネイティブソリューションではなくWebを探していた方が安全だと思います。
— Brandon Buck 14年
— cottonBallPaws
11

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/

— ジャックカリッシュ
ソース
4
autoplay属性はPCでは機能するだけで、モバイルでは機能しません。私は何度も試しました。
— huykon225 2017年
7

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

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

— ジョナ
ソース
38
「GIFファイルは別として、数MBになり、帯域幅を使用しても、気付かれることさえあり
— ません
ほとんどの場合、正確には@Simon_Weaver x12回。
— Burak Tokak 2017
2

最初にビデオをミュートして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>
— モハマド・アリ・アクバリ
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.