一.新增视频标签
除了MP4格式之外,还有很多其他的视频文件格式,每种格式都有其特点和适用场景。以下是一些
常见的视频文件格式:
每种格式都有其优点和缺点,例如兼容性、压缩效率、编辑便利性和播放质量等
正常开发情况下,MP4支持主流浏览器,无需考虑兼容性问题
<HTML>video标签:
-
书写格式:*<video src="文件地址" controls="controls"></video>
-
相关属性:
src
: 视频文件的 URL 地址。controls
: 如果存在此属性,则会在视频下方显示控制条,包括播放/暂停按钮、进度条等。autoplay
: 如果存在此属性,则视频将在页面加载后自动播放。loop
: 如果存在此属性,则视频播放完毕后会重新开始播放。muted
: 如果存在此属性,则视频默认静音。preload
: 指定视频是否应该在页面加载时预加载数据。可以是auto
(自动预加载)、metadata
(只加载元数据)或none
(不预加载)。poster
: 指定在视频尚未播放之前显示的图像 URL。width
: 视频播放器的宽度。height
: 视频播放器的高度。autoplay
: 如果存在此属性,则视频将在页面加载时自动播放。playsinline
: 如果存在此属性,则视频在移动端设备上不会进入全屏模式播放。disablePictureInPicture
: 如果存在此属性,则禁止画中画模式。disableRemotePlayback
: 如果存在此属性,则禁止远程播放(如 Chromecast)
***谷歌浏览器禁用了autoplay自动播放功能***
二.新增音频标签
HTML5可以在不适用插件的条件下,原生的支持音频格式文件的播放,但是支持的格式有限。
<HTML>audio标签:
***所有浏览器都支持MP3格式***
-
书写格式:<audio src="文件地址" controls="controls"></audio>
-
相关属性:
controls
:显示控件autoplay
:(谷歌禁用)loop=loop
设置循环播放
三.多媒体标签总结
- 音频标签和视频标签的使用方式基本一致
- 我们可以给视频标签添加muted属性来静音播放视频,音频只能通过JavaScript解决
- 浏览器兼容性支持情况不同,除此之外,谷歌浏览器取消了音频和视频的自动播放(有大内存的视频可以节省大家的流量)
———————————————————————————————————————————
本文到这里就结束了
你的【点赞,好评,收藏】是我创作的动力。感谢大家支持