← 返回实用手记

2019.07.23 / gd

在网页里嵌入 Bilibili 视频:iframe 示例与参数说明

想在自己的网页里放一段 B 站视频,可以嵌入它的播放器。下面保留了原来的演示和代码,先看效果,再看参数。播放器能否载入,还取决于视频本身和 B 站当前的嵌入规则。

演示与代码

<iframe src="//player.bilibili.com/player.html?aid=60016166&cid=104514776&page=1&danmaku=0" allowfullscreen="allowfullscreen" width="100%" height="500" scrolling="no" frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>

示例里的 aid、cid 和 page 对应这段视频。换视频时要换成目标视频的参数,不能只改页面上显示的标题。

几个容易混淆的参数

原记录用 danmaku=0 关闭弹幕,danmaku=1 打开弹幕;width 和 height 决定嵌入区域的尺寸,allowfullscreen 用于允许全屏。下面的旧参数笔记也留着,方便对照。

BILIBILI 地址PC端参数
    &danmaku=0   (1=打开弹幕 0=关闭弹幕)

iframe 参数
    allowfullscreen="allowfullscreen" #移动端全屏
    sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts" #禁止弹出网页

这里纠正一下旧笔记:sandbox 是权限限制,后面的 allow-* 会逐项放开权限。示例中的 allow-top-navigation 允许导航顶层页面,所以不能把整串设置理解为“禁止所有跳转”。具体含义可以查 MDN 的 iframe 文档。

旧属性表,留作对照

下表是原文收集的属性资料,其中部分写法已过时。新页面的边框、对齐等样式优先交给 CSS,不必把表里的属性全塞进 iframe。

属性值描述
alignleftrighttopmiddlebottom不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。
frameborder10规定是否显示框架周围的边框。
heightpixels%规定 iframe 的高度。
longdescURL规定一个页面,该页面包含了有关 iframe 的较长描述。
marginheightpixels定义 iframe 的顶部和底部的边距。
marginwidthpixels定义 iframe 的左侧和右侧的边距。
nameframe_name规定 iframe 的名称。
sandbox“”allow-formsallow-same-originallow-scriptsallow-top-navigation启用一系列对 <iframe> 中内容的额外限制。
scrollingyesnoauto规定是否在 iframe 中显示滚动条。
seamlessseamless规定 <iframe> 看上去像是包含文档的一部分。
srcURL规定在 iframe 中显示的文档的 URL。
srcdocHTML_code规定在 <iframe> 中显示的页面的 HTML 内容。
widthpixels%定义 iframe 的宽度。

相关工具

聊一聊

  1. 您好,请问插入框架的视频,分辨率只能保持在默认的360p,点击其他分辨率就跳转到B站,有没有办法可以调整为更高的分辨率呢?谢谢!

  2. 请问下player.bilibili.com/player.html?aid=60016166&cid=104514776&page=1&danmaku=0里的aid和cid哪里来的呢,我的b站视频都是类似https://www.bilibili.com/video/BV1BT4y1L7Fs/的

  3. 你好,使用xbeibeix.com/api/bilibili/biliplayer/?url=形式的嵌入之后,视频会自动加载和自动播放,如何禁止自动加载和自动播放?另外,如何给视频制作封面图,谢谢

  4. 您好!

    想請問一下這是不是在移動應用內嵌的遊覽器是不能作用的呢?

    我目前的測試如果是開啟外部遊覽器影片都能讀到

    但是內嵌遊覽器都會顯示”視頻加載失敗”,是因為iframe不支援嗎?

  5. 你好,请问一下,用iframe嵌入时,
    player.bilibili.com/player.html?aid=60016166&cid=104514776&page=1&danmaku=0
    和
    xbeibeix.com/api/bilibili/biliplayer/?url=av60016166?p=1

    这两种地址显示有什么区别呢?就是直接用B站的地址或贝贝站的API地址是有什么不同?
    另一个问题就是有能直接用播放的地址吗?

    多谢了。

    1. 直接播放的地址可以使用 接口输入AID,CID获取,
      官方的兼容性更好,有广告会跳转B站。移动端无高清。
      提供的接口有的视频不能播放,没有多余链接。部分视频画质更高。兼容PC和移动端。缺点是不一定什么时候就不能用了。

  6. 为什么我在本地html里插入b站iframe外链以后请求不回复?有什么办法解决吗?求教

    1. iframe src=”//player.bilibili.com/
      本地需要改成,WEB服务器不要加HTTPS
      iframe src=”https://player.bilibili.com/

  7. 这个貌似不起作用了,现在最高画质1的时候,显示的还是480的分辨率。

  8. 你好,在手机端(微信)浏览,会出现高度失调问题,就是长宽比例失调,可以实现自适应吗?

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注




Enter Captcha Here :