HTML5の実践とメディア要素の分析（1.ビデオタグとオーディオタグの紹介）

HTML5 の登場により、Flash は携帯電話でサポートされなくなりました。つまり、Flash で作成された音楽再生とビデオ再生は、HTML5 のメディア タグ video タグと audio タグを使用してのみ作成できることになります。偶然にも、モバイル端末は HTML5 のメディアタグ video タグと audio タグを非常によくサポートしています。このため、HTML5 はモバイル デバイスで非常に普及しています。

video タグと audio タグは非常に便利な JavaScript API も提供しており、カスタム コントロールの作成が可能です。 2つのタグの使い方は以下の通りです。

HTML code

<!-- 视频标签 -->
<video src="meng.ogg" id="myVideo">视频不支持</video>

<!-- 音频标签 -->
<audio src="long.mp3" id="myAudio">音频不支持</audio>

videoタグとaudioタグを使用する場合、ロードするメディアファイルを指すsrc属性を含める必要があります。幅と高さの属性を設定してプレーヤーのサイズを指定することもできます。動画コンテンツの読み込み中に画像を表示するには、poster 属性に画像の URI を指定します。さらに、タグには control 属性があります。この属性は、ユーザーがメディアを直接操作できるようにブラウザが UI コントロールを表示する必要があることを意味します。開始タグと終了タグの間にあるものはすべてフォールバック コンテンツとして使用され、ブラウザがどちらのメディア要素もサポートしていない場合に表示されます。

すべてのブラウザが異なるメディア ソースをサポートしているわけではないため、複数のソース タグを個別に記述する必要があります。小さな例は次のとおりです。

HTML code

<!-- 音频标签 -->
<audio id="audio">
	<source id="s1" src="meng.mp3"></source>
	<source id="s2" src="meng.ogg"></source>
	音频不支持
</audio>

<!-- 视频标签 -->
<video id="video">
	<source id="s1" src="meng.mp3"></source>
	<source id="s2" src="meng.ogg"></source>
	视频不支持
</video>

ビデオタグとオーディオタグをサポートするブラウザには、Firefox 3.5以降、Opera 10.5以降、IE9以降、Safari 4以降、Chrome、Safari for iOS、およびWebKit for Androidが含まれます。

HTML5の実戦とメディア要素の分析（1.ビデオタグとオーディオタグの紹介）では、メディアタグがHTML5で十分にサポートされているため、より多く使用されています。 HTML5 に関するさらに関連した知識については、Menglong の Web サイトをご覧ください。ご支援いただきありがとうございます。

新しく追加された動画再生方法

JavaScriptコード

function bofangshipin(Num) {
            var u = navigator.userAgent;
            if (u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1) {  //苹果
                $("#vid" + Num).css("width", "100%");
                document.getElementById('vid' + Num).style.display = 'block';
                document.getElementById('vid' + Num).play();
            } else {  //安卓
            $("#vid" + Num).css({
                "width": $(".wrapperW").width(),
                "height": $(".wrapperW").height(),
                "left": ( $(".m_wraper").width() - $(".wrapperW").width() ) / 2
            });
                document.getElementById('vid' + Num).style.display = 'block';
                setTimeout(function () { document.getElementById('vid' + Num).play(); }, 1000);
            }

        }
        document.getElementById('vid' + 1).addEventListener("ended", end_playing, false);
        document.getElementById('vid' + 1).addEventListener("pause", end_playing, false);
        document.getElementById('vid' + 2).addEventListener("ended", end_playing, false);
        document.getElementById('vid' + 2).addEventListener("pause", end_playing, false);
        document.getElementById('vid' + 3).addEventListener("ended", end_playing, false);
        document.getElementById('vid' + 3).addEventListener("pause", end_playing, false);
        function end_playing() {
            document.getElementById('vid' + 1).style.display = 'none';
            document.getElementById('vid' + 2).style.display = 'none';
            document.getElementById('vid' + 3).style.display = 'none';

            $("#vid" + 1).css("width", "0%");
            $("#vid" + 2).css("width", "0%");
            $("#vid" + 3).css("width", "0%");
        }	

HTMLコード

<video src="images/sanxing.mp4"  id="vid1" controls autoplay  style="position: absolute; z-index:100;  left: 0px; display:none" name="vid1">
     <source src="images/sanxing.mp4"></source>
  </video>

以上がHTML5のメディア要素の実戦と分析です(1.videoタグとオーディオの紹介)タグ) コンテンツ、その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。