关于博客引入bilibili视频
本文最后更新于 158 天前,其中的信息可能已经有所发展或是发生改变。

首先解释一下链接参数。

https://player.bilibili.com/player.html?cid=134715710&aid=78736512&page=1&as_wide=1&high_quality=1&danmaku=0

key 说明
aid 视频ID
就是B站的avxxxx后面的数字
cid 应该是客户端id
clientId 的缩写(推测的, 不一定准确)
经过测试, 这个字段不填也没关系
page 第几个视频
起始下标为 1 (默认值也是为1)
就是B站视频, 选集里的, 第几个视频
as_wide 是否宽屏
1: 宽屏, 0: 小屏
high_quality 是否高清
1: 高清, 0: 最低视频质量(默认)
如视频有 360p 720p 1080p 三种, 默认或者
high_quality=0 是最低 360p
high_quality=1 是最高1080p
danmaku 是否开启弹幕
1: 开启(默认), 0: 关闭

可以优化的问题

按比例播放视频

<!DOCTYPE HTML>
<html>
    
    <head>

    <style type="text/css">
        .aspect-ratio {
            position: relative;
            width: 100%;
            height: 0;
            padding-bottom: 75%;
        }
    
    .aspect-ratio iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }
    </style>
    
        
    </head>
    
    <body>
        
        <h1> test </h1>
        
        <div class="aspect-ratio" >
            <iframe src="https://player.bilibili.com/player.html?aid=78736512&cid=134715710&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
        </div>
        
    </body>
</html>

阻止跳转到B站

在网页上, 用户选择清晰度, 或者点击视频上面的一些图标, 会跳转到B站. 这个可通过设置 iframesandbox 属性去禁止。

sandbox=“allow-top-navigation allow-same-origin allow-forms allow-scripts”
<iframe src="https://player.bilibili.com/player.html?cid=99269782&aid=56824180&page=1&as_wide=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>

值得注意, 如果单单设置了 sandbox , 却没有传参 high_quality 字段为 1, 那么用户是切换不了视频质量的.
就是用户只能在 360p, 而点击了 720p 或者 1080p 都无效。

暂无评论

发送评论 编辑评论


				
上一篇
下一篇