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

最新推荐文章于 2022-03-13 17:46:58 发布

一只琳娜

最新推荐文章于 2022-03-13 17:46:58 发布

阅读量184

点赞数

文章标签： css3

本文链接：https://blog.csdn.net/my_prince/article/details/108715607

版权

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浏览器看到的效果：
在这里插入图片描述

一只琳娜

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
从前端小白到大佬视频和音频标签

html5 视频和音频标签1.视频标签<video src=”...“ ...>.</video>标签属性注意-poster即视频封面，如果考虑到网速不好，视频加载缓慢的时候，则使用poster封面且不要设置autoplay自动播放，效果会好看些。-controls在不同版本的浏览器看到的效果是不一致的，一般不会使用video的属性实现，而是用js写。实例：<!DOCTYPE html><html lang="en"><head
复制链接

扫一扫