videojs-markers 开源项目教程

2026-01-18 09:24:43作者：申梦珏Efrain

1. 项目的目录结构及介绍

videojs-markers 项目的目录结构如下：

videojs-markers/
├── dist/
│   ├── videojs-markers.css
│   └── videojs-markers.js
├── examples/
│   ├── index.html
│   └── simple.html
├── src/
│   ├── videojs.markers.css
│   └── videojs.markers.js
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── package.json
└── webpack.config.js

目录结构介绍：

dist/：包含编译后的 CSS 和 JavaScript 文件，用于生产环境。
examples/：包含示例 HTML 文件，展示如何使用 videojs-markers 插件。
src/：包含源代码文件，包括 CSS 和 JavaScript 文件。
.gitignore：指定 Git 版本控制系统忽略的文件和目录。
.npmignore：指定 npm 包发布时忽略的文件和目录。
LICENSE：项目的开源许可证。
README.md：项目的说明文档。
package.json：项目的 npm 配置文件，包含依赖项和其他元数据。
webpack.config.js：Webpack 配置文件，用于构建项目。

2. 项目的启动文件介绍

项目的启动文件主要是 examples/index.html 和 examples/simple.html。这些文件展示了如何使用 videojs-markers 插件。

`examples/index.html`

这个文件是一个基本的示例，展示了如何在一个视频播放器中添加标记。

<!DOCTYPE html>
<html>
<head>
  <link href="../dist/videojs-markers.css" rel="stylesheet">
  <script src="../dist/videojs-markers.js"></script>
</head>
<body>
  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
    data-setup='{}'>
    <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
  <script>
    var player = videojs('example_video_1');
    player.markers({
      markers: [
        { time: 9.5, text: "this" },
        { time: 16, text: "is" },
        { time: 23.6, text: "so" },
        { time: 28, text: "cool" }
      ]
    });
  </script>
</body>
</html>

`examples/simple.html`

这个文件是一个简单的示例，展示了如何在一个视频播放器中添加标记。

<!DOCTYPE html>
<html>
<head>
  <link href="../dist/videojs-markers.css" rel="stylesheet">
  <script src="../dist/videojs-markers.js"></script>
</head>
<body>
  <video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="264"
    data-setup='{}'>
    <source src="https://vjs.zencdn.net/v/oceans.mp4" type="video/mp4" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
  <script>
    var player = videojs('example_video_1');
    player.markers({
      markers: [
        { time: 9.5,