web-dev-qa-db-ja.com

<video>は他のブラウザで再生されますが、Safariでは再生されません

私たちのサイトにはMP4ビデオがあります。 IE9 +、Firefox、Chrome、およびMacではChromeで正常に再生されます。ただし、Safariでは、ビデオはまったく再生されません。「ストール」イベントがトリガーされ、何も読み込まれませんHTMLを投稿しましたが、元のMP4のURLに移動してもSafariが再生しないことを発見することで、問題をさらに追跡しました。ダウンロードしてローカルで再生すると、ビデオはQuicktimeで正常に動作します。

これの最も奇妙な部分は、すべての開発者の部分です[〜#〜] i [〜#〜]開発コンピューターから関連サーバーを実行すると、Safariでビデオを動作させることができます。さらに、同じディレクトリ内の他のMP4ファイルにも同様の問題があります。これが私にとっての鍵であり、サーバーからのビデオの転送方法の少しの違いを探しています-要求/応答ヘッダー、正確なファイルサイズなど。

Chromeからコピーされたヘッダー(Safariのコピー/貼り付けが難しいためのみ)

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
DNT:1
Host:*************:8443
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.95 Safari/537.36

Response Headers
Accept-Ranges:bytes
Content-Length:44875102
Content-Type:video/mp4;charset=UTF-8
Date:Tue, 30 Dec 2014 21:11:51 GMT
ETag:W/"44875102-1419959755000"
Last-Modified:Tue, 30 Dec 2014 17:15:55 GMT
Server:Apache-Coyote/1.1

(また、これが古い問題を思い出させる場合に備えて; Windows上のSafariは古くから死んでいることを知っています。この問題はOS Xで発生しています)

編集:少し役立つかもしれない新しい情報。問題のあるSafariブラウザで動作することができた自分のWebサーバーから個人的なビデオを取得し、サーバーのローカルビデオディレクトリにダウンロードしました。 そこから、他のビデオと同じ問題が発生します。これは、MP4自体は重要ではないことを示唆しています。これはおそらく、Tomcat 7 Webサーバーでの何らかのサーバーの問題です。少なくとも基本をカバーするContent-Typeが正しく登録されていますが、他に必要な部分があるかどうかは知りたいです。

詳細:最初にこれについて言及するつもりはありませんでしたが、HTTPS接続を介してWebページとビデオを読み込んでいます。ほとんどのテストサーバーには有効な証明書がないため、「このサーバーは、このサーバーではない可能性があります」という警告を表示する標準のブラウザーをクリックする必要があります。現在、すべてのサーバーで正しい証明書を取得するために必要なことを検討しています。

14
Katana314

Safariでは、メディアコンテンツを再生するためにWebサーバーが「 Range 」リクエストヘッダーをサポートする必要があります。

https://developer.Apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html#//Apple_ref/doc/uid/TP40006514-SW6

正当な「Range」リクエスト応答の場合、Webserveはステータスコード「206」を返す必要があります。

13
Reeve Lau

Htmlコードでcontrols = 'true' type = 'video/mp4'が指定されていることを確認してください。

<video loop controls='true' width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
3
John Hua

新しいMP4ファイルをアップロードしましたが、Chrome、Oasis、Firefox、またはBraveではなく、SAFARIでのみ再生されました(MACとiPhoneの両方で)。 HTMLコードは以前の成功と同じでした。ファイルサイズとサイズは良好でした。しかし、古い作業ファイルのコーデックは「H.264、AAC」でした。動作していない新しいファイルのコーデックは「MPEG-4、AAC」でした。 VideoPadでビデオファイルを編集します。そこで、「ファイルをエクスポートする」オプションの仕様の選択を調べましたが、確かに、コーデックはMPEG-4にデフォルト設定されていました。 H.264を選択し、ファイルをエクスポートしました。 AWSにアップロードして公開しました。 4つのエラーブラウザとBINGO!で新しいファイルを再試行しましたが、すべて正常に機能しました。神がいます!

2
David Shoup

Safariでは、サーバーがバイト範囲をサポートする必要があり、ファイルタイプのサフィックスよりもMIMEタイプを優先します。

https://stackoverflow.com/a/51901198/1047992 で私の答えをご覧ください

2
David

これは実際、使用しているバージョンによっては、バイト範囲のサポートが欠落している問題になる可能性があります。 MAGNOLIA-3855 (Magnolia修正バージョン4.4.6)でDMSDownloadServletに追加されました。

1
user667

この問題を既に解決している場合はご容赦ください。 Safariのサーバービデオでも同じ問題が発生しました。サーバーが送信しているヘッダーを確認するために、POSTMAN/INSOMNIAを使用してこれを解決することができました。 Chromeはあなたをだましてしまう可能性があります。一度このブラウザでビデオが正常に機能すれば!

ビデオが範囲外(フルビデオリクエスト)でない場合、サーバーはstatus(200)を返し、「Accept-Ranges:bytes」がサーバーから送信されているかどうかを確認する必要があります。ヘッダーサンプルステータス200:

Server: nginx
Date: Wed, 25 Jul 2018 17:34:18 GMT
Content-Type: video/mp4
Content-Length: 22995782
Connection: keep-alive
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, PATCH, DELETE
Access-Control-Allow-Headers: X-Requested-With,content-type
Access-Control-Allow-Credentials: true
Accept-Ranges: bytes

ビデオの範囲が指定されている場合、サーバーは範囲ヘッダー付きのstatus(206)を正しく返す必要があります。ヘッダーサンプルステータス206:

Server: nginx
Date: Wed, 25 Jul 2018 18:13:07 GMT
Content-Type: video/mp4
Content-Length: 1023
Connection: keep-alive
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, PATCH, DELETE
Access-Control-Allow-Headers: X-Requested-With,content-type
Access-Control-Allow-Credentials: true
Accept-Ranges: bytes
Content-Range: bytes 1-1023/22995782

これがお役に立てば幸いです!敬具、パウロ・デュルソ

最近、私のチームは同じ動作を引き起こす特定の問題に遭遇しました。 Apache 2.4を使用しており、.htpasswdなどの認証レイヤーが有効になっている場合、Safariは認証後もビデオをまったく表示しません。これは、特定のタイプの後続のHTTP要求の初期認証クリアランスを引き続き尊重しないかのようです。

申し訳ありませんが、これ以上技術的な情報は提供していませんが、Safariでのみビデオの問題が発生している人をチェックするものです。

0
RedYetiCo

...

余談ですが、charsetはvideo/mp4タイプではまったく意味がありますか?その文字セットを削除してみてください。

編集:はい、文字セットに問題がある可能性があります。 マグノリアにアップロードされたドキュメントのコンテンツタイプを指定

EDIT2:文字セット、フープ、読解は失敗しません。バイト範囲かもしれませんか? 「[...] Safari/iOSは「オーディオおよびビデオファイルの要求にHTTPバイト範囲を使用していることがわかりました。」」失敗します。」

0
Nexii Malthus

これらを.htaccessに追加するとどうなりますか?

AddType video/ogg .ogv
AddType video/mp4 .mp4
AddType video/webm .webm
0
neokio

私は同じ問題にぶつかり、それを解決しましたが、ここにある他の答えは私のものには関係していません。したがって、私は以下の誰かのためにここで解決策を残します。

私は独自のビデオストリーミングサーバーを作成していますが、質問された場合、単に「Ranged」mp4ファイルを返しますが、Safariは何らかの理由で「Connection」応答ヘッダーのないHTTP応答で運ばれたビデオを再生しません。

0
findall