web-dev-qa-db-ja.com

iOS（iPhoneおよびiPad）でHTML5ビデオタグを使用してmp4ビデオファイルを再生するにはどうすればよいですか？

ビデオタグを使用してユーザーにHTML5ビデオを表示したい。 Firefoxの場合、ChromeおよびOpera WEBMは期待どおりに機能します。WindowsおよびMacのSafariでは、MP4バージョンも機能します。私が経験している唯一の問題は、iPadとiPhone（もちろんSafari）では再生されません。

ビデオを作ろう

MP4（h.264 + acc-lc）は次のように変換されます（プロファイル：iOSとの最大の互換性のためのベースラインとレベル3.0）：

  • ストリーム＃0：0（eng）：ビデオ：h264（制約付きベースライン）（avc1/0x31637661）、yuv420p、640x352、198 kb/s、17 fps、17 tbr、17408 tbn、34 tbc（デフォルト）
  • ストリーム＃0：1（eng）：オーディオ：aac（LC）（mp4a/0x6134706D）、48000 Hz、ステレオ、fltp、56 kb/s （デフォルト）

編集：ffprobe全体の出力（上記のビットレートなどのわずかな変更）：

Metadata:
major_brand     : isom
minor_version   : 512
compatible_brands: isomiso2avc1mp41
encoder         : Lavf56.30.100
Duration: 00:01:00.05, start: 0.046440, bitrate: 289 kb/s
Stream #0:0(eng): Video: h264 (Constrained Baseline) 
(avc1 /0x31637661), yuv420p, 640x352, 198 kb/s, 25 fps, 25 tbr, 
12800 tbn, 50 tbc (default)
Metadata:
  handler_name    : VideoHandler
Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 44100 Hz, 
stereo, fltp, 85 kb/s (default)
Metadata:
  handler_name    : SoundHandler

this や this のようなiOSデバイスのさまざまな要件を見つけました。また、変換時にyuv420pピクセル形式を追加するために someone と述べました。

実際、ffmpeg cmdは次のようになります。

ffmpeg -i __inputfile__ -vcodec libx264 -pix_fmt yuv420p -profile:v baseline -level 3.0 -b:v 200K -r 17 -bt 800K -c:a libfdk_aac -b:a 85k -ar 44100 -y __outputfile_lowversion__.mp4

ビデオを表示する

Modernizrを使用して、どの形式が「サポート」されているかを検出し、それをsrcまたはvideoタグに追加します。最後に、適切なMIMEタイプを追加します。 mp4の場合、type="video/mp4"を追加します。 videoタグの完全なコードは次のとおりです。

<video class="p-video" preload="auto" autoplay="" type="video/mp4" src="http://full.url/to/video_low.mp4"/>

私はさまざまな方法を試しました。独自のインターフェイスを使用した独自の実装、ブラウザベンダーやvideo.jsからのコントロールなどを使用して、これに精通していないかどうかを確認しました。 iPhoneとiPadを除いて、すべて上記の環境で動作します。

私はこの記事を ウェブ上のビデオ 、特に この部分 で読み、posterattributeが設定されていない「right」タイプの「right」ファイルのみを提供します。

私のApacheには

AddType video/mp4                      mp4 m4v f4v f4p
AddType video/ogg                      ogv
AddType video/webm                     webm

また、バイト範囲が有効になります。これは、サーバーから部分的なコンテンツを取得するために必要です。

誰かがそこで何が起こっているのか手がかりを持っていますか？前もって感謝します！

編集：SafariとChrome両方ともiPadでMEDIA_ERR_SRC_NOT_SUPPORTEDエラーをスローします。エンコーディング。

iphonehtmlipadffmpegmp4
6
Marc Saleiko

IPadとiPhoneで再生されない理由を見つけました。 私のフォルダはhtaccess経由でアクセスが制限されていますベータ版アプリケーションを保護します。 Firefoxなどは、ユーザー名とパスワードをすべてのリクエストに転送します。Macのsafariは再度資格情報を要求しますが、iPadとiPhoneのブラウザは要求しません。これをすばやく確認するにはフォルダ保護を削除しましたが、正常に機能しました。私の問題についてのすべての貢献と考えに感謝します！

2
Marc Saleiko

'controls'属性を切り替えるか、srcを別の方法で定義してみてください。

 <video src="http://example.com/path/mymovie.mov"
         controls
         height=340 width=640
         poster="http://example.com/path/poster.jpg">
  </video>

この記事「Safari用のHTML5オーディオとビデオについて」（開発者ガイド）をチェックしてください

また、HTML5への素晴らしい安定した支援<video> iPad/iPhoneのタグは JWプレーヤー。（動作します）

 jwplayer('video').setup({
     flashplayer: '/Scripts/jwplayer/player.swf',
     file: 'seanpenn.mp4',
     autostart: false,
     controlbar: 'over',
     image: 'spicoli.jpg',
     width: 295,
     height: 214,
     skin: '/Scripts/jwplayer/glow.xml',
     stretching: 'exactfit'
 });
2
Captain Ron