核心参数说明
这些参数通常通过在 iframe 的 src URL 后面添加 和 key=value 的形式来传递，多个参数用 & 连接。
基础尺寸与布局
| 参数 | 说明 | 示例值 |
|---|---|---|
| w | 视频宽度，可以是像素值（如 w=640）或百分比（如 w=100%）。 |
w=100% |
| h | 视频高度，可以是像素值（如 h=360）或百分比（如 h=56.25%）。注意：使用百分比时，父容器需要有明确的宽度。 |
h=360 或 h=56.25% |
| responsive | 响应式模式，设置为 1 时，视频将自动适应父容器大小，通常与 w=100% 和 h=100% 配合使用，可以简化响应式布局的实现。 |
responsive=1 |
播放控制
| 参数 | 说明 | 示例值 |
|---|---|---|
| autoPlay | 自动播放。1 为开启，0 为关闭。注意：由于浏览器策略，自动播放通常需要视频是静音的。 |
autoPlay=1 |
| mute | 静音播放。1 为开启，0 为关闭，常与 autoPlay=1 搭配使用，以实现静音自动播放。 |
mute=1 |
| loop | 循环播放。1 为开启，0 为关闭。 |
loop=1 |
| fullScreenBtn | 全屏按钮。1 为显示，0 为隐藏。 |
fullScreenBtn=0 |
| controls | 控制栏。1 为显示，0 为隐藏，隐藏控制栏通常用于实现更沉浸式的体验。 |
controls=0 |
| danmu | 弹幕开关。1 为开启，0 为关闭。 |
danmu=0 |
| danmuSwitch | 弹幕显示开关。1 为开启，0 为关闭，与 danmu 不同，danmu 是指视频是否加载弹幕数据，而 danmuSwitch 是指控制栏里的弹幕开关按钮是否默认开启。 |
danmuSwitch=0 |
| poster | 视频封面，支持指定封面图的 URL。 | poster=https://example.com/poster.jpg |
高级功能与定制
| 参数 | 说明 | 示例值 |
|---|---|---|
| logo | 腾讯视频 Logo。1 为显示，0 为隐藏。 |
logo=0 |
| showInfoBar | 信息栏。1 为显示，0 为隐藏，信息栏通常显示视频标题、UP主等信息。 |
showInfoBar=0 |
| vid | 视频 ID，这是最重要的参数，用于指定要播放的视频，它不是视频的 URL，而是腾讯视频平台内部的一个唯一标识符。 | vid=xxxxxxx |
| bkn | 防盗链参数，在某些情况下，为了防止 iframe 被恶意嵌入，腾讯视频可能会要求提供此参数，普通用户一般不需要关心。 | - |
| appKey | 开发者密钥，用于调用腾讯视频的 OpenAPI，在 iframe 播放器中较少使用，更多用于获取视频信息等后端操作。 | - |
如何获取视频 ID (vid)
这是使用 iframe 播放器的第一步。
- 打开腾讯视频网页，找到你想要嵌入的视频。
- 复制浏览器地址栏中的 URL。
- URL 格式通常为：
https://v.qq.com/x/page/xxxxxxx.html - 其中的
xxxxxxx这部分就是视频的 vid。
对于 URL https://v.qq.com/x/page/z3420w1y3m4.html，其 vid z3420w1y3m4。
综合示例
下面是几个在不同场景下使用这些参数的完整 iframe 代码示例。
示例 1：基础嵌入（默认样式）
这是最简单的用法,使用默认的尺寸和所有控件。
<iframe
src="https://v.qq.com/txp/iframe/player.html?vid=z3420w1y3m4"
allowFullScreen="true"
frameborder="0">
</iframe>
示例 2：自定义尺寸与隐藏部分控件
创建一个宽度为 640 像素，高度为 480 像素的播放器，并隐藏全屏按钮和 Logo。
<iframe
src="https://v.qq.com/txp/iframe/player.html?vid=z3420w1y3m4&w=640&h=480&fullScreenBtn=0&logo=0"
allowFullScreen="true"
frameborder="0">
</iframe>
示例 3：响应式视频（推荐）
创建一个宽度占满父容器（如 div），高度自动按比例适应的响应式视频，这是目前最主流和推荐的方式。
<style>
.video-wrapper {
width: 100%;
max-width: 800px; /* 可选，设置最大宽度 */
margin: 0 auto;
}
.video-wrapper iframe {
width: 100%;
height: 0;
padding-top: 56.25%; /* 16:9 的宽高比，9/16 = 0.5625 */
position: relative;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video-wrapper">
<iframe
src="https://v.qq.com/txp/iframe/player.html?vid=z3420w1y3m4&responsive=1"
allowFullScreen="true"
frameborder="0">
</iframe>
</div>
注意：这里使用了 responsive=1 来简化部分逻辑，但核心的响应式布局还是依赖于 CSS 的 padding-top 技巧。responsive=1 主要能帮助播放器更好地适应容器变化。
示例 4：静音自动播放（常用于广告或背景视频）
创建一个静音并自动播放的视频,适合在网站首页作为背景或广告展示。
<iframe
src="https://v.qq.com/txp/iframe/player.html?vid=z3420w1y3m4&w=640&h=360&autoPlay=1&mute=1&controls=0&logo=0"
allowFullScreen="true"
frameborder="0">
</iframe>
示例 5：隐藏所有默认 UI，实现完全定制
隐藏控制栏、Logo、信息栏等，只保留视频画面，然后通过自己的 JS 控制播放。
<iframe
src="https://v.qq.com/txp/iframe/player.html?vid=z3420w1y3m4&w=640&h=360&controls=0&logo=0&showInfoBar=0"
allowFullScreen="true"
frameborder="0">
</iframe>
总结与最佳实践
- 优先使用
vid：确保你使用的是正确的视频 ID。 - 响应式布局：为了在不同设备上都有良好的显示效果，强烈建议使用 示例 3 中的 CSS 响应式方案。
- 用户体验：除非有特殊需求（如背景视频），否则建议保留
controls=1和fullScreenBtn=1，让用户可以自由控制视频。 - 自动播放：谨慎使用
autoPlay，务必配合mute=1，并注意浏览器的自动播放策略。 - 参数组合：可以根据你的具体需求，灵活组合以上参数，以达到理想的播放效果。
希望这份详细的指南能帮助你更好地在网站上嵌入腾讯视频！
