Safari、iPhone、iPadでHTML5 Videoタグが機能しない
私は13秒のような小さいビデオがあるhtml5ウェブページを作成しようとしています、私は3つのフォーマットにこのビデオのフラッシュバージョンを変換しました。私は自分のページで使用しました：
<video width="800" height="640" loop preload="false" autoplay controls tabindex="0">
<source src="xmasvideo/video.mp4" type="video/mp4" />
<source src="xmasvideo/M&P-Xmas 2.ogv" type="video/ogv" />
<source type="video/webm" src="xmasvideo/M&P-Xmas.webm" />
</video>
ビデオはChromeとFireFoxでは問題なく動作しますが、デスクトップのSafariでもiPhoneでもiPadでもまったく動作しません。出力は単にビデオタグのコントロールを表示する空白のページですが、何も読み込まれません。
私が持っているSafariバージョンはHTML5ビデオをサポートしていることに注意してください。
あなたの将来の検索者のためのもう一つの可能な解決策：（あなたの問題がMIMEタイプの問題ではない場合）
どういうわけか私がcontrols = "true"フラグをセットしない限りビデオはiPadで再生されないでしょう。
例：これはiPhoneでは動作しましたが、iPadでは動作しませんでした。
<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
そしてこれは今iPadとiPhoneの両方で動作します。
<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
iPhoneやiPadなどのAppleデバイスで同じ問題が発生しました。低電力モードをオフにすると動作しました。また、ビデオタグにplaysinline属性を含める必要があります。
<video class="video-background" autoplay loop muted playsinline>
playsinlineを含める場合にのみ機能しました。
WebサーバーはHTTPバイト範囲要求をサポートしていない可能性があります。これは私が使用しているWebサーバーの場合です。その結果、ビデオウィジェットがロードされ、再生ボタンが表示されますが、ボタンをクリックしても効果はありません。 - ビデオはFFとChromeで動作しますが、iPhoneやiPadでは動作しません。
続きを読む ここmobiforge.com バイト範囲要求について、=付録A：Apple iPhone向けのストリーミング：
まず、Safari Webブラウザがコンテンツを要求し、それがオーディオファイルまたはビデオファイルの場合は、メディアプレーヤーを開きます。その後、メディアプレーヤーはコンテンツの最初の2バイトを要求して、Webサーバーがバイト範囲の要求を確実にサポートするようにします。それをサポートしていれば、iPhoneのメディアプレーヤーは残りのコンテンツをバイト範囲で要求して再生します。
あなたは "iphone mp4 byte-range"でウェブを検索したいかもしれません。
あなたのビデオがセッションベースのログインシステムによって保護されている場合、Safariはそれらを読み込めません。これは、Safariが最初にビデオのリクエストを行い、次にタスクをQuickTimeに引き渡し、それによって別のリクエストが行われるためです。 Safariはセッション情報を保持しているため、認証は成功しますが、QuickTimeは通過しません。
あなたがあなたのサーバーアクセスログを見るならば、これを見ることができます...最初にSafariからの要求、それからQuickTimeからの要求。他のブラウザは、ブラウザ自体から単一の要求を出すだけです。
これがあなたの問題であるならば、あなたは一時的なトークンまたは最初の要求からの限られた時間のアクセスを使うためにビデオアクセスを作り直さなければならないかもしれません。もっと直接的な解決策が見つかったら、この回答を更新します。
今後の検索でも、handbrake-gtkのapt-getを使ってHandbrakeでダウンスケールしたmp4ファイルがありました。 Sudo apt-get install handbrake-gtk。 Ubuntu 14.04では、handbrakeリポジトリはそのままではMP4のサポートを含みません。デフォルト設定をそのままにして、オーディオトラックを取り除き、*。M4Vファイルを生成します。疑問に思う人たちにとっては、それらは同じコンテナですが、M4Vは主にiOSでiTunesで開くために使われています。
これはSafari以外のすべてのブラウザでうまくいきました:
<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
<source src="//cdn.foo.com/bar-video.m4v" type="video/mp4">
<source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>
Mime-typeをvideo/mp4とvideo/m4vの間で変更しても効果はありません。私はcontrol属性を追加することもテストしましたが、やはり効果はありません。
これはMavericksのSafari 7やYosemiteのSafari 8を含むテストされたすべてのブラウザでうまくいった。私は単に同じm4vファイル（HTMLだけでなく実際のファイル）をmp4に改名してCDNに再アップロードした。
<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
<source src="//cdn.foo.com/bar-video.mp4" type="video/mp4">
<source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>
Safari私は、実際に名前が付けられたMP4を完全に期待していると思います。ファイルとMIMEタイプの他の組み合わせは私のために働きませんでした。私は、ソースリストが技術的にサポートされている最初のソースを選択すべきだと確信していますが、他のブラウザ、特にChromeを最初に選ぶと思います。
しかし、これはiOSデバイス（iPad 3「新しいiPad」とiPhone 6がテスト済み）のビデオの問題を解決していない。
SafariはHTML5 Videoをサポートしていますが、これを機能させるためにはQuickTime Playerをインストールする必要があります。私が作ったHTML5 Videoを使ったサイトでは、Safariを使っているときにQuickTimeがインストールされていなければならないとユーザに警告しています。お役に立てれば。
私はモバイルSafariがあなたのページを非常に喜んで提供するが、たとえあなたが証明書を受け入れたとしても、ビデオを「偽の」SSL証明書に提供することを拒否する、信頼できない「開発」SSL証明書に関する奇妙な問題を見ました。
テストするには、ビデオを他の場所に配置するか、http（ページ全体）に切り替えて再生します。
muted属性を追加するだけで、すべてうまくいきます。
この答えの源はここにあります： https://webkit.org/blog/6784/new-video-policies-for-ios/
デフォルトでは、WebKitには以下のポリシーがあります。
以下の条件を満たす要素に対して、
<video autoplay>要素はautoplay属性を尊重します。
- ソースメディアにオーディオトラックが含まれていない場合、
<video>要素はユーザーのジェスチャーなしで自動再生できます。<video muted>要素は、ユーザーの操作なしで自動再生することもできます。<video>要素がユーザーのジェスチャーなしでオーディオトラックを取得するかミュート解除されると、再生は一時停止します。<video autoplay>要素は、ビューポートにスクロールされ、CSSを通して表示され、DOMに挿入されたときなど、画面上に表示されたときにのみ再生を開始します。<video autoplay>要素は、ビューポートからスクロールアウトされた場合など、見えなくなった場合は一時停止します。以下の条件を満たす要素に対して、
<video>要素はplay（）メソッドを尊重するようになりました。
- ソースメディアにオーディオトラックが含まれていない場合、またはmutedプロパティがtrueに設定されている場合は、
<video>要素はユーザーの操作なしでplay（）を許可されます。<video>要素がユーザーのジェスチャーなしでオーディオトラックを取得するかミュート解除されると、再生は一時停止します。<video>要素は、画面に表示されていないとき、またはビューポートの外にあるときは、play（）を許可されます。- video.play（）はPromiseを返します。これらの条件のいずれかが満たされない場合、それは拒否されます。
IPhoneでは、
<video playsinline>要素はインラインで再生できるようになり、再生開始時に自動的にフルスクリーンモードに入ることはありません。 playsinline属性のない<video>要素は、iPhoneでの再生にフルスクリーンモードを要求し続けます。ピンチジェスチャーでフルスクリーンを終了するとき、playsinlineのない<video>要素はインラインで再生し続けます。
あなたのビデオがミュートされても構わないのであれば、 'playsinline'を追加してもIphoneとIpaにはうまくいきます。
<video muted playsinline>
<source src="..." type="video/mp4">
</video>
あなたのビデオをミュートしたくないが、それでも自動再生したい場合は、jsでmuted属性を削除してみてください。 html5ビデオをミュートされたプロップでミュート解除する方法
IOSの場合は、mp4ソースファイルのみを使用してください。最近のサファリブラウザには、サファリブラウザがソースファイルを正しく検出できないという問題が1つありました。そのため、ビデオの自動再生が機能しません。
以下の例を確認しましょう -
<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
<source src="video/video.mp4" type="video/mp4"></source>
<source src="video/video.webm" type="video/webm"></source>
</video>
私はmp4、webmをソースファイルに使っています。 Safariはwebmをサポートしていますが、それでも最新のSafariバージョンではwebmを選択してしまい、ビデオの自動再生に失敗します。
そのため、サポートされているブラウザ間で自動再生を機能させるには、まずブラウザをチェックし、それに基づいてHTMLを生成する必要があります。
だからサファリのために、以下のHTMLを使用してください。
<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
<source src="video/video.mp4" type="video/mp4"></source>
</video>
サファリ以外のために、
<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
<source src="video/video.webm" type="video/webm"></source>
<source src="video/video.mp4" type="video/mp4"></source>
</video>
.mp4の場合、これは動作します（Safariモバイルおよびデスクトップ）：
<video height="250" width="250" controls>
<source src="video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
Appleが単独でコントロールを使用すると言っているので、上記の投稿で言及されているcontrols=”true”は私には意味がありません。
参照：“ HTML5オーディオまたはビデオを使用するには、まずor要素を作成し、メディアのソースURLを指定して、controls属性を含めます。 <video src="http://example.com/path/mymovie.mp4" controls></video>”
私の取引では（ちょっとしたコツ）：私はiPhoneからビデオをアップロードすると.quicktimeとしてサーバーに送信することを発見しました。皮肉なことに、これはサファリでサーバーからビデオを再生しようとしたときの問題です。 （モバイル＆デスクトップ）.
だからサファリで.quicktime（または.mp4以外の何か）問題が（私のように）発生しているなら、これはAppleが提供する回避策です。注意してください、私はまだそれを自分自身でテストしていません、そして私は一目でそれに満足しているわけではなく、単により多くの情報を提供しています。
参照：“ QuickTimeプラグインへのフォールバックほとんどすべてのブラウザで動作するQuickTimeプラグインにフォールバックする簡単な方法があります。アップルが提供する事前作成されたJavaScriptファイルac_quicktimeをダウンロードしてください。 HTML Video Exampleのjsをクリックし、次のコード行をHTMLの先頭に挿入して、Webページに含めます。<script src="ac_quicktime.js" type="text/javascript"></script>
更新：.quicktimeの場合サーバーにアップロードする前に.movに名前を変更します（base64ファイルタイプ "data：video/mov;"）、ac_quicktime.jsをスキップします。 。 。その後、HTMLビデオタグで動作します。ハッカーハック。
このコードを使用することでビデオはサファリでもiosデバイスと同様にすべてのブラウザで再生されます...それをみんなのために行ってください（私はこれを使い正常に動いています
`
<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
<source src="video/video.mp4" type="video/mp4"></source>
<source src="video/video.webm" type="video/webm"></source>
<source src="video/video.mov" type="video/mov"></source>
</video>`
IOS 6.1以降、iPadで動画を自動再生することはできなくなりました。 Appleの文書によると、自動再生機能はiPadを含むすべてのiosデバイスでSafariで機能しません。
「Appleは、スクリプトと属性の両方の実装を通じて、iOSデバイスでのビデオの自動再生を無効にすることを決定しました。
SafariのiOS（iPadを含むすべてのデバイス）で、ユーザーが携帯電話ネットワークに接続していてデータユニットごとに課金される可能性がある場合、プリロードと自動再生は無効になります。ユーザーが開始するまでデータはロードされません。 "
もっと詳しく読むことができます このAppleのドキュメント
私は同じ問題に直面しました。私のビデオのフレームサイズが大きすぎるからです。 ie.2248 pxアップルは、30 fpsで最大640 x 480のH.264 Baseline Profile Level 3.0ビデオをサポートしています。 Bフレームはベースラインプロファイルではサポートされていないことに注意してください。 詳細はこれをチェックしてください
私は同じ問題を抱えていた - ビデオアセットのURLがセキュアドメインから来ていることを確認してください。本番環境は安全ですが、開発環境はhttpです。ビデオは相対パスで参照されているため、開発には取り組んでいませんでした。 Appleはビデオが安全であることを要求するという問題であるように思われます...
私はSafariでの.mp4再生がうまくいかなかったところでこの問題を抱えていました、しかし他のブラウザでそれは大丈夫でした。コンソールに表示されていたエラーは次のとおりです。error media src not supported。私の場合、これはMIMEタイプの問題であることが判明しましたが、IISでMIMEタイプとして宣言されたのではなく、2回宣言された（IISおよびweb.configでも1回）という理由によるものではありません。ファイル）。私はサーバー上でローカルに.mp4ファイルをダウンロードしようとすることによってこれを見つけました。再生しようとしていたコンテンツの場所から設定ファイルを削除し、問題を解決しました。私はweb.configファイルからMIMEタイプを削除しただけかもしれませんが、この場合web.configファイルは必要ありませんでした。