从前端小白到大佬 视频和音频标签

html5 视频和音频标签

1.视频标签

<video src=”...“ ...>.</video>

标签属性
在这里插入图片描述

注意
-poster即视频封面,如果考虑到网速不好,视频加载缓慢的时候,则使用poster封面且不要设置autoplay自动播放,效果会好看些。
-controls在不同版本的浏览器看到的效果是不一致的,一般不会使用video的属性实现,而是用js写。
实例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频播放</title>
    <style>
        video {
            width: 100%;
        }
    </style>
</head>

<body>
    <video src="mi.mp4" autoplay="autoplay" loop controls muted poster="mi9.jpg"></video>
</body>

</html>

效果
在这里插入图片描述

2.音频标签
<audio src="…"…>

标签属性
在这里插入图片描述
注意
-谷歌浏览器会把视频音频的自动播放禁了
-一般浏览器对于文件的支持都不一致,但基本上所有的浏览器都视频选择MP4和音频选择MP3,

实例:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <audio src="music.mp3" controls></audio>
</body>

</html>

360浏览器看到的效果:
在这里插入图片描述

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页