教程:如何将哔哩哔哩的视频插入网页    

关注并加星标,一起成为独木鸟    



   


   

有人问我如何在网页中插入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日                


               


               

教程:如何将哔哩哔哩的视频插入网页

           在这里,我们都是独木成林的鸟    


   


   


愿一生以梦为马,能一人独木成林