一丶 元素

video 视频
-source 解决网页视频兼容性问题

audio 音频


二丶 属性

video 的 controls 属性:控制控件的显示,取值只能为controls【布尔属性】

video 的 autoplay 属性:自动播放【布尔属性】

video 的 muted 属性:静音播放【布尔属性】

video 的 loop 属性:循环播放【布尔属性】


三丶 src属性

src资源可以是外界的,也可以是自己内部的
外界用绝对路径,内部用相对路径

四丶 controls属性

默认情况下,视频的播放键是不会显示的,需要我们利用controls属性

五丶 在HTML5中,个别属性特性:

某些属性,只有两种状态:1.不写 2.取值为属性名,这种属性叫做布尔属性

六丶 布尔属性

布尔属性,在HTML5中,可以不用书写属性值

七丶 muted属性

某些浏览器为了考虑用户不要被 恶意视频吓到,会禁用这种一打开网页自动播放的功能,
用 muted 属性来解决

HTML5 — 知识总结篇《VIII》【媒体元素】_总结

八丶 audio元素的几个属性

【1】
直接使用src导入资源,打开网页是不会显示任何东西的,也不会打开音乐,那么这时我们就需要使用controls属性,让他的控件显示出来

【2】
用法与视频一样

九丶 兼容性问题!

  • 旧版本的浏览器不支持这两个元素
  • 不同的浏览器支持的音视频格式可能不一致
    视频有两种格式:mp4、webm

HTML5 — 知识总结篇《VIII》【媒体元素】_前端_02

十丶 source属性

上述问题就会导致某些旧的浏览器无法成功播放为了解决这种问题,我们就需要使用video的source属性,将video的src属性换到 source 元素里即可!

HTML5 — 知识总结篇《VIII》【媒体元素】_前端_03

十一丶 浏览器版本过低的情况

HTML5 — 知识总结篇《VIII》【媒体元素】_HTML_04