前言
@baladshow/plyr-shaka 是一个在 Plyr 播放器插件 上集成 Shaka Player 的 npm 包，它使得 Plyr 支持更多的媒体格式，同时也包含了 Shaka Player 常用的功能。本篇文章将介绍如何使用 @baladshow/plyr-shaka，省去你构建复杂的媒体播放器的时间和精力。
安装
使用 npm 进行安装，运行以下命令：
npm install @baladshow/plyr-shaka --save
使用
在你的 HTML 中引入 Plyr：
<link rel="stylesheet" href="https://cdn.plyr.io/3.6.2/plyr.css" /> <script src="https://cdn.plyr.io/3.6.2/plyr.polyfilled.js"></script>
在你的 JavaScript 中引入 Plyr 和 @baladshow/plyr-shaka：
import Plyr from "plyr"; import "@baladshow/plyr-shaka";
接下来，你需要配置 Plyr 以支持 @baladshow/plyr-shaka。假设你已经有了一个 id 为 "player" 的 div 元素，那么你需要这样做：
-- -------------------- ---- -------
----- ------ - --- --------------- -
----------------- -----
------------ -
---- -
-------- -
--------------------- -----------------------------------
-------------------------- ------------------------------------
--
--
--
---上面的代码告诉 Plyr 使用 @baladshow/plyr-shaka 插件，并将 Shaka Player 配置为同时支持 Widevine 和 PlayReady DRM。在这个对象中，shakaConfig 对象是可选的，你可以设置它来配置 Shaka Player 的各种选项。
现在，你已经完成了配置。你可以按照 Plyr 的标准方式添加你的媒体，就像这样：
-- -------------------- ---- -------
---- ------------
------ -----------------------------
-------
-------------------------------------------
----------------
-----------
--
-------
--------------------------------------------
-----------------
-----------
--
--------
------最后，使用 Plyr 实例播放你的媒体:
player.play(); // 播放媒体
示例代码
下面是一个完整的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- ---- -------------
----- ---------------- ----------------------------------------- --
-------
------
---- ------------
------ -----------------------------
-------
-------------------------------------------
----------------
-----------
--
-------
--------------------------------------------
-----------------
-----------
--
--------
------
------- ------------------------------------------------------------
------- --------------
------ ---- ---- -----------------------------------------------
------ ------------------------
----- ------ - --- --------------- -
----------------- -----
------------ -
---- -
-------- -
--------------------- -----------------------------------
-------------------------- ------------------------------------
--
--
--
---
--------------
---------
-------
-------总结
@baladshow/plyr-shaka 使得使用 Plyr 创建媒体播放器变得更加容易和标准化，同时也包含了 Shaka Player 常用的功能。本文向你展示了如何使用它来创建一个 Plyr 播放器，从而支持更多的媒体格式和 DRM。希望这篇文章能够帮助你快速上手并使用 @baladshow/plyr-shaka。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672673660cf7123b365b9