HTML5-03-视频播放器 全面解析

7/2/2020 HTML5

# 文章目录

# 一、定义 video

<body>
  <video src="video.mp4" width="500" height="600px"></video>
</body>
1
2
3

效果:
在这里插入图片描述
参考:菜鸟教程 (opens new window)

# 二、控制菜单

# 2.1 显示控制菜单

<body>
  <video src="video.mp4" width="500" height="600px" controls></video>
</body>
1
2
3

效果:
在这里插入图片描述

# 2.2 autoplay+muted 实现自动播放(会静音)

自动播放:autoplay
静音:muted

有些浏览器为了给用户更好的使用体验,自动播放的时候需要加上静音才能实现。

<body>
  <video
    src="video.mp4"
    width="500"
    height="600px"
    autoplay
    muted
    controls
  ></video>
</body>
1
2
3
4
5
6
7
8
9
10

# 2.3 封面 poster

使用此属性不可设置自动播放,否则没效果,平白浪费带宽加载图片。

<body>
  <video
    src="video.mp4"
    width="500"
    height="600px"
    autoplay
    controls
    poster="girl.jpg"
  ></video>
</body>
1
2
3
4
5
6
7
8
9
10

效果:
在这里插入图片描述

# 2.4 preload 视屏加载方式

加载方式 解释
auto 指一旦页面加载,则开始加载音频/视频。(加载页面时,所有数据全部加载)
metadata 指当页面加载后仅加载音频/视频的元数据。(仅加载关键帧、宽高尺寸)
none 指页面加载后不应加载音频/视频。

以下是三种方式的显示效果:
在这里插入图片描述

# 2.5 loop 循环

视频会无限循环

# 2.6 source 指定优先加载的视频格式 及 兼容提示

浏览器会优先尝试使用第一个文件,当该文件不存在或根本无法识别时,依次往下查找能够识别的

<video
  width="500"
  height="600px"
  loop
  autoplay
  muted
  controls
  preload="metadata"
>
  <source src="video.qlv" type="video/alv" />
  <source src="video.mp4" type="video/mp4" />
  您当前的浏览器不支持VIDEO视屏标签
</video>
1
2
3
4
5
6
7
8
9
10
11
12
13

参考:菜鸟教程 source-type 属性 (opens new window)

效果:
在这里插入图片描述

当不支持 VIDEO 标签时:
在这里插入图片描述

最后更新于: 2021年9月15日星期三晚上10点10分
Faster Than Light
Andreas Waldetoft / Mia Stegmar