npm包 @baladshow/plyr-shaka 使用教程

前言

@baladshow/plyr-shaka 是一个在 Plyr 播放器插件 上集成 Shaka Player 的 npm 包,它使得 Plyr 支持更多的媒体格式,同时也包含了 Shaka Player 常用的功能。本篇文章将介绍如何使用 @baladshow/plyr-shaka,省去你构建复杂的媒体播放器的时间和精力。

安装

使用 npm 进行安装,运行以下命令:

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

使用

在你的 HTML 中引入 Plyr:

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

在你的 JavaScript 中引入 Plyr 和 @baladshow/plyr-shaka:

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

接下来,你需要配置 Plyr 以支持 @baladshow/plyr-shaka。假设你已经有了一个 id 为 "player" 的 div 元素,那么你需要这样做:

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

上面的代码告诉 Plyr 使用 @baladshow/plyr-shaka 插件,并将 Shaka Player 配置为同时支持 Widevine 和 PlayReady DRM。在这个对象中,shakaConfig 对象是可选的,你可以设置它来配置 Shaka Player 的各种选项。

现在,你已经完成了配置。你可以按照 Plyr 的标准方式添加你的媒体,就像这样:

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

最后,使用 Plyr 实例播放你的媒体:

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

示例代码

下面是一个完整的示例代码:

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

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

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

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

总结

@baladshow/plyr-shaka 使得使用 Plyr 创建媒体播放器变得更加容易和标准化,同时也包含了 Shaka Player 常用的功能。本文向你展示了如何使用它来创建一个 Plyr 播放器,从而支持更多的媒体格式和 DRM。希望这篇文章能够帮助你快速上手并使用 @baladshow/plyr-shaka。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600672673660cf7123b365b9


猜你喜欢

  • npm 包 configuration-frontend 使用教程

    简介 近年来随着前端的快速发展,配置文件已成为前端开发过程中不可或缺的一部分。而 npm 包 configuration-frontend 为前端开发人员提供了一种轻松高效的配置文件方案。

    4 年前
  • npm 包 `angular-7-angularfire-2-crud-tutorial` 使用教程

    简介 angular-7-angularfire-2-crud-tutorial 是一个基于 Angular 和 Firebase 的应用程序示例。它演示了如何创建一个基本的 CRUD 应用程序,包括...

    4 年前
  • npm 包 fscrub 使用教程

    什么是 fscrub? fscrub 是一个基于 Node.js 的 npm 包,它可以帮助开发者对文件和字符串内容进行格式化和清理。fscrub 提供了一系列的插件,它们可以帮助开发者快速完整地对代...

    4 年前
  • NPM包 @valevassallo/introduction-translator 使用教程

    随着国际交流的日益频繁,我们在阅读英文技术文献或者与外国团队沟通时必须具备基本的英语能力。但同时,我们也经常会遇到一些专业术语或者语法结构不易理解的情况,这时候一个好用的文献翻译工具就显得尤为必要。

    4 年前
  • npm 包 hyperprov-client 使用教程

    在前端开发中,我们经常需要处理数据的访问和管理问题。而 hyperprov-client 是一个强大的 npm 包,可以帮助我们解决这些问题。本文将介绍如何使用 hyperprov-client 的基...

    4 年前
  • npm 包 lib-export 使用教程

    在前端开发中,我们常常需要使用到一些第三方开源库,这些库一般以 npm 包的形式发布。在使用 npm 包时,我们需要了解该包的导出方式以及如何正确地使用它们。本文将详细介绍一个 npm 包的导出工具—...

    4 年前
  • npm 包 modular-rest-toolkit 使用教程

    前端开发需要经常与后端进行数据交互,而 RESTful API 是当前最流行的接口设计风格之一。为了便于前端开发者使用 RESTful API,我们推荐使用 npm 包 modular-rest-to...

    4 年前
  • npm 包 @xiapx/react-native-mqtt 使用教程

    前言 在开发前端移动端应用时,如何与后端服务器进行数据交互是一个关键的问题。而 MQTT 是一种轻量级的消息传输协议,可以实现设备之间的数据通讯,也适用于应用与服务器之间的通讯。

    4 年前
  • npm 包 react-parabola 使用教程

    在前端开发中,动画效果的运用可以给用户带来很好的交互体验。react-parabola 是一个基于 React 的 npm 包,它可以让你轻松实现二维平面上的抛物线运动动画效果。

    4 年前
  • npm 包 t-table 使用教程

    前言 在前端开发中,经常需要展示表格数据,常常需要写一些繁琐的 HTML 和 CSS 代码。而使用 npm 包 t-table 可以简化这一过程,从而提高开发效率。

    4 年前
  • npm 包 react-trivial-timeline 使用教程

    React Trivial Timeline 是一个 React 组件库,它是用于展示时间线和事件的轻量级组件。有了它,你可以轻松地创建一个漂亮的时间线,让用户更好地理解时间序列。

    4 年前
  • npm 包 stock-technical-indicators 使用教程

    在股票市场中,技术分析是一种久经考验的方法,可以帮助投资者预测股票价格的走势。在前端开发中,利用股票的历史价格数据进行技术分析可以实现一些有趣的web应用。本教程将介绍一款名为 stock-techn...

    4 年前
  • npm 包 react-dinero.js 使用教程

    前言 随着 React 技术的不断发展,前端开发工作也变得日益复杂,开发者需要不断学习新的知识和技能。其中,npm 包是 React 开发必不可少的一部分。在本文中,我们将介绍一种名为 react-d...

    4 年前
  • npm 包 webuikit 使用教程

    在前端开发中,使用 UI 库可以大大提高开发效率和用户体验。而 webuikit 是一款基于 Vue2.0 的 UI 库,可以快速打造现代化的 Web 应用程序。 本文将为大家介绍如何使用 webui...

    4 年前
  • npm 包 @almcd/mapnumericalrange 使用教程

    在前端开发中,经常需要将一定范围内的数字映射到另一个范围内,这个过程叫做数值范围映射。在实现过程中,需要一些计算和算法。为了提高开发效率和质量,现有npm 包 @almcd/mapnumericalr...

    4 年前
  • npm 包 ngm-grid 使用教程

    在前端开发中,响应式网站设计已经成为一种趋势。而如何实现响应式布局,以及如何规划网站网格系统是我们需要重点关注的问题之一。如今,通过 npm 包 ngm-grid,我们可以简单地实现网站网格系统的设计...

    4 年前
  • npm 包 pledged 使用教程

    在前端开发中,经常需要处理异步操作,例如请求网络数据、读写文件等。在 JavaScript 中,常常使用 Promise 对象来处理异步操作,以便在异步操作完成之后再执行相应的代码。

    4 年前
  • npm 包 react-simple-linkify 使用教程

    在开发前端应用时,我们通常会使用到一些第三方库和工具来帮助我们更快速地实现一些功能。其中,npm 是目前最常用的 JavaScript 包管理工具之一,能够为我们提供丰富的依赖库,让我们快速搭建起一个...

    4 年前
  • npm包 @beast-oe/appjson使用教程

    概述 无论是作为前端开发者,还是作为Web应用程序的维护者,我们都需要能够轻松地管理和使用我们的应用程序的配置文件。@beast-oe/appjson通过提供一个简单而强大的解决方案来帮助我们实现这个...

    4 年前
  • npm 包 npm-slider 使用教程

    在前端开发中,我们经常需要使用到轮播图组件满足各种需求。而 npm 包 npn-slider 就是一款出色的轮播图组件,它不仅易于使用,而且具有全面的功能和灵活的配置选项。

    4 年前

相关推荐

    暂无文章