HTML5ビデオタグがSafari、iPhone、iPadで機能しない

13sなどの小さなビデオがあるhtml5 Webページを作成しようとしています。このビデオのフラッシュバージョンを3つの形式に変換しました。fireFoggを使用する.ogv、firefoggを使用する.webm、およびHandBrakeアプリケーションを使用する.mp4 htmlスクリプト私は自分のページで使用しました：

<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ビデオをサポートしていることに注意してください

iPhoneやiPadなどのAppleデバイスでも同じ問題が発生しました。低電力モードをオフにしましたが、機能しました。次のplaysinlineように、ビデオタグに属性も含める必要があります。

<video class="video-background" autoplay loop muted playsinline>

を含めplaysinlineた場合にのみ機能しました。

今後のサーチャーのための別の可能な解決策：（問題が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>

WebサーバーがHTTPバイト範囲リクエストをサポートしていない可能性があります。これは私が使用しているWebサーバーの場合であり、その結果、ビデオウィジェットが読み込まれて再生ボタンが表示されますが、ボタンをクリックしても何も起こりません。—ビデオはFFおよびChromeでは機能しますが、iPhoneまたはiPadでは機能しません。

mobiforge.comのバイト範囲リクエストについて詳しくは、付録A：Apple iPhone向けストリーミングをご覧ください。

まず、Safari Webブラウザーがコンテンツを要求し、それがオーディオまたはビデオファイルの場合は、メディアプレーヤーを開きます。次に、メディアプレーヤーはコンテンツの最初の2バイトを要求し、Webサーバーがバイト範囲の要求をサポートするようにします。次に、それらをサポートしている場合、iPhoneのメディアプレーヤーはバイト範囲で残りのコンテンツをリクエストし、再生します。

「iphone mp4 byte-range」でWebを検索するとよいでしょう。

ビデオがセッションベースのログインシステムによって保護されている場合、Safariはそれらのロードに失敗します。これは、Safariがビデオの最初のリクエストを行い、次にタスクをQuickTimeに渡し、QuickTimeが別のリクエストを行うためです。Safariはセッション情報を保持しているため、認証を通過しますが、QuickTimeは通過しません。

これは、サーバーアクセスログを表示すると確認できます...最初にSafariからのリクエスト、次にQuickTimeからのリクエスト。他のブラウザーは、ブラウザー自体から単一の要求を行うだけです。

これが問題である場合は、一時的なトークンを使用するためにビデオアクセスを再作成するか、元のリクエストからの限られた時間のアクセスが必要になる可能性があります。より直接的な解決策が見つかった場合は、この回答を更新します。

今後の検索のためにも、たとえばhandbrake-gtkfrom を使用してHandbrakeでダウンスケールしたmp4ファイルがありました。Ubuntu 14.04では、レポジトリにはMP4のサポートが含まれていません。私はデフォルト設定を残し、オーディオトラックを取り除き、*。M4Vファイルを生成しました。不思議に思う人のために、それらは同じコンテナですが、M4Vは主にiOSでiTunesで開くために使用されます。apt-getsudo apt-get install handbrake-gtkhandbrake

これは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タイプを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タイプのその他の組み合わせは私にとってはうまくいきませんでした。ソースリストで技術的にサポートされている最初のソースを選択する必要があると確信している場合でも、他のブラウザーは最初にWEBMファイル、特にChromeを選択すると思います。

ただし、iOSデバイス（iPad 3の「新しいiPad」とiPhone 6でテスト済み）のビデオの問題は修正されていません。

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（）メソッドを尊重するようになりました。

• <video> ソースメディアにオーディオトラックが含まれていない場合、またはmutedプロパティがtrueに設定されている場合、要素はユーザージェスチャーなしでplay（）を実行できます。
• 場合<video>要素は、オーディオトラックを獲得するか、ユーザのジェスチャずにアンミュートになり、再生が一時停止します。
• <video> 要素は、画面上に表示されていない場合、またはビューポートの外にある場合にplay（）が許可されます。
• video.play（）はPromiseを返しますが、これらの条件のいずれかが満たされない場合は拒否されます。

iPhoneでは、<video playsinline>要素をインラインで再生できるようになり、再生の開始時に自動的にフルスクリーンモードになりません。 <video>playinginline属性のない要素は、iPhoneでの再生に引き続きフルスクリーンモードを必要とします。ピンチジェスチャーでフルスクリーンを終了すると、<video>playsinlineのない要素は引き続きインラインで再生されます。

SafariはHTML5ビデオをサポートしていますが、これを機能させるにはQuicktime Playerをインストールする必要があることがわかりました。私が作成したHTML5ビデオを使用するサイトで、Safariを使用すると、Quicktimeがインストールされている必要があることをユーザーに警告します。そうしないと、ビデオのトランスクリプトしか表示できません。お役に立てれば。

信頼されていない「開発」SSL証明書で奇妙な問題が発生しました。モバイルSafariはページを非常に喜んで提供しますが、証明書を受け入れても「偽の」SSL証明書へのビデオの提供を拒否します。

テストするには、ビデオを他の場所にデプロイするか、http（ページ全体）に切り替えると再生されます。

ビデオがミュートされていてもかまわない場合は、iPhoneとIpaで「playsinline」を追加するとうまくいきます。

<video muted playsinline>
  <source src="..." type="video/mp4">
</video>

ビデオをミュートしたくないが、それでも自動再生が必要な場合は、jsでミュート属性を削除してみてください。 ミュートされたプロップでhtml5ビデオのミュートを解除する方法

iOS 6.1以降、iPadで動画を自動再生することはできなくなりました。Appleのドキュメントによると、iPadを含むすべてのiOSデバイスのSafariで自動再生機能が動作していません。

「Appleは、スクリプトと属性の実装の両方を通じて、iOSデバイスでのビデオの自動再生を無効にすることを決定しました。

Safariでは、iOS（iPadを含むすべてのデバイス）で、ユーザーがセルラーネットワーク上にあり、データユニットごとに課金される場合があるため、プリロードと自動再生は無効になっています。ユーザーが開始するまで、データは読み込まれません。」

あなたはこのアップルのドキュメントでもっと読むことができます

.mp4の場合、これは機能します（safariモバイルおよびデスクトップ）：

<video height="250" width="250" controls>
    <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

controls=”true”Appleはちょうど自分自身でコントロールを使用言うように上記の記事で言及したが、私に何のローミングサービスを行いません。

参照：「HTML5オーディオまたはビデオを使用するには、まずまたは要素を作成し、メディアのソースURLを指定して、controls属性を含めます。 <video src="http://example.com/path/mymovie.mp4" controls></video>」

ソース：https : //developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

私の取引では（少し余談です）、iPhoneからビデオをアップロードすると、.quicktimeとしてサーバーに送信されることがわかりました。皮肉なことに、これはサファリでサーバーからビデオを再生しようとするときの問題です。（モバイルとデスクトップ）。

したがって、（私のように）safariで.quicktime（または.mp4以外の何か）の問題が発生している場合は、アップルが提供する回避策を以下に示します。注、私はまだ自分でテストしていないので、一目でそれだけでは満足せず、詳細情報を提供するだけです。

参照： 「QuickTimeプラグインにフォールバックするほとんどすべてのブラウザーで機能するQuickTimeプラグインにフォールバックする簡単な方法があります。Appleが提供するビルド済みのJavaScriptファイルac_quicktime.jsをHTMLビデオサンプルからダウンロードしてください。次のコード行をHTMLヘッドに挿入して、それをWebページに含めます<script src="ac_quicktime.js" type="text/javascript"></script>。

出典： https //developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6

更新：.quicktimeの名前を.mov以前のサーバーへのアップロードに変更する場合（base64ファイルタイプ "data：video / mov;"の場合）、ac_quicktime.jsをスキップします。。。その後、htmlビデオタグで機能します。ハッカーハック。

このコードを使用することにより、ビデオはSafariのすべてのブラウザーと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>

`

<video>タグ内の動画がChromeとFirefoxでのみ再生され、Safariでは再生されないという同様の問題がありました。これは私がそれを修正するためにしたことです...

私が見つけた奇妙なトリックは、あなたのビデオへの2つの異なる参照を持つことです。1つ<video>はChromeとFirefoxのタグで、もう1つは<img>Safariのタグでした。面白いことに、ビデオは実際<img>にはSafariのタグで再生されます。この後、特定のブラウザを使用しているときにどちらか一方を非表示にする簡単なスクリプトを記述します。だから例えば：

<video id="video-tag" autoplay muted loop playsinline> 
    <source src="video.mp4" type="video/mp4" />  
</video>
<img id="img-tag" src="video.mp4">

<script type="text/javascript">
    function BrowserDetection() {

    //Check if browser is Safari, if it is, hide the <video> tag, otherwise hide the <img> tag
    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
        document.getElementById('video-tag').style.display= "none";
    } else {
        document.getElementById('img-tag').style.display= "none";
    }               

    //And run the script. Note that the script tag needs to be run after HTML so where you place it is important. 
    BrowserDetection();
</script>

これは、特定のブラウザーで正しく表示されない一部のビデオの細い黒いフレーム/ボーダーの問題の解決にも役立ちます。

Safariでの.mp4再生が機能しないという問題がありましたが、他のブラウザーでは問題ありませんでした。コンソールに表示されていたエラーは次のとおりです。エラーメディアsrcはサポートされていません。私の場合、これはMIMEタイプの問題であることが判明しましたが、IISでMIMEタイプとして宣言されていなかったためではなく、2回宣言されたためです（IISとweb.configファイルで1回）。これは、.mp4ファイルをサーバーのローカルにダウンロードしようとしたときにわかりました。再生しようとしたコンテンツの場所から設定ファイルを削除し、問題を修正しました。MIMEタイプをweb.configファイルから削除することもできましたが、この場合、web.configファイルは必要ありませんでした。

IOSの場合、mp4ソースファイルのみを使用してください。最新のSafariブラウザーで、Safariブラウザーがソースファイルを正しく検出できない問題が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 deosntは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>

同じ問題が発生しました-ビデオアセットのURLが安全なドメインからのものであることを確認してください。私たちの開発環境はhttpで、プロダクションは安全です。相対パスを介して参照されているビデオのため、開発に取り組んでいませんでした。アップルがビデオを保護する必要があるという問題のようです...

動作していますが、MacOには最近ユーザーの自動再生ポリシーがあります：https ://webkit.org/blog/7734/auto-play-policy-changes-for-macos/ 、ボタンを使用してサウンドを有効にする同じ問題を解決しました：

ejm：

<video autoplay loop muted id="myVideo">
  <source src="amazon.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos...
</video>

<button class="pausee" onclick="disableMute()" type="button">Enable sound</button>

<script>
var vid = document.getElementById("myVideo");
function disableMute() { 
  vid.muted = false;
}
</script>

同じ問題に直面しています。ビデオフレームのサイズが大きすぎたからです。つまり、2248 pxのAppleは、H.264ベースラインプロファイルレベル3.0ビデオ、30 fpsで最大640 x 480をサポートします。Bフレームはベースラインプロファイルではサポートされないことに注意してください。 詳細はこちらを確認してください

私の場合に役立ったのは、オーディオトラックのドロップでした。以前は無音でしたが、完全に消えなければなりませんでした。

ubuntuの場合：

ffmpeg -i input.mp4 -vcodec copy -an output.mp4

そして、サファリ/デスクトップはビデオを再生し始めます

私の使用例では、次の2つがありました。

1. 新しい属性/ webkitのポリシー を使用していませんでしたplaysinline。
2. 私のビデオ/ mime-typeまたはwhathathellが適切にエンコードされていなかったため、このサイトを使用して、必要なすべての形式に変換しました：https : //pt.converterpoint.com/

o /

私もまったく同じ問題を抱えていました。HTMLビデオタグがChromeとMozilla、Safariでうまく再生されました-コントロールは表示されましたが、ビデオが空白でした。上記のすべての属性、ミュートの削除/追加、playsInlineなどを試してみましたが、何も機能しませんでした。ここでも説明されているように、サーバーに問題がありました。私はこれを持っていました-うまくいきませんでした：

<video 
  muted
  playsInline
  controls
  style={{ width: `100%` }}>
  <source src={MfMfVideo} type="video/mp4" />
  <source src={MfMfVideoWebM} type="video/webm" />
</video>

ビデオを外部ライブラリに移動しただけで、Safariは問題なく動作します。

<video 
  muted
  playsInline
  controls 
  style={{ width: `100%` }}>
  <source src={"https://blabla.com/video/dixneuf-video_r8xuvc.mp4"} type="video/mp4" />
  <source src={"https://blabla.com/videodixneuf-video_gyquuu.webm"} type="video/webm" />
  Sorry, your browser doesn't support embedded videos.
</video>

ビデオを30MB未満に圧縮する以外は何もうまくいきませんでした。これでうまくいきましたが、非常に悪い圧縮でした。

同じ問題が発生した場合、サーバーでバイト範囲サポートを有効にすることで解決しました。Safariではバイト範囲リクエストが必要なようです。私の場合、NGINXを使用しており、構成proxy_force_ranges on;ファイルに追加する必要がありました。この回答のおかげで！