npm 包 plyr-extended 使用教程

阅读时长 5 分钟读完

在前端开发中,我们常常会需要播放媒体文件,如音频和视频。而 plyr-extended 包就提供了一套简单易用且高度可定制化的媒体播放器。

在本文中,我们将深入探讨如何使用 plyr-extended 包,并通过示例代码演示其使用。

安装 plyr-extended

plyr-extended 是使用 npm 包管理工具进行安装的,通过以下命令进行安装:

安装好之后,可以在项目中引入并使用它。

配置 plyr-extended

为了使用 plyr-extended,我们需要在项目中引入 plyr 库和 CSS 文件。你可以在 <head> 元素中加入以下代码段:

在引入 plyr-extended 之后,我们需要对其进行一些配置。在这个例子中,我们将使用 plyr-extended 播放 MP4 格式的视频文件。

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

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

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

在上述代码中,我们使用了配置对象 controls,用来指定我们要显示哪些自定义控件。

另外,我们还设置了 vimeo 对象,为所有 Vimeo 视频指定自定义标题、肖像和标题。

每个控件都有默认样式,但是你可以通过在更上层的容器中添加类名,覆盖这些默认样式。例如,我们可以添加一个 .yourskin 类名,并将所有的样式定义为该类的子类。

在 HTML 中使用 plyr-extended

实际上,我们可以通过增加 data-plyr-providerdata-plyr-embed-id 属性,使用 plyr-extended 播放来自 Youtube、Vimeo 和 Dailymotion 的媒体流。 这些媒体流可以是单个视频或者媒体流的列表。可以将 autoplay、loop 等自定义控件添加到播放器中。

以下是一个 HTML 文件使用 plyr-extended 播放视频的示例:

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

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

总结

在本文中,我们讨论了如何使用 plyr-extended 包来对媒体进行播放,并演示了如何配置和使用这个包。通过本文可以学习到如何在项目中使用这个媒体播放器,并了解到如何自定义这个播放器。

plyr-extended 是一个顶级的媒体播放器,提供了非常强大和灵活的功能。希望这篇文章能帮助读者更好地理解并使用这个包。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005672381e8991b448e3991

纠错
反馈