前言
在前端项目中，音频和视频播放是很常见的需求。而其中使用媒体源一般需要通过 URL 获取，对于开发人员来说，需要考虑怎么将这些资源部署到 CDN 中，或存储在 CDN 中，然后通过 URL 访问获取。realworks-local-media 就是一个可以将媒体资源本地化的 npm 包，可以将本地的媒体资源作为参数上传到七牛云存储，并返回一个可以播放的 URL。
安装
安装该 npm 包，你可以使用以下方式：
npm install --save realworks-local-media
或者
yarn add realworks-local-media
如何使用
要使用该包，首先需要安装七牛存储账户，然后调用该包的方法将本地媒体文件上传到你的七牛存储中，生成一个可用的 URL 进行播放。
该包内有一个主要方法 uploadFileAndReturnUrl，通过调用该方法，你可以上传一个本地文件到七牛云存储上，并同时获取一个 CDN URL。
示例代码
-- -------------------- ---- -------
------ ---------- ---- ------------------------
----- ---------- - --- --------------------------------- ---------------------- -------------------
----- ---- - --- ------------------------- --------------- - ----- ----------- ---
----------
-----------------------------
--------- -- -
----------------- -- ---------------------------------------------------
--
------------ -- -
--------------------- -- ----- -------
---在上述代码中，YOUR_QINIU_ACCESS_KEY 和 YOUR_QINIU_SECRET_KEY 需要替换成你自己的七牛存储账户对应的 Access Key 和 Secret Key，YOUR_QINIU_BUCKET 需要替换成你存放媒体资源的存储空间名称。
另外需要注意的是，file 需要传入一个 BLOB 类型的文件对象。
总结
使用 realworks-local-media 包，你可以将本地媒体资源上传到七牛云存储，并且获取一个 CDN URL，方便你播放媒体资源。同时也可以在开发过程中减少对 CDN 资源的依赖。希望这篇文章对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aa881e8991b448d829f