npm 包 xxx-videojs 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

xxx-videojs 是一个基于 video.js 的 npm 包，它可以在前端页面中便捷地嵌入视频。本文将介绍如何使用 xxx-videojs 包。

安装

在项目的根目录下，使用 npm 安装 xxx-videojs。

npm install xxx-videojs

使用方法

在 HTML 文件中引入 xxx-videojs：

<head>
  <link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet" />
  <script src="https://vjs.zencdn.net/7.15.4/video.js"></script>
  <script src="node_modules/xxx-videojs/dist/xxx-video.js"></script>
</head>

在 JavaScript 中实例化 xxx-videojs：

const video = videojs('#video-player', {
  plugins: {
    videoJsResolutionSwitcher: {}
  }
});

其中 #video-player 是视频容器 ID。

在 HTML 文件中添加视频容器：

<video id="video-player" class="video-js vjs-default-skin"></video>

其中 vjs-default-skin 是皮肤类。

为视频添加资源：

video.src({ type: 'video/mp4', src: 'path/to/video.mp4' });

示例代码

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- ------------------------------------------------- ---------------- --
    ------- ------------------------------------------------------
    ------- ----------------------------------------------------------
  -------
  ------
    ------ ----------------- --------------- --------------------------
    --------
      ----- ----- - ------------------------ -
        -------- -
          -------------------------- --
        -
      ---
      ----------- ----- ------------ ---- ------------------- ---
    ---------
  -------
-------

总结

xxx-videojs 是一个非常方便的 npm 包，使用它可以轻松地嵌入视频。本文介绍了如何安装和使用 xxx-videojs，希望能够帮助您完成项目中的视频嵌入。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60065f7c238a385564ab6a37