您可以轻松地将我们的M3U8在线播放器嵌入到您自己的网站中，为您的用户提供流畅的视频播放体验。本指南将详细介绍嵌入方法和各种配置选项。

基础嵌入方法

最简单的嵌入方式是使用iframe标签。只需复制以下代码到您的网页中：

<iframe 
  src="https://playm3u8.org/player.html?url=YOUR_M3U8_URL" 
  width="100%" 
  height="450" 
  frameborder="0" 
  allowfullscreen>
</iframe>

将 YOUR_M3U8_URL 替换为您要播放的M3U8地址即可。

URL参数说明

参数	说明	示例
url	M3U8视频地址（必填）	url=https://example.com/video.m3u8
autoplay	是否自动播放	autoplay=1
muted	是否静音	muted=1
poster	封面图片URL	poster=https://example.com/cover.jpg

完整示例

示例1：基础嵌入

<iframe 
  src="https://playm3u8.org/player.html?url=https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8" 
  width="100%" 
  height="450" 
  frameborder="0" 
  allowfullscreen>
</iframe>

示例2：自动静音播放

<iframe 
  src="https://playm3u8.org/player.html?url=YOUR_URL&autoplay=1&muted=1" 
  width="100%" 
  height="450" 
  frameborder="0" 
  allowfullscreen>
</iframe>

⚠️ 注意：由于浏览器策略限制，自动播放通常需要配合静音使用。带声音的自动播放可能会被浏览器阻止。

响应式布局

为了让播放器在不同屏幕尺寸下都能正常显示，推荐使用响应式布局：

<style>
.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 比例 */
  height: 0;
  overflow: hidden;
}
.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

<div class="video-container">
  <iframe 
    src="https://playm3u8.org/player.html?url=YOUR_URL" 
    frameborder="0" 
    allowfullscreen>
  </iframe>
</div>

安全注意事项

HTTPS要求

如果您的网站使用HTTPS，嵌入的播放器和M3U8地址也必须使用HTTPS，否则会被浏览器阻止（Mixed Content）。

CORS配置

M3U8视频源服务器需要正确配置CORS头，允许跨域访问。如果您无法控制视频源服务器，可能会遇到跨域问题。

内容版权

请确保您有权播放和分发嵌入的视频内容。我们的播放器仅提供技术支持，不对内容版权负责。

常见问题

Q: 嵌入后显示空白怎么办？

检查：1) M3U8地址是否正确 2) 是否存在CORS问题 3) 浏览器控制台是否有错误信息

Q: 可以去掉播放器控制栏吗？

目前不支持隐藏控制栏，这是为了确保用户能够控制播放。如需深度定制，建议使用我们的API自行开发。

Q: 嵌入播放器收费吗？

完全免费！您可以在任何网站上免费使用我们的M3U8在线播放器嵌入功能。

WordPress嵌入

在WordPress中嵌入播放器，可以使用"自定义HTML"区块：

编辑文章或页面
添加"自定义HTML"区块
粘贴iframe代码
预览并发布

M3U8播放器嵌入指南