视频

<video>

说明

展示视频的容器组件；行内块元素 inline-block，可以设置宽度、高度

默认宽度 300px、高度 225px

支持的格式：mp4、mov、m4v、avi、webm等

除了常规属性外，还可以指定画中画、广告等特有属性

请使用在线资源或自建服务器资源；不要使用本地资源

视频现在多是16/9的比例；可惜小程序不支持aspect-ratio属性；不过可以根据宽度推算高度

更多信息，请查看官方文档 - video

常见比例
分辨率	示例
16/9	1280720 19201080
4/3	1280960 960720 300*225

一般属性
属性	说明
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;
}

素材经过处理一定是标准比例；很少直接使用原图

一般都是默认使用即可，无须特别处理：看到的视频都是包含contain模式，存在黑边

建议指定宽高，并应用cover模式；去除黑边 - 自带高级感

在线视频的使用

受小程序大小2M的限制，大多数多媒体资源，如图片、视频、音频等不能本地使用，只能在线获取

方案1：自建资源服务器，将本地视频放在指定目录，开启服务；详情请参考静态资源服务器

<video src="http://1237.0.0.1:3000/video/sea.mp4" muted autoplay/>

方案2：外网在线资源；容易死链；如：潮点视频

点击上方链接打开网站，或使用谷歌浏览器，在上方地址栏输入地址 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/>

焦点

自动播放 autoplay

HTML中，大多数浏览器，特别是谷歌浏览器，不允许没有用户任何行为的情况下自动播放视频：必须是用户显式的操作视频进行播放

为了解决这个冲突，满足用户需求，可以：

将声音禁掉，设为静音muted，采用自动播放autoplay

但是在小程序中，如果不设置为自动播放就会告警。当然这个告警并不影响执行

视微信小程序版本而定

[渲染层网络层错误] Failed to load media <URL>