零部署成本：单文件 ArtPlayer 自适应播放器方案（支持 M3U8）

基于 ArtPlayer 的零部署视频播放器：单文件自适应方案

如果你正在寻找一个无需下载任何依赖文件、开箱即用的现代化视频播放器，基于 ArtPlayer + HLS.js 的组合是目前最轻量级的解决方案。它支持 m3u8 流媒体播放、强制全屏无黑边，且完全基于 CDN 加载，单 HTML 文件即可部署到任意服务器。

在线演示

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

该演示使用开源测试视频流，支持拖拽进度、倍速播放、全屏切换等功能。

为什么选择 ArtPlayer？

零依赖部署：无需下载 JS 文件，直接引用 CDN，单文件即可运行
真正无黑边：通过 object-fit: cover 强制视频铺满视口，适合沉浸式播放
M3U8 原生支持：配合 HLS.js，无需 Flash 即可播放 HLS 流媒体
移动端优化：针对微信、Safari、QQ 浏览器做了专门适配
体积小巧：核心仅 30KB，加载速度远超传统播放器

完整代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>ArtPlayer 自适应播放器</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #000;
    }
    #artplayer-app {
      width: 100vw;
      height: 100vh;
    }
    .art-video {
      object-fit: cover !important;
    }
  </style>
</head>
<body>
  <div id="artplayer-app"></div>

  <script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>

  <script>
    const url = new URLSearchParams(location.search).get('url')?.trim();
    if (!url) {
      document.body.innerHTML = '<div style="color:#fff;text-align:center;padding-top:20%">请通过 ?url= 传入视频地址<br><br>示例：?url=https://example.com/video.m3u8</div>';
      throw new Error('No URL');
    }

    function playM3u8(video, url, art) {
      if (Hls.isSupported()) {
        if (art.hls) art.hls.destroy();
        const hls = new Hls();
        hls.loadSource(url);
        hls.attachMedia(video);
        art.hls = hls;
        art.on('destroy', () => hls.destroy());
      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = url;
      } else {
        art.notice.show = '不支持 m3u8';
      }
    }

    const art = new Artplayer({
      container: '#artplayer-app',
      url: url,
      type: 'm3u8',
      customType: { m3u8: playM3u8 },
      autoSize: true,
      aspectRatio: false,
      fullscreen: true,
      fullscreenWeb: true,
      muted: false,
      autoplay: true,
      playbackRate: true,
      setting: true,
      playsInline: true,
      theme: '#23ade5',
      moreVideoAttr: {
        'webkit-playsinline': true,
        'playsinline': true,
        'x5-playsinline': true,
        'x5-video-player-type': 'h5',
        'x5-video-player-fullscreen': false,
        'x5-video-orientation': 'portraint'
      }
    });

    art.on('ready', () => {
      art.play().catch(() => {});
    });
    
    art.on('error', () => {
      art.notice.show = '视频加载失败';
    });
  </script>
</body>
</html>

使用方法

基础播放

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

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

播放普通 MP4

https://你的域名.com/player.html?url=https://example.com/movie.mp4

嵌入到博客文章

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

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

核心特性解析

1. 强制铺满无黑边

通过 CSS object-fit: cover 让视频强制填满整个视口，即使视频比例与屏幕不符（如 4:3 视频在 16:9 屏幕上），也会自动裁剪填充，彻底告别上下黑边。

2. M3U8 播放原理

HLS.js 转码：Chrome/Firefox 通过 HLS.js 实现 m3u8 解码
Safari 原生：iOS Safari 原生支持 m3u8，自动回退到原生播放
资源管理：切换视频时自动销毁旧实例，防止内存泄漏

3. 移动端深度适配

moreVideoAttr 属性针对国内移动端浏览器做了专门优化：

微信/QQ：x5-playsinline 防止强制全屏
iOS Safari：playsinline 确保内联播放
自动播放策略：静音尝试自动播放，被阻止时等待用户交互

注意事项

HTTPS 要求：播放页和视频源必须同为 HTTPS，混用会被浏览器拦截
CORS 限制：部分 CDN 或网盘链接需确保允许跨域访问
CDN 稳定性：如果 jsdelivr 访问慢，可替换为 unpkg.com 或国内 CDN

总结

这是目前最轻量、最现代的前端视频方案。单文件部署、零配置、功能完整，适合作为个人资源站的播放器，或嵌入到 Halo、WordPress 等博客系统中作为视频预览页。配合 object-fit: cover 的无黑边特性，特别适合沉浸式观影或作为背景视频使用。