HTML5基础 | (5)HTML5新增视频/音频元素介绍

最新推荐文章于 2022-03-18 15:13:44 发布

CoreJT

最新推荐文章于 2022-03-18 15:13:44 发布

阅读量484

点赞数 1

分类专栏： HTML5基础文章标签： HTML5视频标签 HTML5音频标签

本文链接：https://blog.csdn.net/sdu_hao/article/details/83088687

版权

HTML5基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、视频标签video介绍

二、音频标签audio介绍

一、视频标签video介绍

<video>有src，width，controls，autoplay，preload，muted，loop，poster等属性
src属性值是视频路径，可以是本地也可以是网上
width控制大小，等比缩放
controls显示视频控制面板，播放、进度、音量等
autoplay自动播放
preload预加载，与autoplay相排斥
muted静音
loop循环播放
poster设置视频封面图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <video src="magic.mov" controls width="500" autoplay loop poster="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1539704068878&di=80aa783e1da4e3b87c529e3c01d1caf6&imgtype=0&src=http%3A%2F%2Fg.hiphotos.baidu.com%2Fzhidao%2Fwh%253D450%252C600%2Fsign%3Daa4887c27ccb0a468577833d5e53da12%2F0b55b319ebc4b745e512d22ec8fc1e178a821507.jpg" muted></video>
</body>
</html>

网页显示效果：

二、音频标签audio介绍

<audio>有src,controls，autoplay，preload，muted，loop
src属性值是音频路径，可以是本地也可以是网上
controls显示音频控制面板，播放、进度、音量等
autoplay自动播放
preload预加载，与autoplay相排斥
muted静音
loop循环播放

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <audio src="华山论剑.mp3" controls loop autoplay ></audio>
</body>
</html>

CoreJT

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5基础 | (5)HTML5新增视频/音频元素介绍

目录一、视频标签video介绍二、音频标签audio介绍一、视频标签video介绍<video>有src，width，controls，autoplay，preload，muted，loop，poster等属性 src属性值是视频路径，可以是本地也可以是网上 width控制大小，等比缩放 controls显示视频控制面板，播放、进度、音量等 autopla...
复制链接

扫一扫