ArtPlayer.js：一款现代化 HTML5 视频播放器

2025年12月5日792 words, 4 min read
Authors

    推荐一款现代化、功能全面的 HTML5 视频播放器 ArtPlayer.js，支持高度自定义和扩展，适用于 Web 和移动端视频播放场景。

    核心功能与特点

    • 功能丰富且高度可定制

      • 支持主流视频格式（e.g., .mp4）和流媒体协议（通过集成 flv.js、hls.js、dash.js 等库）。
      • 直接兼容 .vtt、.ass、.srt 字幕格式，支持多字幕插件（如 artplayer-plugin-multiple-subtitles）。
      • 提供弹幕功能（artplayer-plugin-danmuku）、画中画（artplayer-plugin-document-pip）等扩展插件。

    • 技术架构清晰易维护

      • 代码高度解耦，逻辑模块化，便于调试和新增功能。

    • 插件生态与扩展性

      • 提供丰富的插件（如广告支持 artplayer-plugin-vast、字幕解析 artplayer-plugin-libass）。
      • 支持与其他库（如 webtorrent.js）集成，适应不同流媒体需求。

    安装与使用

    • 安装方式：
      • npm: npm install artplayer
      • CDN: 直接引入 <script src="https://cdn.jsdelivr.net/npm/artplayer/dist/artplayer.js">
    • 基础用法示例：
      let art = new Artplayer({
  container: ".artplayer-app",
  url: "path/to/video.mp4",
});
    • 插件支持丰富：包括弹幕、HLS/DASH 控制、缩略图生成、字幕加载、视频章节、视频背景等，非常强大。

    一条完整的 ArtPlayer.js 初始化代码示例

    var art = new Artplayer({
  container: ".artplayer-app",
  url: "/assets/sample/video.mp4",
  poster: "/assets/sample/poster.jpg",
  volume: 0.5,
  isLive: false,
  muted: false,
  autoplay: false,
  pip: true,
  autoSize: true,
  autoMini: true,
  screenshot: true,
  setting: true,
  loop: true,
  flip: true,
  playbackRate: true,
  aspectRatio: true,
  fullscreen: true,
  fullscreenWeb: true,
  subtitleOffset: true,
  miniProgressBar: true,
  mutex: true,
  backdrop: true,
  playsInline: true,
  autoPlayback: true,
  airplay: true,
  theme: "#23ade5",
  lang: navigator.language.toLowerCase(),
  moreVideoAttr: {
    crossOrigin: "anonymous",
  },
  settings: [
    {
      width: 200,
      html: "Subtitle",
      tooltip: "Bilingual",
      icon: '<img width="22" height="22" src="/assets/img/subtitle.svg">',
      selector: [
        {
          html: "Display",
          tooltip: "Show",
          switch: true,
          onSwitch(item) {
            item.tooltip = item.switch ? "Hide" : "Show";
            art.subtitle.show = !item.switch;
            return !item.switch;
          },
        },
        {
          default: true,
          html: "Bilingual",
          url: "/assets/sample/subtitle.srt",
        },
        {
          html: "Chinese",
          url: "/assets/sample/subtitle.cn.srt",
        },
        {
          html: "Japanese",
          url: "/assets/sample/subtitle.jp.srt",
        },
      ],
      onSelect(item) {
        art.subtitle.switch(item.url, {
          name: item.html,
        });
        return item.html;
      },
    },
    {
      html: "Switcher",
      icon: '<img width="22" height="22" src="/assets/img/state.svg">',
      tooltip: "OFF",
      switch: false,
      onSwitch(item) {
        item.tooltip = item.switch ? "OFF" : "ON";
        console.info("You clicked on the custom switch", item.switch);
        return !item.switch;
      },
    },
    {
      html: "Slider",
      icon: '<img width="22" height="22" src="/assets/img/state.svg">',
      tooltip: "5x",
      range: [5, 1, 10, 0.1],
      onRange(item) {
        return `${item.range[0]}x`;
      },
    },
    {
      html: "Button",
      icon: '<img width="22" height="22" src="/assets/img/state.svg">',
      tooltip: "tooltip",
      onClick() {
        return "Button clicked";
      },
    },
  ],
  contextmenu: [
    {
      html: "Custom menu",
      click(contextmenu) {
        console.info("You clicked on the custom menu");
        contextmenu.show = false;
      },
    },
  ],
  layers: [
    {
      html: '<img width="100" src="/assets/sample/layer.png">',
      click() {
        window.open("https://aimu.app");
        console.info("You clicked on the custom layer");
      },
      style: {
        position: "absolute",
        top: "20px",
        right: "20px",
        opacity: ".9",
      },
    },
  ],
  quality: [
    {
      default: true,
      html: "SD 480P",
      url: "/assets/sample/video.mp4?q=480",
    },
    {
      html: "HD 720P",
      url: "/assets/sample/video.mp4?q=720",
    },
  ],
  thumbnails: {
    url: "/assets/sample/thumbnails.png",
    number: 60,
    column: 10,
    scale: 0.85,
  },
  subtitle: {
    url: "/assets/sample/subtitle.srt",
    type: "srt",
    style: {
      color: "#fe9200",
      fontSize: "20px",
    },
    encoding: "utf-8",
  },
  highlight: [
    {
      time: 15,
      text: "One more chance",
    },
    {
      time: 30,
      text: "谁でもいいはずなのに",
    },
    {
      time: 45,
      text: "夏の想い出がまわる",
    },
    {
      time: 60,
      text: "こんなとこにあるはずもないのに",
    },
    {
      time: 75,
      text: "终わり",
    },
  ],
  controls: [
    {
      position: "right",
      html: "Control",
      index: 1,
      tooltip: "Control Tooltip",
      style: {
        marginRight: "20px",
      },
      click() {
        console.info("You clicked on the custom control");
      },
    },
  ],
  icons: {
    loading: '<img src="/assets/img/ploading.gif">',
    state: '<img width="150" height="150" src="/assets/img/state.svg">',
    indicator: '<img width="16" height="16" src="/assets/img/indicator.svg">',
  },
});

    效果图：

    ArtPlayer.js 效果图

    类似的项目还是挺多的，比如 plyr，video.js，hls.js 等。 plyr 也是一款简单优雅，功能十分强大的视频播放器，笔者在 twitdown.com 这个项目上用的就是 plyr 播放器，非常推荐使用。

    plyr preview

    链接