个人站点引用bilibili、优酷视频资源网站视频的方法

文
章
目
录

• 第一步：找到你需要引用的视频地址
• 第二步：调整视频引用参数
• 第三步：将调整好的iframe代码嵌入到HTML中
• 优酷视频引用
• 最后说明

最近潘老师想在自己的个人博客中添加视频内容，主要为了以后用于展示一些Java视频教学内容、学生的毕设项目效果演示等，这样网站内容就可以更加丰富。对于个人网站空间、流量、带宽有限的情况下，最好的方法就是将视频传到bilibili（哔哩哔哩）、优酷等视频资源网站，然后使用外链进行引用即可，今天潘老师就来演示下如何引用B站、优酷等视频资源站的视频内容。

第一步：找到你需要引用的视频地址

首先视频上传我就不说了，今天刚注册了B站（话说还真麻烦，需要傻傻地回答了100个问题，得个60分才能成为正式会员），不过还没有上传视频，但这些我相信大家都会，这里我就找一个个人比较喜欢的Alan Walker – Faded视频作为演示，我们点击分享按钮，会有视频地址和嵌入代码，我们复制嵌入代码：

我这里复制的嵌入代码如下：

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

第二步：调整视频引用参数

如果你直接把此代码嵌入到你的HTML中，会发现没有控制面板，而且视频显示窗口的很小，我们需要调整一些参数获得更好的展示效果，参数说明如下：
1）bilibili引用链接参数说明

2）iframe参数说明

因此我修改嵌入代码如下：

<iframe src="//player.bilibili.com/player.html?aid=10072176&bvid=BV1rx411U7ux&cid=16645134&page=1&danmaku=0&high_quality=1" allowfullscreen="allowfullscreen" width="100%" height="500" scrolling="no" frameborder="0" sandbox="allow-top-navigation allow-same-origin allow-forms allow-scripts"></iframe>

其中danmaku=0目的是默认关闭弹幕 ，high_quality=1表示使用高清晰度，sandbox是为了阻止用户点击一些图标或选择清晰度跳转到B站。

第三步：将调整好的iframe代码嵌入到HTML中

潘老师将如上调整好的iframe代码嵌入到当前文章的HTML中，最终效果如下，快点击播放欣赏下优美的音乐吧：

优酷视频引用

其实优酷也是类似的，在分享按钮处也有iframe嵌入代码，不过它叫通用代码，我们也可以直接复制，然后修改些参数，这里我就将宽度改为100%，直接复制如下：

<iframe height=498 width=510 src='https://player.youku.com/embed/XMzYzNzIzMDczNg==' frameborder=0 'allowfullscreen'></iframe>

这是Alan Walker另一首好歌——The Spectre，也很不错哦，其嵌入后效果如下：

最后说明

优酷清晰度可调，而bilibili清晰度默认360P流畅，更高清晰度需要跳转到B站才行，还是优酷良心啊。最后，引用视频的播放不会消耗你自己网站的流量，所以尽情地引用吧~如还有问题可以联系潘老师哦！