H5 Webページのvideoタグ内のMP4動画が再生できない原因を解析する

今日、友人から質問がありました。録画した MP4 ビデオはローカルで再生できるのに、html5 のビデオ マルチメディア再生タグを使用すると正常に再生できず、進行状況バーのみが表示され、画像が表示されないのはなぜですか?当時、私はよく使っていたビデオタグを使用してMP4ビデオを再生できるかどうかについて非常に興味があったので、自分で問題を確認してみました。実はビデオのエンコードの問題でした。形式はすべて MP4 ですが、HTML は H.264 エンコード形式しかサポートしていないため、エンコードを再変換するしかありません。

誰もが同じ問題に遭遇することを避けるために、ここで HTML5 について共有します<video>标签的知识吧：</p> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; font-size:16px; line-height:25.6px; outline:0px; word-break:break-all; text-indent:20px; color:rgb(51,51,51); font-family:'Microsoft yahei'; word-wrap:break-word!important">在使用html4协议做网站时我们想要在网页上播放一个视频要不使用flash去播放，要么就是嵌入式页面来实现，对于html5来说这两种方法非常的不方便因为一个牛逼哄哄的<code style="margin:0px; padding:2px 4px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(199,37,78); font-family:consolas,'Microsoft Yahei',arial!important; background-color:rgb(249,242,244)"><video>

HTML4 プロトコルを使用して Web サイトを構築する場合、Flash を使用して再生するか、埋め込みページを使用して Web ページ上でビデオを再生する必要があります。 html5 の場合、この 2 つの方法は、素晴らしい <video> /code > が表示されます。このタグの機能は、Web ページ上でマルチメディア ファイルを簡単に再生できるようにすることです。 <h3 style="margin:15px 5px 0px; padding:0px; font-size:16px; max-width:100%; line-height:25.6px; outline:0px; word-break:break-all; color:rgb(21,21,21); font-family:'Microsoft yahei'; word-wrap:break-word!important"> <span style="margin:0px; padding:3px 15px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(236,29,85); border-left-width:3px; border-left-style:solid; border-left-color:rgb(241,65,65); background-color:rgb(127,204,249)"></span> HTML でビデオを再生するには、タグが 1 つだけ必要です: </h3> <ol class=" list-paddingleft-2" style="margin:0px 0px 1px 32px; padding:2px; max-width:100%; font-family:'Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei',Arial,sans-serif; outline:0px; word-break:break-all; font-size:14px; border:none; color:rgb(147,146,146); word-wrap:break-word!important; background-color:rgb(25,25,22)"><li><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; white-space:pre-wrap; word-wrap:break-word!important"><span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(219,49,49)"><video src=<a href="http://www.php.cn/xiazai/gongju/89" target="_blank">"http://sp.ntaotu.com/localhost-wordpress-</a>phpstudy</span>.mp4"<span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(219,49,49)"> Controls=</span>"コントロール"<span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(219,49,49)">width=</span>"500"<span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(219,49,49)">height=<a href="http://www.php.cn/code/4221.html" target="_blank">"</a>300</span>"</p>></video></span></p></li></ol> <blockquote style="margin:20px; padding:5px 10px; max-width:100%; border-left-width:5px; border-left-style:solid; border-left-color:rgb(241,135,135); outline:0px; word-break:break-all; clear:both; color:rgb(51,51,51); font-family:'Microsoft yahei'; line-height:22.8px; word-wrap:break-word!important; background-color:rgb(220,220,220)"> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; white-space:pre-wrap; outline:0px; word-break:break-all; font-size:16px; text-indent:20px; word-wrap:break-word!important"></p>コードははるかに少ないですが、関数は非常に健全です。これはハイライトの 1 つです。 html5バーの！ 🎜</blockquote> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; font-size:16px; line-height:25.6px; outline:0px; word-break:break-all; text-indent:20px; color:rgb(51,51,51); font-family:'Microsoft yahei'; word-wrap:break-word!important"><video> タグでサポートされているビデオ形式とエンコーディングについて: </p> <ul class=" list-paddingleft-2" style="margin:20px 15px; padding:10px 10px 10px 35px; max-width:100%; outline:0px; word-break:break-all; border:1px solid rgb(62,212,155); font-size:14px; color:rgb(51,51,51); font-family:'Microsoft yahei'; word-wrap:break-word!important; background-color:rgb(235,245,240)"> <li><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; white-space:pre-wrap; word-wrap:break-word!important">MP4 = MPEG 4 ファイルは H264 ビデオ コーデックと AAC を使用します <a href="http://www.php.cn/code/6093.html" target="_blank">Audio </a> コーデックは </p></li> <li><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; white-space:pre-wrap; word-wrap:break-word!important">WebM ファイルは VP8 ビデオ コーデックと Vorbis を使用しますオーディオ コーデック </p></li> <li><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; white-space:pre-wrap; word-wrap:break-word!important">Ogg = Ogg ファイルは Theora ビデオ コーデックと Vorbis オーディオ コーデックを使用します </p></li> </ul> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; font-size:16px; line-height:25.6px; outline:0px; word-break:break-all; text-indent:20px; color:rgb(51,51,51); font-family:'Microsoft yahei'; word-wrap:break-word!important"> 上記の情報から、h264 でエンコードされた MP4 ビデオ (MPEG-LA 社)、VP8 でエンコードされた WebM 形式のビデオ (Google) のみがわかります。 Theora でエンコードされた ogg 形式のビデオ (iTouch 開発) は、html5 <video> タグをサポートできます。 </p> <h3 style="margin:15px 5px 0px; padding:0px; font-size:16px; max-width:100%; line-height:25.6px; outline:0px; word-break:break-all; color:rgb(21,21,21); font-family:'Microsoft yahei'; word-wrap:break-word!important"><span style="margin:0px; padding:3px 15px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(236,29,85); border-left-width:3px; border-left-style:solid; border-left-color:rgb(241,65,65); background-color:rgb(127,204,249)">ブラウザがvideoタグをサポートしていない場合はどうすればよいですか? </span></h3> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; font-size:16px; line-height:25.6px; outline:0px; word-break:break-all; text-indent:20px; color:rgb(51,51,51); font-family:'Microsoft yahei'; word-wrap:break-word!important">たとえば、<a href="http://www.php.cn/browsers/browsers-explorer.html" target="_blank">IE ブラウザ</a> や古いバージョンのブラウザは HTML5 をあまりサポートしていません。ユーザーがこれらのブラウザを使用してビデオのある Web ページを開いた場合はどうすればよいでしょうか? </p> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; font-size:16px; line-height:25.6px; outline:0px; word-break:break-all; text-indent:20px; color:rgb(51,51,51); font-family:'Microsoft yahei'; word-wrap:break-word!important">次のようなコードを書くことができます:</p> <ol class=" list-paddingleft-2" style="margin:0px 0px 1px 32px; padding:2px; max-width:100%; font-family:'Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei',Arial,sans-serif; outline:0px; word-break:break-all; font-size:14px; border:none; color:rgb(147,146,146); word-wrap:break-word!important; background-color:rgb(25,25,22)"><li><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; white-space:pre-wrap; word-wrap:break-word!important"><video src=<span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(219,49,49)">"http://sp.ntaotu.com/localhost-wordpress-phpstudy.mp4"</span> Controls=<span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(219,49,49)">"controls"</span> width=<span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(219,49,49)"> " 500"</span> height=<span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(219,49,49)">"300"</span>>お使いのブラウザはこのビデオの再生をサポートしていません。 </ビデオ></p></li></ol> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; font-size:16px; line-height:25.6px; outline:0px; word-break:break-all; text-indent:20px; color:rgb(51,51,51); font-family:'Microsoft yahei'; word-wrap:break-word!important">このように、HTML5をサポートしていないブラウザでは、「お使いのブラウザはこのビデオの再生をサポートしていません！」と表示されます！ </p> <h3 style="margin:15px 5px 0px; padding:0px; font-size:16px; max-width:100%; line-height:25.6px; outline:0px; word-break:break-all; color:rgb(21,21,21); font-family:'Microsoft yahei'; word-wrap:break-word!important"><span style="margin:0px; padding:3px 15px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(236,29,85); border-left-width:3px; border-left-style:solid; border-left-color:rgb(241,65,65); background-color:rgb(127,204,249)">videoタグの拡張パラメータの説明: </span></h3> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; font-size:16px; line-height:25.6px; outline:0px; word-break:break-all; text-indent:20px; color:rgb(51,51,51); font-family:'Microsoft yahei'; word-wrap:break-word!important">video要素は複数のsource要素を許可します。ソース要素は、異なるビデオ ファイルをリンクできます。ブラウザは最初に認識された形式を使用するため、別の形式でさらにいくつかのビデオを準備するだけで済みます。 </p> <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; font-size:16px; line-height:25.6px; outline:0px; word-break:break-all; text-indent:20px; color:rgb(51,51,51); font-family:'Microsoft yahei'; word-wrap:break-word!important"><span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all">使用法: </span></p> <ol class=" list-paddingleft-2" style="margin:0px 0px 1px 32px; padding:2px; max-width:100%; font-family:'Helvetica Neue',Helvetica,'Hiragino Sans GB','Microsoft YaHei',Arial,sans-serif; outline:0px; word-break:break-all; font-size:14px; border:none; color:rgb(147,146,146); word-wrap:break-word!important; background-color:rgb(25,25,22)"> <li><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; white-space:pre-wrap; word-wrap:break-word!important"><ビデオ幅=<span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(219,49,49)">"500"</span>高さ=<span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(219,49,49)">"250"</span>コントロール=<span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(219,49,49)">"コントロール"</span>></p></li> <li><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; white-space:pre-wrap; word-wrap:break-word!important"><ソースsrc= .ogg "<span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(219,49,49)"> type=</span>"video/ogg"<span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(219,49,49)">></p></li> <li><source src=<p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; white-space:pre-wrap; word-wrap:break-word!important">"movie.mp4"<span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(219,49,49)"> type=</span>"video/mp4"<span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(219,49,49)">></li> <li>お使いのブラウザはサポートしていませんこのビデオ形式。 <p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; white-space:pre-wrap; word-wrap:break-word!important"></p> </li> <li></video><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; white-space:pre-wrap; word-wrap:break-word!important"></p> </li> </ol> <ol class=" list-paddingleft-2" style="margin:20px 15px; padding:10px 10px 10px 35px; max-width:100%; outline:0px; word-break:break-all; font-size:14px; border:1px solid rgb(62,212,155); color:rgb(51,51,51); font-family:'Microsoft yahei'; word-wrap:break-word!important; background-color:rgb(235,245,240)"> <li><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; white-space:pre-wrap; word-wrap:break-word!important">autoplay: この属性の存在は、ビデオが準備ができた後に自動的に再生されることを意味します。 使用法: autoplay="autoplay"</p></li> <li><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; white-space:pre-wrap; word-wrap:break-word!important">コントロール: この属性の存在は、<a href="http://www.php.cn/js/js-jspopular-guide-widget.html" target="_blank"> コントロール </a> が表示されることを意味します。再生<a href="http://www.php.cn/code/5991.html" target="_blank">ボタン</a>などのユーザー、使用法:controls="controls"</p></li> <li><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; white-space:pre-wrap; word-wrap:break-word!important">height:高さを設定 width:幅を設定</p></li> <li><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; white-space:pre-wrap; word-wrap:break-word!important">loop:自動再生、使用法:loop="loop"</p></li> <li><p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; white-space:pre-wrap; word-wrap:break-word!important">preload: ページが読み込まれるときにビデオが読み込まれます。再生の準備をします。使用法: preload="auto" - ページが読み込まれるときに動画全体を読み込みます。 preload="meta" - ページが読み込まれた後にのみメタデータを読み込みます。 ; preload="none" - ページがビデオをロードするときにロードしません。 <span style="margin:0px; padding:0px; max-width:100%; word-wrap:break-word!important; outline:0px; word-break:break-all; color:rgb(0,0,0)">注: 自動再生が使用されている場合、プリロードは無視されます</span></p></li> <li>src: ビデオを再生するための URL<p style="margin-top:0px; margin-bottom:0px; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; white-space:pre-wrap; word-wrap:break-word!important"></p> </li> </ol> ここで <video> タグについて詳しく説明します。 ！ <p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; font-size:16px; line-height:25.6px; outline:0px; word-break:break-all; text-indent:20px; color:rgb(51,51,51); font-family:'Microsoft yahei'; word-wrap:break-word!important"></p>【関連するおすすめ】<p style="margin-top:0px; margin-bottom:1em; padding-top:0px; padding-bottom:0px; max-width:100%; clear:both; min-height:1em; font-size:16px; line-height:25.6px; outline:0px; word-break:break-all; text-indent:20px; color:rgb(51,51,51); font-family:'Microsoft yahei'; word-wrap:break-word!important"></p>1.<p style='margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; max-width: 100%; min-height: 1em; font-size: 16px; line-height: 25.6px; outline: 0px; word-break: break-all; text-indent: 20px; color: rgb(51, 51, 51); font-family: "Microsoft yahei"; word-wrap: break-word !important;'>html/cssの無料ビデオチュートリアル<a href="http://www.php.cn/course/list/1.html" target="_self"></a></p>2.<p style='margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; max-width: 100%; min-height: 1em; font-size: 16px; line-height: 25.6px; outline: 0px; word-break: break-all; text-indent: 20px; color: rgb(51, 51, 51); font-family: "Microsoft yahei"; word-wrap: break-word !important;'>HTML5オーディオとビデオの使用方法を説明します<a href="http://www.php.cn/div-tutorial-362583.html" target="_self"></a></p>3.<p style='margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; max-width: 100%; min-height: 1em; font-size: 16px; line-height: 25.6px; outline: 0px; word-break: break-all; text-indent: 20px; color: rgb(51, 51, 51); font-family: "Microsoft yahei"; word-wrap: break-word !important;'>H5でビデオタグを強化する方法を説明します<a href="http://www.php.cn/div-tutorial-362577.html" target="_self"></a></p>4のブラウザ互換性<p style='margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; max-width: 100%; min-height: 1em; font-size: 16px; line-height: 25.6px; outline: 0px; word-break: break-all; text-indent: 20px; color: rgb(51, 51, 51); font-family: "Microsoft yahei"; word-wrap: break-word !important;'>HTML5ビデオ表示規格の詳細説明<a href="http://www.php.cn/div-tutorial-362576.html" target="_self"></a></p> <p style='margin-top: 0px; margin-bottom: 1em; padding-top: 0px; padding-bottom: 0px; max-width: 100%; min-height: 1em; font-size: 16px; line-height: 25.6px; outline: 0px; word-break: break-all; text-indent: 20px; color: rgb(51, 51, 51); font-family: "Microsoft yahei"; word-wrap: break-word !important;'>5. <a href="http://www.php.cn/div-tutorial-362575.html" target="_self"><video>タグのパラメータと属性の簡単な説明</a></p>

以上がH5 Webページのvideoタグ内のMP4動画が再生できない原因を解析するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。