HTML5之音/视频标签

最新推荐文章于 2024-06-25 01:55:43 发布

Programmer.杨

最新推荐文章于 2024-06-25 01:55:43 发布

阅读量559

点赞数 1

分类专栏：前端技术-HTML 文章标签： audio video 标签视频音频

本文链接：https://blog.csdn.net/YWB88888888/article/details/102632144

版权

前端技术-HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<audio>标签

常用属性：
          [src]： 要播放的音频的URL
          [controls]： 如果出现该属性则向用户显示控件 （播放按钮、暂停按钮等）
          [loop]： 初始化循环播放。如果出现该属性，则当媒介文件完成播放后再次开始播放
          [muted]： 初始化静音播放。如果出现该属性，音频以静音的方式播放
          [autoplay]： 初始化自动播放。如果出现该属性，则音频在缓冲完成后马上播放
          [preload]： 定义预加载方式。描述规定是否预加载音频
                      (auto)： 当页面加载后载入整个音频
                      (meta)： 当页面加载后只载入元数据 （文件大小、播放时长等）
                      (none)： 当页面加载后不载入音频
类别：
          文本级标签
作用：
          定义声音，比如音乐或其他音频流
说明：
          该标签支持三种文件格式：MP3、Wav、Ogg
全局属性： 支持
事件属性： 支持
注意：
          1.[preload] 和 [autoplay] 属性 有冲突，不能同时使用。autoplay 相当于 proload 中的 auto。
          2.可以在 <audio>和</audio> 标签之间放置文本内容，这样不支持 <audio> 标签的浏览器就可以显示出该标签的信息

<video>标签

常用属性：
          [src]： 要播放的视频的URL
          [controls]： 如果出现该属性则向用户显示控件 （播放按钮、暂停按钮等）
          [loop]： 初始化循环播放，如果出现该属性，则当媒介文件完成播放后再次开始播放
          [muted]： 初始化静音播放。如果出现该属性，视频的音频以静音的方式播放
          [poster]： 规定视频 正在缓冲下载 时显示的图像，直到用户第一次点击播放按钮或自动播放
          [autoplay]： 初始化自动播放。如果出现该属性，则视频在缓冲完成后马上播放
          [width]： 设置视频播放器的宽度
          [height]： 设置视频播放器的高度
          [preload]： 定义预加载方式。描述规定是否预加载视频
          (auto)： 当页面加载后载入整个视频
          (meta)： 当页面加载后只载入元数据 （文件大小、播放时长等）
          (none)： 当页面加载后不载入视频
类别：
          文本级标签
作用：
          定义视频，比如电影或其他视频流
说明：
          该标签支持三种视频格式：MP4、WebM、Ogg
全局属性： 支持
事件属性： 支持
注意：
          1.[preload] 和 [autoplay] 属性 有冲突，不能同时使用。autoplay 相当于proload 中的 auto。
          2.可以在 <video> 和 </video> 标签之间放置文本内容，这样不支持 <video> 标签的浏览器就可以显示出该标签的信息

注意：

在 chrome 浏览器中已经禁用了音视频的autoplay属性
音频标签与视频标签使用基本一致
多媒体标签在不同浏览器下情况不同，存在兼容性问题
谷歌浏览器中视频添加muted属性可以使video的autoplay属性生效

综合示例：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>HTML音视频标签学习</title>
</head>
<body>
	<audio controls="controls" autoplay="autoplay" muted="muted">
	    <source src="audio/WildWildWeb.mp3" type="audio/mpeg"/>
	    <source src="audio/WildWildWeb.ogg" type="audio/ogg"/>
	    您的浏览器不支持播放声音！
	</audio>
	
	<hr/>
	
	<video controls="controls" autoplay="autoplay" loop="loop" poster="img/img_the_scream.jpg" width="400px" muted="muted">
	    <source src="video/beauty.mp4" type="video/mp4"/>
	    <source src="video/beauty.ogg" type="video/ogg"/>
	    您的浏览器不支持播放此视频！
	</video>
</body>
</html>