首先解释一下链接参数。
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站. 这个可通过设置 iframe 的 sandbox 属性去禁止。
| 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 都无效。
- THE END -