Video 是 HTML5 中新增的标签,使用 Video 标签可以播放 ogg、mp4、webm 等格式的视频,Video 标签的引入,减少前端页面对 Flash 动画的依赖。
0x0 预备知识
不同的浏览器支持的视频格式可能不同,以下是摘自 W3School 各个浏览器对三种视频格式的支持情况:
浏览器对视频格式的支持
0x1 在 Video 中嵌入视频
你就用这个浏览器有出息吗?
当页面载入时,会引用 movie.mp4 文件,如果浏览器无法支持 HTML5,则会提示 Video 中的内容。
显然,为适应不同的浏览器,我们也需要准备多种不同的格式的视频,并使用 video 引用它们:
你就用这个浏览器有出息吗?
0x2 使用 Video 的控制属性
Video 提供多个属性,通过各个属性可以控制相关的功能。例如 controls 为视频提供进度、音量、全屏的控制。尽管属性与值对应,但是我们仍然可以使用 controls 来代替 controls = “controls