<video>
を自分のサイトに埋め込み、ダイアログボックスに表示しようとしています。私はJavaScriptの問題があると思っていましたが、iPhone上のiOS Mobile Safariはローカルネットワークから直接mp4ファイルを再生しないという事実に絞り込んでいます。私のデスクトップサーバーのIPにlocalhost
を変更した点を除いて、リンクはhttp://localhost:3000/assets/introduction-0cf920e06b4224f8f83f59d02f878b7d5733b09590a14147d1580cbfb5081f18.mp4
のように見えます。真ん中に2つのダッシュがあるビデオの最初のフレームと同じ色の黒い画面が読み込まれます。アセットパイプライン経由でiOSのLAN上でMP4ビデオを再生することはできませんが、WANからは可能です
ステージングからMP4のホットリンクをロードすると、正常に再生されます。デスクトップ上のChromeでも正常に再生されます。
また、iPad iOS 9.3.5で再生しようとしましたが、再生できませんでしたが、再生ボタン全体が表示されていませんでした。
動画を/public
フォルダにコピーすると、iOS Safariで再生されます。それは、資産パイプラインを通過するときにのみ失敗するように見えますが、開発中(ステージングでは同じファイル)にのみ発生します。
開発環境でiPhone SafariでMP4ビデオを再生するにはどうすればよいですか?
私はFiddler4プロキシ経由でiPhoneにログインし、ページをリロードしました。私もこの問題を経験していた
GET /assets/introduction-0cf920e06b4224f8f83f59d02f878b7d5733b09590a14147d1580cbfb5081f18.mp4 HTTP/1.1
Host: 10.0.0.14:3000
Upgrade-Insecure-Requests: 1
Connection: keep-alive
Accept-Encoding: gzip, deflate
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us
Connection: keep-alive
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_3 like Mac OS X) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.0 Mobile/14G60 Safari/602.1
HTTP/1.1 200 OK
Content-Type: video/mp4
Cache-Control: public, max-age=31536000
ETag: "0cf920e06b4224f8f83f59d02f878b7d5733b09590a14147d1580cbfb5081f18"
X-Request-Id: b97a488d-7141-434f-813d-af4848162a70
X-Runtime: 0.058637
Content-Length: 27555596
と
GET /assets/introduction-0cf920e06b4224f8f83f59d02f878b7d5733b09590a14147d1580cbfb5081f18.mp4 HTTP/1.1
Host: 10.0.0.14:3000
Range: bytes=0-1
X-Playback-Session-Id: A0C3C96E-6F17-47B1-A509-521B3A61D481
Accept-Encoding: identity
Accept: */*
Accept-Language: en-us
Connection: keep-alive
Connection: keep-alive
User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 10_3_3 like Mac OS X) AppleWebKit/603.3.8 (KHTML, like Gecko) Version/10.0 Mobile/14G60 Safari/602.1
HTTP/1.1 200 OK
Content-Type: video/mp4
Cache-Control: public, max-age=31536000
ETag: "0cf920e06b4224f8f83f59d02f878b7d5733b09590a14147d1580cbfb5081f18"
X-Request-Id: 273865e7-b389-4473-b565-75b2d7ac6559
X-Runtime: 0.038530
Content-Length: 27555596
のiOS 10.3.3、iPhone 5、Windowsの8.1、Railsの5