iframe嵌入BiliBili视频方法B站视频外链

  • 📝教程
  • 15115 阅读
  • 2019年10月19日
  • 3 条评论
  • 全文共341字, 阅读大约需要1分钟
  • 搜索引擎已收录

首页 / 📝教程 / 正文

AI摘要
Gemini Pro
此内容根据文章生成,并经过人工审核,仅用于文章内容的解释与总结
反馈

iframe嵌入BiliBili视频方法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>
BILIBILI 地址PC端参数
    &danmaku=0   (1=打开弹幕 0=关闭弹幕)

iframe 参数
    allowfullscreen="allowfullscreen" #移动端全屏
    sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts" #禁止弹出网页
属性描述
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 的宽度。

API调用

普通BV视频地址例如:https://www.bilibili.com/video/BV1Xt411n7iJ

普通AV视频地址例如:https://www.bilibili.com/video/av60016166

普通多P视频地址例如:https://www.bilibili.com/video/BV1w4411179v/?p=2

可直接输入BV、AV、EP编号如下

视频号: av60016166 || BV1Xt411n7iJ

多P视频号: av66821481?p=2 || BV1w4411179v/?p=2

外链播放:https://xbeibeix.com/api/bilibili/biliplayer/?url=【这里输入BV号】

直接frame

给主题添加自定义样式

将以下代码添加到主题的自定义CSS里

/*视频挂载*/

.iframe_video {
    position: relative;
    width: 100%;
}

@media only screen and (max-width: 767px) {
    .iframe_video {
        height: 15em;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .iframe_video {
        height: 20em;
    }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .iframe_video {
        height: 30em;
    }
}

@media only screen and (min-width: 1200px) {
    .iframe_video {
        height: 40em;
    }
}

.iframe_cross {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%
}

.iframe_cross iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0
}

复制视频源代码

打开B站视频网页,找到如下嵌入代码然后复制
<iframe src="//player.bilibili.com/player.html?aid=11932135&cid=19697229&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

修改代码

复制嵌入代码到文章需要放置的位置。然后在给iframe这个标签添加class="iframe_video"

`
`

 赞  赏

如果觉得我的文章对你有用,请随意打赏

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开  或者  扫一扫,即可进行扫码赞赏哦

本文经授权后发布,本文观点不代表立场,转载请联系原作者。
本文最后更新于2022年08月16日21时13分01秒,已超过617天没有更新,若内容或图片失效,请留言反馈
本文链接:https://nie.su/archives/1976.html(转载时请注明本文出处及文章链接)
作品采用:《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权

发表评论

已有 3 条评论

  1. 【站长】 love2wind Lv.6     Win 10 /    Chrome 说道:

    还可以使用移动端得播放器
    就是将 //player.bilibili.com/player.html 替换成 //www.bilibili.com/blackboard/html5mobileplayer.html
    参数:
    是否自动播放(默认否):autoplay
    默认弹幕开关(默认开启):danmaku
    是否默认静音(默认否):muted
    一键静音按钮是否显示(默认不显示):hasMuteButton
    视频封面下方是都显示播放量弹幕量等信息(默认显示):hideCoverInfo
    是否隐藏弹幕按钮(默认不隐藏):hideDanmakuButton
    是否隐藏全屏按钮(默认显示):noFullScreenButton
    是否开始记忆播放(默认开启):fjw
    默认开始时间(单位秒,默认0):t
    是否显示高清(默认否):highQuality(无用的,因为除了参数外它还判断了网址是否来自bilibili)

  2. 广州交通事故律师 Lv.1     Win 10 /    Chrome 说道:

    很有用,谢谢。完美设置,感谢分享教程。请看:http://www.jtsg.org/2016-07-01/3103.html

    1. 【站长】 love2wind Lv.6     Win 10 /    Chrome 说道:

      有用就好,你的支持是我最大的动力:真棒:

博主 - <?php $this->author->screenName(); ?>

love2wind

记录生活,分享世界