关注并加星标,一起成为独木鸟
有人问我如何在网页中插入bilibili视频,特做此教程说明。
例如:
https://www.bilibili.com/video/av44600925/
嵌入代码
<iframesrc="//player.bilibili.com/player.html?aid=44600925&cid=78079288&page=1"scrolling="no" border="0" frameborder="no"framespacing="0" allowfullscreen="true"></iframe>
效果1:
<iframesrc="//player.bilibili.com/player.html?aid=44600925&cid=78079288&page=1"scrolling="no" border="0" frameborder="no"framespacing="0" allowfullscreen="true"></iframe>
效果2:
<iframesrc="//player.bilibili.com/player.html?aid=44600925&cid=78079288&page=1"width="780" height="480" frameborder="0"webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
实践得出,设置的height低于"360"时,没有以下B站横幅广告,但同时也没有了吐槽功能和进度条,适合短片播放,且极其精简。
音频插入
<iframesrc="https://m.bilibili.com/audio/au755293" width="1300"height="100" scrolling="no" border="0"frameborder="no" framespacing="0"allowfullscreen="true"> </iframe>
可以得出这样的效果:
以上在手机端体验效果如下
如图,视频可以正常使用,但音频存在严重的问题,不能播放。
尝试将音频代码高度调高:
<iframesrc="https://m.bilibili.com/audio/au755293" width="1300"height="500" scrolling="no" border="0"frameborder="no" framespacing="0"allowfullscreen="true"> </iframe>
网站效果如图
手机效果…………和之前一样,现实太难看,所以不能用哔哩哔哩音频这段代码插入博客。
结论:综合来看,使用这段html代码更合适:
<iframesrc="//player.bilibili.com/player.html?aid=44600925&cid=78079288&page=1"width="780" height="480" frameborder="0"webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
其中 aid=44600925&cid=78079288 需要替换成你所需要的视频代码
视频代码查找位置:在b站任何一个视频点击分享,嵌入代码中找到相应的语句,进行替换即可,如下图:
另,注意在网站上要嵌入HTML代码,而不是作为文本输入。
综上
(这是一份我自己在操作时的笔记,只注意记录过程,而不是为了生动和分享,所以写得有些无聊,见谅,但对于需要的人来说,经验的记录或许就是最好的帮助了吧)
附:或许你还会喜欢
策划:公众号“独木鸟”
设计:抓星星的小超
2019年8月1日
在这里,我们都是独木成林的鸟
Comments | NOTHING