![76923302dd133e39fd47fd0925d9b4fa.png](https://img-blog.csdnimg.cn/img_convert/76923302dd133e39fd47fd0925d9b4fa.png)
最近有一些这方面的需求
网上看了很久,这里大致的总结一下,备用
不多说,直接上干货,需要用得上的可以稍微看看
![b9a4dcd6792a9e1d574114fad08a9143.png](https://img-blog.csdnimg.cn/img_convert/b9a4dcd6792a9e1d574114fad08a9143.png)
开始布局了解
直接打开我们需要嵌入的视频网页,点击视频下方的分享按钮,把嵌入代码复制,如下图:
![01c5ee998ed186932663896c91fc6749.png](https://img-blog.csdnimg.cn/img_convert/01c5ee998ed186932663896c91fc6749.png)
先说一下外链引用的一些 缺点 :最重要的一点是清晰度默认只能显示最低的,这个是万万不能接受的,如何调清晰度后面会讲到,先学会引用先,一步一步来
先看看一个我视频的嵌入代码
<iframe src="//player.bilibili.com/player.html?aid=76053337&;bvid=BV11J41127DF&cid=130096191&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> iframe>
那么如何改变样式大小呢?
只需要加入代码
width="100%" height="600"
这里的宽度和高度可以根据自己的需求自行修改定制
最终代码是这样的(已经加粗显示了,方便查看):
<iframe src="//player.bilibili.com/player.html?aid=76053337&;bvid=BV11J41127DF&cid=130096191&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%" height="600"> iframe>
视频清晰度的调节
先来看看我们的视频地址
//player.bilibili.com/player.html?aid=76053337&;bvid=BV11J41127DF&cid=130096191&page=1
修改一下我们的地址
在 // 前面加上 https:
在视频地址最后面加上 &high_quality=1
最终的成品是这样的,新增加的部分我已经加粗显示了
https://player.bilibili.com/player.html?aid=76053337&;bvid=BV11J41127DF&cid=130096191&page=1&high_quality=1
移动端如何自适应
经过谷歌一下,找到了一些解决方法,这里直接给大家分享解密一下下
先直接看一下成品
<div style="position: relative; padding: 30% 45%;"><iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" src="https://player.bilibili.com/player.html?aid=76053337&;bvid=BV11J41127DF&cid=130096191&page=1&as_wide=1&high_quality=1&danmaku=0" frameborder="no" scrolling="no">iframe>div>
稍微解释一下上面代码的含义:
page -> 起始下标为 1 (默认值也是为1)
as_wide -> 是否宽屏 【1: 宽屏, 0: 小屏】
high_quality -> 是否高清 【1: 高清(最高1080p) / 0: 最低视频质量(默认)】
danmaku -> 是否开启弹幕 【1: 开启(默认), 0: 关闭】
allowfullscreen -> allowfullscreen= "ture" 允许全屏,使用该参数可以在浏览器中全屏播放
好了,嵌入的一些常见问题就讲到这里了
更多分享,可以关注馨客栈
馨客栈官网:mackxin.com