HTML5 マルチメディアオーディオとビデオの詳細な紹介 (1)-H5 チュートリアル-php.cn

HTML5 マルチメディアオーディオとビデオの詳細な紹介 (1)

黄舟

リリース： 2017-05-19 16:57:31

オリジナル

2583 人が閲覧しました

通常、ブラウザは Web ページ上でオーディオやビデオを再生するために Flash をインストールします。
HTML5 では、オーディオとビデオを再生するためのオーディオ要素とビデオ要素が追加され、フラッシュへの依存が軽減されます。

audio のオーディオサポート

HTML5 では、audio 要素を通じてオーディオを含める標準的な方法が指定されています。
現在、audio 要素は次の 3 つのオーディオ形式をサポートしています:

オーディオ形式	IE9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
オッグ・ヴォルビス	いいえ	はい	はい	はい	いいえ
MP3	はい	いいえ	いいえ	はい	はい
Wav	いいえ	はい	はい	いいえ	はい

ビデオのビデオサポート

HTML5 では、video 要素を通じてビデオを含める標準的な方法を指定しています。
現在、video 要素は次の 3 つのビデオ形式をサポートしています:

Oggいいえ3.5+10.5 + いいえ 4.0+10.6+6.0 +いいえ

<!Doctype html>
<html>
<head>
<title>HTML5多媒体</title>
<meta charset="utf-8"/>
</head>
<body>
    <p>
        <audio id="myAudio" controls="controls">
            <source src="resource/传奇.mp3" type="audio/mpeg">
            您的浏览器不支持audio        
            </audio>
    </p>

    <p>
        <video id="myVideo" controls="controls">
            <source src="resource/手语.mp4" type="video/mp4">
            您的浏览器不支持video        
            </video>
    </p>
    </body>
    </html>

ログイン後にコピー

以下は私のサンプルコードですランニングエフェクト、オーディオ、ビデオが再生されます! 【関連おすすめ】1. 2. 3. 4. H5 video タグが音声のみを再生できてビデオが再生できない問題の解決策

形式	Firefox	Opera	Chrome

	オーディオとビデオの再生オーディオとビデオの例	上記は、オーディオとビデオを再生するための最も単純なサンプルコードです。 mp3とmp4のリソースファイルは自分で見つけなければなりません~
html5のvideoタグテストアプリの詳細説明	video要素を使ってhtml5で動画プレーヤーを作成する		動画を共有するタグが MP4 を再生できない問題と解決策