插入B站小视频

2017-11-23  本文已影响0人  Julian1009

最近尝试在页面插入B站的视频,没有接口那就用分享视频的地址吧


举个栗子而已,请忽略视频
<embed height="415" width="544" quality="high" 
  allowfullscreen="true" type="application/x-shockwave-flash" 
  src="//static.hdslb.com/miniloader.swf" 
  flashvars="aid=170001&page=1" 
  pluginspage="//www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash">
</embed>

于是我选用了上图的Html地址,就先 hard code 把这H5代码粘贴过来用用。
可是结果失败了

给跪的22和33

看了下调试栏,一片403

那试试iframe标签吧,链接就用Flash地址

<iframe src="https://static.hdslb.com/miniloader.swf?aid=170001&page=1" 
  width="600" height="400" 
  scrolling="no" border="0" frameborder="no" framespacing="0">
</iframe>

效果出来了。但是出现了意想不到的问题,同事的电脑浏览器打开页面后,没有播放视频,而是下载了一个.swf的文件,而我们同样的浏览器对Flash的配置
,Chrome 浏览器版本一致(Version 62.0.3202.94 (Official Build) (64-bit)),Adobe Flash 的版本一致(查询Flash版本传送门),同为27.0.0.187。

最终这个问题没有解决。

但是在看到视频结束的时候,又有一个分享,点开看到分享的Html地址与视频下方的分析不一致。加上需要的宽高后,代码如下

<iframe src="//www.bilibili.com/blackboard/player.html?aid=170001&cid=279786&page=1" 
  width="600" height="400" 
  scrolling="no" border="0" frameborder="no" framespacing="0"></iframe>

这样跳过了上面的那个问题,也不会有403。

但是高度调整到一定数值,右侧就会出现弹幕区,如图

再次请忽略视频

没有文档就是这么不好,怎么改都不知道。
好在发现别人以前关于B站视频的总结[1],给了我点启发。
文中示例URL中有这样两个参数,在别的地方没见过

我也尝试加上这个参数,效果就没有右侧的弹幕区了,完美!

这个时候多希望能有一份文档让我看看,就不至于这么猜接口了。

所以最终的代码是这样的

<iframe src="//www.bilibili.com/blackboard/player.html?aid=170001&cid=279786&page=1&as_wide=1" 
  width="600" height="400" 
  scrolling="no" border="0" frameborder="no" framespacing="0"></iframe>

  1. 参考网页嵌入Bilibili HTML5视频播放

上一篇下一篇

猜你喜欢

热点阅读