何使用video标签添加B站视频且在小程序中同步添加视频

最近在研究小程序的时候发现网站文章中用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%,高度不设。

何使用video标签添加B站视频且在小程序中同步添加视频

温馨提示:本站提供的一切软件、教程和内容信息都来自网络收集整理,仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负,版权争议与本站无关。用户必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!

给TA打赏
共{{data.count}}人
人已打赏
生活日记

帮媳妇报二级建造师考试过程中避过的坑

2025-3-10 18:34:00

生活日记

那些在疫情期间经常听到的BGM,疫情视频背景音乐

2025-3-10 18:34:06

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索