最近在研究小程序的时候发现网站文章中用iframe插入的视频无法在小程序中显示，起初我以为是小程序的问题，便在小程序开发者的群里问了一下，结果大佬出来解释说，iframe框架引入的视频小程序无法显示，建议用video标签。
所以又试了下用video标签插入视频，测试没问题，果然小程序能正常显示。下面就将我自己在网站文章中使用video标签添加B站视频且在小程序中同步添加视频的过程中遇到的几个问题总结下来，以便后期自己再遇到同样的问题而手足无措（原谅我是个小白菜），也希望能帮一些同样是小白菜的站长避坑。
1、video标签的详细用法
自定义宽高
‹video src="movie01.mp4" controls style="width:400px;height:300px;"›‹/video›
通过设置属性来让视频是否开启自动播放，使用autoplay属性可以让浏览器加载完后视频文件后立即播放
‹video width="400" height="300" controls autoplay> <source src="movie01.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 ‹/video>
在自动播放时设置muted状态，这样做的目的是当视频自动播放时会静音，而且我们还可以通过点击播放器的扬声器来开启声音
‹video width="400" height="300" controls autoplay muted> <source src="movie01.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 ‹/video>
使用loop属性让视频播放结束时，再从头开始循环播放
‹video width="400" height="300" controls loop> <source src="movie01.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 ‹/video>
设置preload属性中的不同属性值，来告诉浏览器应该怎样加载一个媒体文件：
auto：表示让浏览器自动下载整个文件
none：表示让浏览器不必预先下载文件
metadata：表示让浏览器先获取视频文件开头的数据块，从而足以确定一些基本信息（比如视频的总时长，第一帧图像等）
‹video width="400" height="300" controls preload="auto"> <source src="movie01.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 ‹/video>
通过poster属性可以设置视频的封面图片，浏览器在下面三种情况下会使用这个图片：
（1）视频第一帧未加载完毕
（2）把preload属性设置为none
（3）没有找到指定的视频文件
‹video width="400" height="300" controls preload="none" poster="images/5.jpg"> <source src="movie01.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 ‹/video>
2、我们发现用video标签插入视频的时候，视频文件是MP4格式，而B站视频我们一般复制到的视频链接，是一个链接形式。那么怎么在B站获取MP4格式的视频文件呢？
首先在B站打开需要的视频，然后右键“检查”进入开发者工具（谷歌浏览器），然后在上边选择“NetWork”>>>然后选“Media”，此时按“Ctrl+R”后就会在右侧显示此视频的MP4文件地址。
格式类似于：
https://upos-sz-mirrorhw.bilivideo.com/upgcxcode/93/07/544980793/544980793-1-16.mp4?e=ig8euxZM2rNcNbRVhwdVhwdlhWdVhwdVhoNvNC8BqJIzNbfq9rVEuxTEnE8L5F6VnEsSTx0vkX8fqJeYTj_lta53NCM=&uipk=5&nbs=1&deadline=1646998200&gen=playurlv2&os=hwbv&oi=0&trid=b4039973ab0d47479e1e3fe9ebd7ce70h&platform=html5&upsig=3d65c8e73e1d5ff56f7ca9128767aa65&uparams=e,uipk,nbs,deadline,gen,os,oi,trid,platform&mid=0&bvc=vod&nettype=0&bw=49774&logo=80000000
虽然看起来不像MP4格式的文件，但是把这个地址复制到video标签中确实会显示视频。
3、关于视频的宽和高，为了很好的适应PC端、手机端和小程序端，建议在video标签中将视频的宽度设为100%，高度不设。
发表评论