基于 DPlayer 的极简自适应播放器：支持 M3U8/FLV 双格式

如果你需要一个支持 M3U8 和 FLV 双格式、自动识别、零依赖部署的视频播放器，基于 DPlayer + CDN 的方案是一个轻量简洁的选择。它自动判断视频格式、加载对应解码器，适合作为资源站的通用播放方案。

在线演示

该演示使用开源测试视频流，支持自动格式识别、静音自动播放、截图等功能。

为什么选择 DPlayer？

双格式支持：自动识别 .m3u8 和 .flv，自动加载对应解码器（HLS.js / FLV.js）
极简代码：核心逻辑仅 30 行，无冗余功能
自适应全屏：CSS 强制 100% 宽高，无边距黑边
零依赖部署：单 HTML 文件，所有资源通过 CDN 加载
开箱即用：仅需一个 ?url= 参数，无需任何配置

完整代码

将以下代码保存为 index.html，上传到服务器任意目录即可使用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>DPlayer</title>
<style>
    html,body{margin:0;height:100%;background:#000;font-family:sans-serif}
    #dplayer{width:100%;height:100%}
</style>
</head>
<body>
<div id="dplayer"></div>

<!-- 远程 CDN 资源 -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/flv.js@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/dplayer@latest/dist/DPlayer.min.js"></script>

<script>
/* ---------- 1. 解析 URL 参数 ---------- */
const p = new URLSearchParams(location.search);
const url = p.get('url');

if (!url) { 
    document.body.innerHTML = '<h1 style="color:#fff;text-align:center">缺少 ?url= 参数</h1>'; 
    throw 0; 
}

/* ---------- 2. 自动判断视频类型 ---------- */
let type = 'auto';
const ext = url.split('?')[0].toLowerCase().split('.').pop();

if (ext === 'm3u8') type = 'hls';
if (ext === 'flv')  type = 'flv';

/* ---------- 3. 初始化播放器 ---------- */
const dp = new DPlayer({
    container: document.getElementById('dplayer'),
    video: { 
        url: url, 
        type: type 
    },
    autoplay: true,
    muted: true,
    theme: '#b7daff',
    screenshot: true
});
</script>
</body>
</html>

使用方法

基础播放（支持 m3u8/flv）

将视频地址通过 URL 参数传入：

https://你的域名.com/player.html?url=https://example.com/video.m3u8

播放 FLV 格式

https://你的域名.com/player.html?url=https://example.com/video.flv

嵌入到博客文章

在其他页面中通过 iframe 嵌入：

<iframe src="https://你的域名.com/player.html?url=视频地址" 
        width="100%" 
        height="500" 
        frameborder="0" 
        allowfullscreen>
</iframe>

核心特性解析

1. 自动格式识别

通过 URL 后缀自动判断视频类型：

.m3u8 → 启用 HLS.js 解码
.flv → 启用 FLV.js 解码
其他格式 → 使用浏览器原生播放

2. 参数处理逻辑

自动去除 URL 中的查询参数（? 后的内容）
统一转小写后匹配后缀，避免大小写问题
无参数时直接显示错误提示

3. 播放器配置

自动播放：autoplay: true，配合 muted: true 确保现代浏览器兼容
主题色：#b7daff 浅蓝色进度条
截图功能：开启 screenshot: true，支持视频画面截取

注意事项

HTTPS 要求：播放页和视频源必须同为 HTTPS，混用会被浏览器拦截
CORS 限制：视频服务器需允许跨域访问（Access-Control-Allow-Origin: *）
CDN 可用性：如果 jsdelivr 访问慢，可将 CDN 地址替换为：
- https://unpkg.com/dplayer@latest/dist/DPlayer.min.js
- 或下载到本地使用相对路径

总结

这是一个比 CKPlayer 更轻量的替代方案，特别适合需要极简代码和快速部署的场景。DPlayer 的简洁 API 让它能在 30 行代码内完成格式识别和播放器初始化，而纯 CDN 加载方案让部署零成本。配合单文件部署，适合作为个人资源站的通用播放器。

零部署成本：单文件 DPlayer 自适应播放器方案（支持 M3U8/FLV 双格式）