编程技术

Document

【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 归忆）