Web组件库 iframe引入各平台视频
Web组件库 iframe引入各平台视频
郭顺发
发布于 2023-07-17 17:53:00
发布于 2023-07-17 17:53:00
1. 引入B站视频
https://www.bilibili.com/video/BV1N3411q7z7?share_source=copy_web
1.1. 效果
代码：
<iframe src="//player.bilibili.com/player.html?aid=420367466&bvid=BV1N3411q7z7&cid=401728312&page=1&as_wide=1&high_quality=1&danmaku=0" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="width: 100%;height: 500px;max-width: 100%;align: center;padding: 20px 0;"> </iframe>1.2. 实现
找到B站视频下方分享，将嵌入代码放入源代码中即可展示B站视频。
例：
<iframe src="//player.bilibili.com/player.html?aid=420367466&bvid=BV1N3411q7z7&cid=401728312&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>1.2.1. 参数描述（src）
key | 说明 |
|---|---|
aid | 之前 B 站使用的 AV 号 |
bvid | 目前的 BV 号 |
page | 第几个视频, 起始下标为 1 (默认值也是为 1)就是 B 站视频, 选集里的, 第几个视频 |
as_wide | 是否宽屏 【1: 宽屏, 0: 小屏】 |
high_quality | 是否高清 【1: 高清(最高1080p) / 0: 最低视频质量(默认)】 |
danmaku | 是否开启弹幕 【1: 开启(默认), 0: 关闭】 |
1.2.2. 调整样式
<style scoped lang='stylus'>
iframe {
width: 100%;
height: 500px;
max-width: 100%;
align: center;
padding: 20px 0;
}
</style>最终效果：
2. 引入腾讯视频
与B站视频同理，引入内嵌代码即可查看视频。
2.1. 效果
代码：
<iframe frameborder="0" src="https://v.qq.com/iframe/player.html?vid=v3270e4uem9" allowFullScreen="true" style="width: 100%;height: 500px;max-width: 100%;align: center;padding: 20px 0;"></iframe>2.2. 实现
2.2.1. 参数描述
key | 说明 |
|---|---|
vid | 视频唯一值 |
2.2.1.1. 去广告
有广告：
<center><iframe frameborder="0" src="https://v.qq.com/txp/iframe/player.html?vid=h30676epxvg" width="100%" height="240"></iframe></center>无广告：
<center><iframe frameborder="0" src="https://v.qq.com/iframe/player.html?vid=h30676epxvg" width="100%" height="240"></iframe></center>地址去掉/txp，可关闭广告。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2022-07-01
，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录