在网站制作过程中,我们有时会想在自己的网页上转载bilibili的视频。可是,为了保护UP主的版权,我们绝对不可以直接把视频录制下来放到我们的网站上。而且,在页面上加载视频可能会让我们的服务器不堪重负。那么,如何合理合法的在自己的网站上播放bilibili的视频呢?

首先打开我们想要转载的视频。

在视频下方的分享功能中找到嵌入代码。

复制这一条代码到我们的网站,添加到html文件中。

类似这样:

However,刚刚加入的视频变成了这个样子。

能看,只能看一点点。

这是因为哔哩哔哩提供的分享代码里没有限制植入视频的样式。

所以我们需要修改一下这个代码。

如何让视频大小合适?

这是一段iframe标签,<iframe> 标签规定一个内联框架,被用来在当前 HTML 文档中嵌入另一个文档。

哔哩哔哩已经为我们写好了关键的部分,我们只需要添加一段限制style的命令:

原代码:

<iframe src="//player.bilibili.com/player.html?aid=56315372&bvid=BV1h441137Uc&cid=99753609&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

在iframe标签之间加入:

style="width:100%;height:500px;max-width:100%;align:center;padding:20px 0;"

更改后:

<iframe src="//player.bilibili.com/player.html?aid=56315372&bvid=BV1h441137Uc&cid=99753609&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"style="width:100%;height:500px;max-width:100%;align:center;padding:20px 0;"> </iframe>

现在,让我们运行一下:

看!是不是正常了

甚至可以看弹幕!

不过需要注意,这时视频的清晰度只有360P


“好久不见,Handler One”