B站HTML5视频的引用方法
HTML5作为当今的趋势，目前html5正在逐步取代flash，B站已经把html5播放器设为默认播放器，html5视频能在移动端实现播放，而flash视频是不支持移动端设备的，如何引用B站的视频实现手机电脑的播放，本文给出引用的方式。
B站HTML5的支持情况
当前浏览器版本:
5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/55.0.2883.87 Safari/537.36
HTML5 Video标签支持
- HTML5 Video标签支持
- MP4 播放支持
- CSS3弹幕支持
- Canvas绘制支持
- Media Source Extensions支持
- MSE & H.264支持
HTML5视频iframe代码
将下列代码复制到博客中即可实现http/https电脑和移动端的视频播放
注意：只有B站有分享按钮的视频才可以外链播放，电影纪录片之类的会显示视频失效
- <iframe src="//player.bilibili.com/player.html?high_quality=1&aid=1250357" width="100%" height="600" frameborder="0" allowfullscreen="true"></iframe>
效果如下面所示：
iframe代码参数说明
- width 视屏宽度，默认设置100%
- height 视频高度，设置一个固定高度可预览调试最佳高度，设置100%会出现比例失调问题
- high_quality=1 添加后默认高画质，不加默认最低画质
- allowfullscreen="allowfullscreen" 允许全屏，使用该参数可以在浏览器中全屏播放
独立视频
B站播放页面只有一个视频，需要视频的aid信息，在原视频页面分享窗口可以找到，还可以鼠标右键-查看源代码搜索aid即可找到
最终插入到网页的视频代码如下：
- <iframe src="//player.bilibili.com/player.html?aid=?????" width="100%" height="500" frameborder="0" allowfullscreen="true"></iframe>
专辑视频
B站播放页面含有多个视频，需要添加page参数，当前B站播放的视频page信息可以在页面分享界面找到。
最终插入到网页的视频代码如下：
- <iframe src="//www.bilibili.com/html/player.html?aid=?????&page=?" width="100%" height="500" frameborder="0" allowfullscreen="true"></iframe>
发表评论
要发表评论，您必须先登录。