很多小伙伴想把B站的视频嵌入到自己的网站中可是官方的代码就十分到蛋疼看不了高清、发不了弹幕,视频排版也不美观。用户点击播放器里各种连接被引入源站,靠这不是变相广告吗。
官方原代码:
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=410180086&bvid=BV1xG411k7bk&cid=1379013477&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
效果:
但是事实是官方只是故意让不懂的小白上当解决方法也很简单稍微修改一下代码
优化后:
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=410180086&bvid=BV1xG411k7bk&cid=1379013477&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>
这个 <iframe> 标签包含了多个属性,每个属性都有特定的含义和作用。以下是每个属性的解释:
src:
指定要嵌入页面的资源的 URL。在这个例子中,它指向一个 Bilibili 视频播放器页面。
allowfullscreen:
允许用户启用全屏模式。 allowfullscreen=”allowfullscreen” 是 HTML5 中的写法,确保在不同的浏览器中都能正常工作。
width:
设置 <iframe> 的宽度。在这个例子中,宽度设置为 100% ,表示占据父容器的全部宽度。
height:
设置 <iframe> 的高度。在这个例子中,高度设置为 500 像素。
scrolling:
控制是否显示滚动条。 scrolling=”no” 表示不显示滚动条。
frameborder:
控制是否显示 <iframe> 的边框。 frameborder=”0″ 表示不显示边框。
sandbox:
限制 <iframe> 中的内容,提高安全性。 sandbox=”allow-top-navigation allow-same-origin allow-forms allow-scripts” 表示允许顶层导航、相同源、表单和脚本。
URL 参数:
aid=375588815 :视频的aid。
bvid=BV1so4y1m7U5 :视频的B站ID。
cid=339262048 :视频的集数 ID。
page=1 :视频分页编号。
high_quality=1 :表示使用高清质量播放视频。
danmaku=0 :表示不显示弹幕。
这些属性共同决定了 <iframe> 的行为和显示效果。
优化后效果:
我来解释一下这两段 <iframe> 代码的差异
如下:
属性顺序:
第一个 <iframe> 的属性顺序是 src 、 scrolling 、 border 、 frameborder 、 framespacing 、 allowfullscreen 。
第二个 <iframe> 的属性顺序是 src 、 page 、 high_quality 、 danmaku 、 allowfullscreen 、 width 、 height 、 scrolling 、 frameborder 、 sandbox 。
属性名称和值:
第一个 <iframe> 中没有指定 width 和 height ,也没有 high_quality 、 danmaku 和 sandbox 属性。
第二个 <iframe> 中指定了 width=”100%” 和 height=”500″ ,并且有 high_quality=1 、 danmaku=0 和 sandbox=”allow-top-navigation allow-same-origin allow-forms allow-scripts” 属性。
URL 参数:
第二个 <iframe> 的 URL 中有额外的参数 high_quality=1 和 danmaku=0 。
HTML 注释:
第一个 <iframe> 中包含了一个 HTML 注释 </iframe> 。
第二个 <iframe> 中没有 HTML 注释。
这些差异可能会影响 <iframe> 的行为和显示效果,具体如下:
high_quality=1 和 danmaku=0 参数会影响视频播放的质量和弹幕显示。
width 和 height 属性指定了 <iframe> 的大小。
sandbox 属性可以限制 <iframe> 中的内容,提高安全性。
在实际使用中,应根据需要选择合适的属性和属性值。
没有回复内容