前言
随着 Web 技术的发展，移动端和 PC 端的视频播放需求也越来越多。我们通常用 iView 和 Element 等 UI 框架的 video 组件或使用 HTML5 video 标签来实现页面中视频的播放。但是，HTML5 video 标签的功能比较有限，只能简单地进行暂停、播放、音量控制和时间跳转等操作。而我们需要的往往要更多一些，例如全屏播放、倍速播放、视频播放截图等，这时候就需要用到一些第三方插件来帮助我们完成。
其中，ireact-player 是一款封装了 React 的播放器组件，功能比较全面，支持自定义UI，官方提供了多语言支持，并且使用起来也比较方便。它的下载安装也非常简单，我们只需要通过 npm 安装即可快速在我们的项目中使用。
本文主要想要介绍 ireact-player 包的下载安装、使用方法、案例分享等相关内容，以及如何在实践中充分发挥这个 npm 包的威力。
ireact-player 下载安装
- 第一步：通过 npm 安装
npm install ireact-player --save
- 第二步：在组件中引入
import React from 'react'; import ReactDOM from 'react-dom'; import IReactPlayer from 'ireact-player';
ireact-player 使用方法
基本使用
初次使用 ireact-player，我们可以实现最基本的功能：播放视频、暂停视频、调整音量大小。
<IReactPlayer
url='https://www.youtube.com/watch?v=kJQP7kiw5Fk'
playing={true}
controls={true}
volume={0.5}
/>上面的例子展示了 ireact-player 的最基本的使用方法。其中，url 表示视频的地址，playing 表示视频播放状态。controls 属性表示播放器是否需要显示控制面板，volume 表示视频播放的音量，默认为 0.8。
进阶使用
ireact-player 支持以下高级功能：
- 支持 HTTPS/HTTP 请求。
- 支持文件列表播放。
- 支持自定义展示 UI。
- 支持自定义控制面板。
- 支持关闭控制面板。
- 支持多语言和字幕。
- 支持视频播放截图功能。
- 支持视频播放列表功能。
自定义展示 UI
ireact-player 支持自定义展示 UI。我们可以通过为其传递自定义 UI 组件来替换默认的 UI 接口。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
-------- -
------ -
-------- -- --------
--
-
-
-------------
-------------------------------------------------
---------------
------------
----------------------
----------------------
--我们需要设置 displayCustomUI 为 true，同时传递 CustomUI 属性即可。
自定义控制面板
ireact-player 支持自定义控制面板。我们可以通过为其传递自定义控制面板组件来替换默认的控制面板接口。
-- -------------------- ---- -------
----- ---------- ------- --------------- -
-------- -
------ -
--------------------
--
-
-
-------------
-------------------------------------------------
---------------
------------
---------------------------
--我们需要传递 CustomControls 属性来实现自定义控制面板。
关闭控制面板
默认下，ireact-player 播放器在加载时会自动展示控制面板，但是我们可以通过有选择地配置将其默认设置为关闭。
<IReactPlayer
url='https://www.youtube.com/watch?v=kJQP7kiw5Fk'
controls={false}
volume={0.5}
onPause={() => console.log('paused')}
onEnded={() => console.log('ended')}
onStart={() => console.log('started')}
/>我们需要将控制面板的默认值设置为 false，同时传入 onPause/onEnded/onStart 属性，即可实现关闭控制面板。
多语言和字幕
ireact-player 支持视频多语言和字幕。我们只需要为其传递相应的属性即可。
-- -------------------- ---- -------
-------------
-------------------------------------------------
---------------
------------
----------- -- ---------------------
------------
-
------ ---------
---- -------------------------
----- ----
--
-
------ ----------
---- -------------------------
----- ----
-
--
----------------------------
--其中，subtitles 表示支持的多语言列表，vtt 表示字幕文件的地址。
视频播放截图功能
ireact-player 支持视频播放时截取照片功能。我们可以通过调用 getInternalPlayer() 方法获取播放器状态，然后调用截图方法来实现视频播放截图。
this.player.getInternalPlayer().pause(); this.player.getInternalPlayer().takeSnapshot();
视频播放列表功能
ireact-player 支持播放器列表功能。我们只需要为其传递一个列表，即可实现视频的列表播放。
-- -------------------- ---- -------
-------------
-------------------------------------------------
--------------
---------------
------------
-----------------
-----------
-
---- -------------------------
------ ------ ------
--
-
---- -------------------------
------ ----- -- -- -------
-
--
--自定义样式
ireact-player 同时支持自定义漂亮的样式，我们只需要自定义 CSS，即可实现不同风格的节目效果。
-- -------------------- ---- ------- -------------- - ------- -- --------------- ------- --------- --------- --------- ------- - -------------- ------- -------------- - --------- --------- ---- -- ----- -- ------ ---- ----------- ------- ---- ----------- -
其中，.ireact-player 是播放器主体，padding-bottom: 56.25% 表示 16:9 的宽高比。
总结
通过上面的介绍，我们可以发现 ireact-player 播放器包提供了非常完整的视频播放器默认、自定义功能接口，支持 HTTPS、多语言、视频播放列表、样式自定义等功能。在实际项目中，我们可以根据实际需求选取不同的功能进行开发。感兴趣的同学可以查看 ireact-player 的 API 文档，进一步了解其更多功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055f0d81e8991b448dca3d