简介 Introduction
- 展示视频的容器组件；行内块元素 inline-block，可以设置宽度、高度
- 默认宽度 300px、高度 225px
- 支持的格式：mp4、mov、m4v、avi、webm等
- 除了常规属性外，还可以指定画中画、广告等特有属性
- 请使用在线资源或自建服务器资源；不要使用本地资源
- 视频现在多是16/9的比例；可惜小程序不支持 aspect-ratio 属性；不过可以根据宽度推算高度
- 更多信息，请访问 <video>
常见分辨率比例
| item |
desc |
| 16/9 |
1280*720
1920*1080 |
| 4/3 |
1280*960
960*720
300*225 |
| 9/16 |
|
| 3/4 |
|
一般属性
| item |
desc |
| src |
资源url |
| autoplay |
自动播放 |
| controls |
播放控件 |
| loop |
循环播放 |
| mute |
静音播放 |
| object-fit |
当视频大小与 video 容器大小不一致时，视频的表现形式
contain：容器完全包含视频；视频按照比例缩放；默认；容器有留白
fill：填充；视频拉伸至填满容器
cover：覆盖；视频按比例裁剪至填满容器
|
| poster |
视频封面 |
[] 视频大小1280*720；默认视频标签大小300*225，即4/3的比例；因此：
- 高度匹配：可以显示960*720的视频，但是视频容器宽度不够，原视频宽度1280；完整显示视频的高度，但是容器宽度不够
- 宽度匹配：可以显示1280*960的视频，但是源视频高度不够，原视频高度为720；完整显示视频的宽度，但是容器高度剩余
video {
width: 300px;
height: 225px;
background-color: #000;
}
<video src="" object-fit="contain"/>
<video src="" object-fit="cover"/>
素材经过处理一定是标准比例；很少直接使用原图
一般都是默认使用即可，无须特别处理：看到的视频都是包含 contain 模式，存在黑边
建议指定宽高，并应用 cover 模式；去除黑边 - 自带高级感
焦点
- 自动播放 autoplay
- HTML中，大多数浏览器，特别是谷歌浏览器，不允许没有用户任何行为的情况下自动播放视频：必须是用户显式的操作视频进行播放
- 为了解决这个冲突，满足用户需求，可以：
- 将声音禁掉，设为静音muted，采用自动播放autoplay
- 但是在小程序中，如果不设置为自动播放就会告警。当然这个告警并不影响执行
- 视微信小程序版本而定
[渲染层网络层错误] Failed to load media <URL>
[] 在线视频的使用
. 受小程序大小2M的限制，大多数多媒体资源，如图片、视频、音频等不能本地使用，只能在线获取
方案1：自建资源服务器，将本地视频放在指定目录，开启服务；详情请参考
静态资源服务器<video src="http://1237.0.0.1:3000/video/sea.mp4" muted autoplay/>
- 点击上方链接打开网站，或使用谷歌浏览器，在上方地址栏输入地址 https://shipin520.com，打开网站
- 在视频库中预览喜欢的视频
- 按F12打开开发者工具，拾取元素拾取工具单击视频
- 在结构面板中，看到视频对应的各种信息
- 找到 src 属性，双击并复制视频路径到小程序中，记得加上网络协议 https
<video src="https://video.shipin520.com/videos/77/08/15/a_6PPqEeFnxHvK1586770815.mp4" muted autoplay/>
方案3：利用 -
大树小站 - 提供的在线视频；更多视频持续更新中。。。
<video src="https://glpla.github.io/utils/video/sea.mp4" muted autoplay/>