简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  Detailed introduction to HTML5 multimedia audio and video (1)

Detailed introduction to HTML5 multimedia audio and video (1)

黄舟
黄舟Original
2017-05-19 16:57:312583browse

Usually browsers install flash to play audio and video on web pages.
HTML5 adds audio and video elements for audio and video playback, thereby reducing dependence on flash.

audio support for audio

HTML5 specifies a standard way to include audio through the audio element.
Currently the audio element supports the following three audio formats:

##Ogg VorbisNOYESYESYESNOMP3YES NONOYESYESWavNOYESYESNOYES
Audio format IE9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
video support for video

HTML5 provides a A standard way to include video via the video element.

Currently the video element supports the following three video formats:

FormatIEFirefoxOpera ChromeSafariOggNo3.5+10.5+5.0+No##MPEG 4WebM##audio and video playback audio and video examples
<!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>
9.0+ No No 5.0+ 3.0+
No 4.0 + 10.6+ 6.0+ No
The above is the simplest sample code for playing audio and video. Of course, you have to find the mp3 and mp4 resource files yourself~

The following is the running effect of my sample code, both audio and video are played!



[Related recommendations]Detailed introduction to HTML5 multimedia audio and video (1)

1.

Detailed explanation of the video tag test application of html5

2. html 5 Use the video element to create a video player

3. Share the problem and solution of a video tag that cannot play mp4

4. H5 The solution to the video tag that can only play sound but not video

5. The MIME type of IIS is not registered as the MP4 type, resulting in the inability to recognize the vidoe tag.

The above is the detailed content of Detailed introduction to HTML5 multimedia audio and video (1). For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Detailed explanation of HTML5 canvas (6)Next article：Detailed explanation of HTML5 canvas (6)

Related articles

See more