HTML5之音视频和存储

音频audio

audio 用于在文档中嵌入音频元素。

audio标签

controls：浏览器提供包括声音、播放进度、播放暂停的控制面板（不同浏览器不一致），用户可以控制音频播放
source:规定了多媒体资源, 可以是多个，在 <video> 与 <audio>标签中使用
![在这里插入图片描述]( https://img-blog.csdnimg.cn/1f65671209244659b8c622ee0b8a7c11.png?x-oss-process=image/watermark ,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAR3NkaW5n,size_20,color_FFFFFF,t_70,g_se,x_16)

设置多个播放格式

不同浏览器支持的音频播放格式有所不同，一般为了兼容效果，会放置多种音频格式，浏览器会自上而下选择符合的音频格式。

<audio controls>
    <source src="music.ogg" type="audio/ogg">
    <source src="music.mp3" type="audio/mpeg">
    <source src="music.wav" type="audio/Wav">
    当前浏览器不支持audio标签
</audio>

视频video

标签

![在这里插入图片描述]( https://img-blog.csdnimg.cn/b6ac38f5421344a0aef95a6e89b697ce.png?x-oss-process=image/watermark ,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAR3NkaW5n,size_20,color_FFFFFF,t_70,g_se,x_16)

格式

![在这里插入图片描述]( https://img-blog.csdnimg.cn/53a30378504349a08d225726d262c5f7.png?x-oss-process=image/watermark ,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBAR3NkaW5n,size_20,color_FFFFFF,t_70,g_se,x_16)

实例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title> shipin</title>
    </head>
    <body>
        <video width="500" height="500" controls>
            <source src="薛之谦 - 绅士.mp4" type="video/mp4">
        </video>    
    </body>   
</html>
posted @ 2021-09-28 16:49  Gsding  阅读(110)  评论(0)    收藏  举报