記録された MP4 ビデオはローカルで再生できるのに、html5 のビデオ マルチメディア再生タグを使用して正常に再生できず、進行状況バーのみが表示され、画像が表示されない理由?実は、これはビデオのエンコードの問題で、形式はすべてMP4ですが、HTMLはH.264エンコードのみをサポートしているため、エンコードを再変換するしかありません。
誰もが同じ問題に遭遇するのを避けるために、HTML5 の <video> タグに関する知識を説明します。 ：HTML4 プロトコルを使用して Web サイトを構築する場合、Web ページ上でビデオを再生したい場合は、Flash を使用して再生するか、埋め込みページを使用して実現する必要があります。 , これら 2 つの方法は非常に不便です。クールな <video> が登場したためです。このタグの機能は、Web ページ上でマルチメディア ファイルを簡単に再生できるようにすることです。
#
コードはかなり少ないにもかかわらず、機能は非常にしっかりしています。これは html5 のハイライトの 1 つです。
<video> タグでサポートされているビデオ形式とエンコーディングについて:
MP4 = MPEG 4 ファイルは、H264 ビデオ コーデックと AAC オーディオ コーデックを使用します。
WebM = WebM ファイルは VP8 ビデオ コーデックと Vorbis オーディオ コーデックを使用します
Ogg = Ogg ファイルは Theora ビデオ コーデック Decoder と Vorbis オーディオを使用しますコーデック
上記の情報により、h264 でエンコードされた MP4 ビデオ (MPEG-LA 社)、VP8 でエンコードされた WebM 形式のビデオ (Google 社)、および Theora でエンコードされた ogg のみが存在することがわかります。ビデオ形式 (iTouch 開発) は、html5 <video> タグをサポートできます。
たとえば、IE ブラウザと古いバージョンのブラウザは HTML5 をあまりサポートしていません。ユーザーがこれらのブラウザを使用してビデオのある Web ページを開いた場合はどうすればよいでしょうか?
コードは次のように記述できます:
このように、html5 をサポートしていないブラウザでは、「お使いのブラウザはこのビデオの再生をサポートしていません。」というメッセージが表示されます。
video 要素では複数のソース要素を使用できます。ソース要素は、異なるビデオ ファイルをリンクできます。ブラウザは最初に認識された形式を使用するため、別の形式でさらにいくつかのビデオを準備するだけで済みます。
使用法:
<ビデオ幅="500" 高さ="250" コントロール= "controls">
type="video/mp4"> お使いのブラウザはこのビデオ形式をサポートしていません。
##controls: この属性の出現は、再生ボタンなどのコントロールがユーザーに表示されることを意味します。 "
height: 高さを設定します width: 幅を設定します
loop: 自動再生、使用法:loop="loop"
preload : ページの読み込み時にビデオが読み込まれ、再生の準備が行われます。使用法: preload="auto" - ページの読み込み時にビデオ全体を読み込み、preload="meta" - 読み込みのみページの読み込み後のメタデータ; preload="none" - ページの読み込み時にビデオは読み込まれません。
注: 自動再生が使用される場合、プリロードは無視されます#src: ビデオを再生する URL
About<ここではvideo>タグについて紹介していきますが、皆さんこのタグの理解は深いと思います！
]
以上がH5 Webページでvideoタグを使用してMP4ビデオが再生できない問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
