嵌入到自有网站教程

简介

本教程将详细介绍如何将HLS流媒体播放器嵌入到你的自有网站中，支持固定尺寸、响应式布局、自定义播放地址等功能。

嵌入方式采用标准的iframe标签，无需引入额外JS/CSS，兼容所有主流浏览器。

基础iframe嵌入

最简单的嵌入方式如下，只需替换播放地址即可：

<iframe
    src="https://hls-vedio.pages.dev/?url=https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
    width="100%"
    height="480px"
    frameborder="0"
></iframe>

参数说明

• src：播放器地址 + 播放参数，url 参数为你的M3U8流媒体地址
• width：播放器宽度，支持百分比（如100%）或固定像素（如800px）
• height：播放器高度，建议设置为480px/720px等常用尺寸
• frameborder：边框宽度，设置为0隐藏边框

自定义参数

支持通过URL参数自定义播放器行为：

<iframe
    src="https://hls-vedio.pages.dev/?url=https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8&autoplay=1&controls=0"
    width="800"
    height="450"
    frameborder="0"
></iframe>

支持的参数列表

参数名	取值	说明
url	M3U8地址	必填，流媒体播放地址
autoplay	1/0	是否自动播放，默认0（不自动）
controls	1/0	是否显示控制栏，默认1（显示）
muted	1/0	是否静音播放，默认0（不静音）

响应式适配

为了适配移动端和不同尺寸的屏幕，推荐使用响应式嵌入方式：

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
    <iframe
        src="https://hls-vedio.pages.dev/?url=https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
        frameborder="0"
        allowfullscreen
    ></iframe>
</div>

说明：

• padding-bottom: 56.25%：16:9 比例，适合大多数视频
• 如果需要4:3比例，设置为 75%
• allowfullscreen：允许全屏播放

常见问题

1. 嵌入后无法播放

• 检查M3U8地址是否有效，可先在播放器主页测试
• 确认地址支持跨域访问（CORS）
• HTTPS网站只能嵌入HTTPS的播放器地址

2. 移动端显示异常

• 使用响应式嵌入方式
• 确保iframe的width设置为100%
• 移动端自动播放需要静音（muted=1）

3. 自定义样式

iframe嵌入无法直接修改播放器样式，如需定制可联系我们获取专属版本。