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

引言

昨天心情不太好,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,等之后弄好了再更新。

 (by 归忆)