引言
昨天心情不太好,b站看了原版《海底》N遍,后来无意中对分享处的嵌入代码起了兴趣,因为最近刚好在学web,复制过来瞄了一下,发现是iframe标签,如下所示。
<iframe src="//player.bilibili.com/player.html?aid=413672301&bvid=BV1MV41167e9&cid=208508865&page=1"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
工具:vscode+谷歌浏览器
尝试
First
我将这段代码放入body标签内,然后运行,发现提示“该文件可能已被移至别处、修改或删除。”。(为避免侵权不展示图片,可自行尝试,下同。)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="//player.bilibili.com/player.html?aid=413672301&bvid=BV1MV41167e9&cid=208508865&page=1" scrolling="no"
border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</body>
</html>
Second
本来想着找个博客速通一下,结果发现要么就讲的不是那么清晰简洁,要么就是一些已经失效的操作,最终被迫自己fighting。
瞄了下b站给的iframe标签,发现它没有加上“https:” 头,所以会导致本地调试的时候链接出错,加上后即可链接成功。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<iframe src="https://player.bilibili.com/player.html?aid=413672301&bvid=BV1MV41167e9&cid=208508865&page=1" scrolling="no"
border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</body>
</html>
Final
链接是成功了,但是你会发现,视频简直迷你,画面非常的小......
好吧,再研究一下,查阅了不少博客,具体的过程就不说了,直接说结果吧。
加上一个css样式控制宽度,再加上一个js控制高度即可。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#bili-radio {
width: 100%;
}
</style>
</head>
<body>
<iframe id="bili-radio"
src="https://player.bilibili.com/player.html?aid=413672301&bvid=BV1MV41167e9&cid=208508865&page=1"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<script>
document.getElementById("bili-radio").style.height = document.getElementById("bili-radio").scrollWidth * 0.76 + "px";
</script>
</body>
</html>
听不太懂也没关系,直接用b站给的iframe标签替换即可。
扩展
查阅资料的过程中,对网址也有了些了解,aid和bvid估计是视频id;cid应该是客户端id,删去也不影响链接视频播放;page表示是选集里的第几个视频。
还了解到一些其他的,但是实测后发现现在能用的不多。
像如果要在第60秒开始,可以加入&t=60。
如果要让它自动播放的话,可以加入&autoplay=true。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#bili-radio {
width: 100%;
}
</style>
</head>
<body>
<iframe id="bili-radio"
src="https://player.bilibili.com/player.html?aid=413672301&bvid=BV1MV41167e9&cid=208508865&page=1&t=60&autoplay=true"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<script>
document.getElementById("bili-radio").style.height = document.getElementById("bili-radio").scrollWidth * 0.76 + "px";
</script>
</body>
</html>
还有一些问题,一个是画质比较低,只有360p,这个感觉没什么办法,因为需要登录;还有就是默认静音,以及弹幕默认开关的问题,这个感觉需要自己写一个js,等之后弄好了再更新。文章来源:https://www.toymoban.com/news/detail-770603.html
(by 归忆)文章来源地址https://www.toymoban.com/news/detail-770603.html
到了这里,关于【html+css+js】如何轻松在网页中嵌入b站视频?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!