零部署成本：单文件 Video.js 自适应播放器方案（支持 M3U8/FLV 双格式 + 键盘快捷键）

如果你需要一个支持 M3U8 和 FLV 双格式、带键盘快捷键、零依赖部署的视频播放器，基于 Video.js + 插件化的方案是一个功能丰富的选择。它自带倍速切换、音量调节、进度控制等快捷键，适合作为资源站的通用播放方案。

在线演示

点击预览实际效果：
👉 Video.js 自适应播放器演示

该演示使用开源测试视频流，支持键盘快捷键、倍速切换、静音控制等功能。

为什么选择 Video.js？

双格式支持：自动识别 .m3u8 和 .flv，自动加载对应解码器（HLS.js / FLV.js）
键盘快捷键：支持方向键控制、倍速切换、全屏、静音等操作
视觉反馈：操作提示条显示当前状态
自适应全屏：CSS 强制 100% 宽高，无边距黑边
零依赖部署：单 HTML 文件，所有资源通过 CDN 加载

完整代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>video视频播放器</title>
<style>
    html,body{margin:0;padding:0;height:100%;background:#000}
    .video-js{width:100%;height:100%}
    /* 提示条 */
    #tip{
        position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
        background:rgba(0,0,0,.6);color:#fff;padding:4px 10px;border-radius:4px;
        display:none;pointer-events:none;z-index:999
    }
</style>
</head>
<body>
<video id="player" class="video-js vjs-default-skin" controls preload="auto"></video>
<div id="tip"></div>

<!-- 远程 CDN 资源 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/video.js@8.6.1/dist/video-js.min.css">
<script src="https://cdn.jsdelivr.net/npm/video.js@8.6.1/dist/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/flv.js@latest"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-flvjs@latest/dist/videojs-flvjs.min.js"></script>

<script>
/* ===== 1. 取参 ===== */
const p=new URLSearchParams(location.search);
const url=p.get('url');
const poster=p.get('poster')||'';
const autoplay=p.get('autoplay')==='1';
if(!url){document.body.innerHTML='<h1 style="color:#fff;text-align:center">缺少 ?url= 参数</h1>';throw 0}

/* ===== 2. 判断类型 ===== */
let type='video/mp4';
const u=url.toLowerCase();
if(u.endsWith('.m3u8'))type='application/x-mpegURL';
else if(u.endsWith('.flv'))type='video/x-flv';

/* ===== 3. 初始化播放器 ===== */
const player=videojs('player',{
    autoplay:autoplay,muted:autoplay,poster:poster,
    sources:[{src:url,type:type}],
    techOrder:type==='video/x-flv'?['html5','flvjs']:['html5'],
    html5:{flvjs:{mediaDataSource:{isLive:false}}}
});

/* ===== 4. 键盘控制 ===== */
const tip=document.getElementById('tip');
function showTip(t){tip.textContent=t;tip.style.display='block';setTimeout(()=>tip.style.display='none',600)}
/* 倍速档位 */
const rates=[0.5,0.75,1,1.25,1.5,2,3];
let idx=rates.indexOf(1); /* 默认1x */
document.addEventListener('keydown',e=>{
    const c=e.key.toLowerCase(),ct=player.currentTime(),dur=player.duration(),vol=player.volume();
    switch(c){
        case 'arrowright':case 'd':
            player.currentTime(Math.min(ct+10,dur));showTip('+10 秒');break;
        case 'arrowleft':case 'a':
            player.currentTime(Math.max(ct-10,0));showTip('-10 秒');break;
        case ' ':player.paused()?player.play():player.pause();e.preventDefault();break;
        case 'arrowup':player.volume(Math.min(vol+0.1,1));showTip(`音量 ${Math.round(player.volume()*100)}%`);break;
        case 'arrowdown':player.volume(Math.max(vol-0.1,0));showTip(`音量 ${Math.round(player.volume()*100)}%`);break;
        case 'f':player.isFullscreen()?player.exitFullscreen():player.requestFullscreen();break;
        case 'm':player.muted(!player.muted());showTip(player.muted()?'静音':'已取消静音');break;
        /* 倍速切换：按 C 键循环档位 */
        case 'c':
            idx=(idx+1)%rates.length;
            const nowRate=rates[idx];
            player.playbackRate(nowRate);
            showTip(`倍速 ${nowRate}x`);
            break;
    }
});
</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

附加参数

参数	说明	示例
`poster`	视频封面图地址	`?url=xxx&poster=https://example.com/cover.jpg`
`autoplay`	自动播放（值为1）	`?url=xxx&autoplay=1`

嵌入到博客文章

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

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

核心特性解析

1. 自动格式识别

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

.m3u8 → application/x-mpegURL（HLS）
.flv → video/x-flv（需 flv.js 插件）
其他格式 → video/mp4（浏览器原生）

2. 键盘快捷键

按键	功能	提示
`←` / `A`	后退 10 秒	-10 秒
`→` / `D`	前进 10 秒	+10 秒
`↑`	音量增加 10%	音量 XX%
`↓`	音量减少 10%	音量 XX%
`空格`	播放/暂停	-
`F`	全屏切换	-
`M`	静音切换	静音/已取消静音
`C`	倍速循环	倍速 0.5x ~ 3x

3. 倍速档位

支持 7 档倍速循环切换：

0.5x → 0.75x → 1x → 1.25x → 1.5x → 2x → 3x → 0.5x...

4. 视觉反馈

操作提示：屏幕中央显示当前操作状态（如"+10 秒"、"倍速 1.5x"）
600ms 自动消失：无干扰的轻提示设计

注意事项

HTTPS 要求：播放页和视频源必须同为 HTTPS，混用会被浏览器拦截
CORS 限制：视频服务器需允许跨域访问（Access-Control-Allow-Origin: *）
CDN 可用性：如果 jsdelivr 访问慢，可将 CDN 地址替换为：
- https://unpkg.com/video.js@8.6.1/dist/video-js.min.css
- 或下载到本地使用相对路径
FLV 插件：Video.js 8.x 需要额外引入 videojs-flvjs 插件支持 FLV 格式

高级配置（可选）

如需更多功能，可在初始化时扩展配置：

const player=videojs('player',{
    autoplay: true,
    muted: true,
    poster: '封面图地址',
    sources: [{src: url, type: type}],
    techOrder: ['html5', 'flvjs'],
    html5: {
        vhs: {
            overrideNative: true,  // 强制使用 Video.js 的 HLS 实现
            limitRenditionByPlayerDimensions: true,
            useDevicePixelRatio: true
        },
        flvjs: {
            mediaDataSource: {
                isLive: false,
                cors: true,
                withCredentials: false
            }
        }
    },
    controlBar: {
        children: [
            'playToggle',
            'volumePanel',
            'currentTimeDisplay',
            'timeDivider',
            'durationDisplay',
            'progressControl',
            'liveDisplay',
            'seekToLive',
            'remainingTimeDisplay',
            'customControlSpacer',
            'playbackRateMenuButton',
            'chaptersButton',
            'descriptionsButton',
            'subsCapsButton',
            'audioTrackButton',
            'fullscreenToggle'
        ]
    }
});

总结

这是一个比 DPlayer 功能更丰富的替代方案，特别适合需要键盘快捷键控制和倍速播放的场景。Video.js 的成熟生态让它能处理各种复杂需求，而完善的插件体系支持 FLV 等额外格式。配合单文件部署，适合作为个人资源站的通用播放器。