【html+css+js】如何轻松在网页中嵌入b站视频？

引言

昨天心情不太好，b站看了原版《海底》N遍，后来无意中对分享处的嵌入代码起了兴趣，因为最近刚好在学web，复制过来瞄了一下，发现是iframe标签，如下所示。

 

工具：vscode+谷歌浏览器

 

尝试 

 First

 我将这段代码放入body标签内，然后运行，发现提示“该文件可能已被移至别处、修改或删除。”。（为避免侵权不展示图片，可自行尝试，下同。）

Second 

本来想着找个博客速通一下，结果发现要么就讲的不是那么清晰简洁，要么就是一些已经失效的操作，最终被迫自己fighting。

瞄了下b站给的iframe标签，发现它没有加上“https:” 头，所以会导致本地调试的时候链接出错，加上后即可链接成功。

 Final

 链接是成功了，但是你会发现，视频简直迷你，画面非常的小......

 好吧，再研究一下，查阅了不少博客，具体的过程就不说了，直接说结果吧。

 加上一个css样式控制宽度，再加上一个js控制高度即可。

 

听不太懂也没关系，直接用b站给的iframe标签替换即可。

 

 扩展

 查阅资料的过程中，对网址也有了些了解，aid和bvid估计是视频id；cid应该是客户端id，删去也不影响链接视频播放；page表示是选集里的第几个视频。

还了解到一些其他的，但是实测后发现现在能用的不多。

像如果要在第60秒开始，可以加入&t=60。

如果要让它自动播放的话，可以加入&autoplay=true。

还有一些问题，一个是画质比较低，只有360p，这个感觉没什么办法，因为需要登录；还有就是默认静音，以及弹幕默认开关的问题，这个感觉需要自己写一个js，等之后弄好了再更新。

 （by 归忆）