npm 包 @minni-im/minni-embed-youtube 使用教程-JavaScript中文网-JavaScript教程资源分享门户

介绍

@minni-im/minni-embed-youtube 是一个可以将 Youtube 视频嵌入到网页中的 npm 包。使用该包可以简单快速地在网页中嵌入 Youtube 视频。

安装

使用 npm 安装 @minni-im/minni-embed-youtube：

npm install @minni-im/minni-embed-youtube --save

使用

使用 @minni-im/minni-embed-youtube 很简单，只需要按照以下步骤操作：

在需要嵌入 Youtube 视频的网页中，引入 @minni-im/minni-embed-youtube 的 css 和 js 文件：

<link rel="stylesheet" href="node_modules/@minni-im/minni-embed-youtube/dist/index.css">
<script src="node_modules/@minni-im/minni-embed-youtube/dist/index.js"></script>

在网页中加入一个代表视频的空 div：

<div id="player"></div>

在 js 中，使用 EmbedYT() 方法初始化视频播放器：

var player = new EmbedYT('#player', {
  id: 'VIDEO_ID',
  options: {
    //...在这里添加视频播放器的配置
  }
});

#player 是一个代表视频的空 div 的选择器，VIDEO_ID 是 Youtube 视频的 ID，options 用于设置视频播放器的配置。例如，如果想要在自动播放视频，可以将 options 设置为：

options: {
  autoplay: 1
}

在完成以上步骤后，嵌入 Youtube 视频就完成了。

示例

接下来，我们将举一个在网页中嵌入 Youtube 视频的示例，这个示例演示了如何使用 @minni-im/minni-embed-youtube 嵌入视频。

HTML

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

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

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

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

-------

JS

var player = new EmbedYT('#player', {
  id: 'YOUTUBE_VIDEO_ID',
  options: {
    autoplay: 1
  }
});

总结

通过本文，我们了解了如何使用 @minni-im/minni-embed-youtube 嵌入 Youtube 视频，并且提供了一个具体的示例。使用 @minni-im/minni-embed-youtube 可以轻松地在网页中嵌入视频，方便实用。

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