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

Web前端 潘老师 3年前 (2020-12-09) 4257 ℃ (0) 扫码查看

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

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

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

<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引用链接参数说明
个人站点引用bilibili、优酷视频资源网站视频的方法
2)iframe参数说明
个人站点引用bilibili、优酷视频资源网站视频的方法
因此我修改嵌入代码如下:

<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站才行,还是优酷良心啊。最后,引用视频的播放不会消耗你自己网站的流量,所以尽情地引用吧~如还有问题可以联系潘老师哦!


版权声明:本站文章,如无说明,均为本站原创,转载请注明文章来源。如有侵权,请联系博主删除。
本文链接:https://www.panziye.com/java/web/1759.html
喜欢 (5)
请潘老师喝杯Coffee吧!】
分享 (0)
用户头像
发表我的评论
取消评论
表情 贴图 签到 代码

Hi,您需要填写昵称和邮箱!

  • 昵称【必填】
  • 邮箱【必填】
  • 网址【可选】