Blog插入B站视频测试

一、使用HTML5播放器

2016年8月15号左右,B站推出了 HTML5 播放器,自此,B 站成为国内首个原生支持全平台 HTML5 播放器的视频网站。
2017年1月19日,B站推出了HTML5播放器已经支持 https。

1.1 使用方法

将下面的HTML代码放到文章中即可.注意要修改对应的aid和cid值。

<iframe src="//player.bilibili.com/player.html?aid=47773857&cid=83681490&amp;page=1" width="640" height="480" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

B站每个视频都有对应的aidcid值,可从该视频的分享中嵌入代码中找到,也可在视频网页的源代码中可以找到(firefox右键即可view souce code)。其中aid对应的是视频的av号,而cid则是对应的视频的弹幕号.如果匹配不上,就该视频就会无法播放.

注:版权视频(如番剧)无法插入。

使用HTML5方式插入B站视频的优点:
1. 无需插件支持,不崩溃;
2. 能够做到和B站观看完全相同的效果(直接查看弹幕内容之类的)
3. http和https网站应该都能适用

1.2 HTML5播放器测试

二、使用Flash播放器

如果是http网站,可以将下面的HTML代码放到文章中即可.注意要修改对应的aid值。

<embed src="http://static.hdslb.com/play.swf?cid=83681490&aid=47773857&amp;pre_ad=&dashSymbol=true&quot; type="application/x-shockwave-flash" width="640" height="480"></embed>

如果网站支持embed自动转码,可以使用更为简单的代码(wordpress 3.5以上的版本支持)1

<embed src="http://static.hdslb.com/play.swf?cid=83681490&aid=47773857&amp;pre_ad=&dashSymbol=true&quot; width="640" height="480"></embed>

2.2 Flash播放测试效果

Reference

此条目发表在网络建站分类目录,贴了标签。将固定链接加入收藏夹。

2 则回应给 Blog插入B站视频测试

  1. dormcat说: 2019年5月16日 上午10:31
    Google Chrome 74 Google Chrome 74 Windows 10 Windows 10

    您好,网上有很多类似的教学文,但只有您这里的视频能够直接在博客页面上正常播放。作为测试,我试着把上面「四月是你的谎言」的视频那行code直接复制贴到我的博客上,但是加载到“加载视频内容”时就会“失败”,只能点“去bilibili观看”;同一个视频在您这个博客上却可以正常播放,请问差别是在哪里呢?是您这个博客有额外的CSS码(在下对CSS还没有概念…)、网域的相容性、还是有啥我没注意到的地方呢?先谢谢了。

    • yinflying说: 2019年5月20日 下午9:51
      Firefox 66 Firefox 66 GNU/Linux GNU/Linux

      可能和网站没有升级成HTTPS有关,HTTPS下播放也许会些不同。

发表评论

电子邮件地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据