跳转至

音频与视频

<audio>标签

HTML <audio> 元素用于在文档中嵌入音频内容。 <audio> 元素可以包含一个或多个音频资源， 这些音频资源可以使用 src 属性或者<source> 元素来进行描述：浏览器将会选择最合适的一个来使用。也可以使用 MediaStream 将这个元素用于流式媒体。

  • 使用src属性播放

    示例： 

    1
2
3
4
5
6
    <audio
    controls
    src="audios/sndqd.mp3">
        Your browser does not support the
        <code>audio</code> element.
</audio>

  • <audio> 与多个 <source> 元素

    这个例子包含了多个 元素。如果能够播放的话，浏览器就会试图去加载第一个 source 元素；如果不行，那就退而求其次去加载第二个。 

    1
2
3
4
    <audio controls>
    <source src="/audios/sound1" type="audio/mpeg"/>
    <source src="/audios/sound2" type="audio/mpeg"/>
</audio>

<video>标签

HTML <video> 元素 用于在 HTML 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。

示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<video controls width="800">

    <source src="/videos/video1.mp4"
            type="video/mp4">

    <source src="/videos/video2.mp4"
            type="video/mp4">

    Sorry, your browser doesn't support embedded videos.
</video>

示例

代码

1
2
3
4
5
6
7
8
<audio controls>
    <source src="https://pjmcode.top/static/audios/sndqd.mp3" type="audio/mpeg"/>
</audio>

<video controls width="800">
    <source src="https://pjmcode.top/static/videos/mzd.mp4"
            type="video/mp4">
</video>

结果

回到页面顶部