前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >如何在网站中嵌入B 站视频 自适应页面+ 默认 1080P + 并且去掉弹幕

如何在网站中嵌入B 站视频 自适应页面+ 默认 1080P + 并且去掉弹幕

作者头像
梦溪
发布2021-08-09 15:32:14
21K1
发布2021-08-09 15:32:14
举报
文章被收录于专栏:梦溪博客梦溪博客

前言

很多小伙伴想把B站的视频嵌入到自己的博客或者网站中,但直接使用官方视频下面的嵌入代码,网站用户就看不了高清、发不了弹幕,并且视频排版也很不美观。然后用户点击播放器里各种连接被引入源站,你相当于是无偿给他打广告的。

这里就教大家如何嵌入高质量的B站视频代码

代码

首先上代码

官方代码:

代码语言:javascript
复制
<iframe src="//player.bilibili.com/player.html?aid=375588815&bvid=BV1so4y1m7U5&cid=339262048&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

修改后:

代码语言:javascript
复制
<iframe src="//player.bilibili.com/player.html?aid=375588815&bvid=BV1so4y1m7U5&cid=339262048&page=1&high_quality=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>

代码讲解

代码语言:javascript
复制
BILIBILI 地址PC端参数
    &high_quality=1   (1=最高画质 0=最低画质)
    &danmaku=0   (1=打开弹幕 0=关闭弹幕)
iframe 参数
    allowfullscreen="allowfullscreen" #移动端全屏
    sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts" #禁止弹出网页

属性

描述

align

left right top middle bottom

不赞成使用。请使用样式代替。规定如何根据周围的元素来对齐此框架。

frameborder

10

规定是否显示框架周围的边框。

height

pixels%

规定 iframe 的高度。

longdesc

URL

规定一个页面,该页面包含了有关iframe 的较长描述。

marginheight

pixels

定义 iframe的顶部和底部的边距。

marginwidth

pixels

定义 iframe的左侧和右侧的边距。

name

frame_name

规定 iframe 的名称。

sandbox

“”allow-formsallow-same-originallow-scriptsallow-top-navigation

启用一系列对 <_iframe> 中内容的额外限制。

scrolling

yesnoauto

规定是否在 iframe中显示滚动条。

seamless

seamless

规定 <_iframe> 看上去像是包含文档的一部分。

src

URL

规定在 iframe中显示的文档的 URL。

srcdoc

HTML_code

规定在 <_iframe> 中显示的页面的 HTML 内容。

width

pixels%

定义 iframe 的宽度。


版权属于:Cyril

本文链接:https://cloud.tencent.com/developer/article/1858356

转载时须注明出处及本声明

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2021 年 07 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 代码
  • 代码讲解
相关产品与服务
命令行工具
腾讯云命令行工具 TCCLI 是管理腾讯云资源的统一工具。使用腾讯云命令行工具,您可以快速调用腾讯云 API 来管理您的腾讯云资源。此外,您还可以基于腾讯云的命令行工具来做自动化和脚本处理,以更多样的方式进行组合和重用。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档