介绍
react-sublime-video 是一款基于 React.js 的视频插件，它可以轻松地在网页上嵌入视频并进行控制。同时，它还具备处理自动播放、保持视频纵横比、响应式布局等特性，使得我们可以通过简单的使用，快速地搭建一个具备交互性的视频播放器。
安装
可通过 npm 进行安装。
npm install react-sublime-video
使用
最简易使用方式
在组件中使用 react-sublime-video 最简易的方式如下，只需指定视频链接即可：
-- -------------------- ---- -------
------ ----- ---- -------
------ ------------ ---- ---------------------
----- ------------ - -- -- -
------ -
-------------
------------------------------
--
-
-
------ ------- ------------控制播放与暂停
除了基本使用方式外，控制视频播放状态也是我们常常使用的功能。通过参考 react-sublime-video 的 API，我们可以通过以下代码来实现控制视频播放与暂停的功能。
-- -------------------- ---- -------
------ ------ - -------- - ---- -------
------ ------------ ---- ---------------------
----- ------------------- - -- -- -
----- --------- ----------- - ---------------
------ -
-----
------- ----------- -- ----------------------
-------- - ------- - -------
---------
-------------
------------------------------
-----------------
--
------
-
-
------ ------- -------------------通过上述代码，我们可以轻松实现一个具有播放与暂停功能的视频播放器。
自动播放
如何使得视频在网页加载时自动播放，是我们经常会遇到的问题。通过设置 autoPlay 属性，我们可以实现自动播放的功能。例如：
-- -------------------- ---- -------
------ ----- ---- -------
------ ------------ ---- ---------------------
----- --------------- - -- -- -
------ -
-------------
------------------------------
--------
--
-
-
------ ------- ---------------响应式布局
当我们在不同的设备、浏览器、分辨率下观看视频时，不同的场景下应该显示不同的宽高比，而不是按照设置的固定宽高比来显示。通过设置 fluid 属性，就可以使得视频呈现出响应式布局的效果，例如：
-- -------------------- ---- -------
------ ----- ---- -------
------ ------------ ---- ---------------------
----- ----------------------- - -- -- -
------ -
-------------
------------------------------
-----
--
-
-
------ ------- -----------------------监听事件
可能会出现一些需要监听视频事件的情况，例如在视频启动后，在视频结束后加入一些音乐来替换背景音乐。我们可以使用以下方式来解决这个问题：
-- -------------------- ---- -------
------ ----- ---- -------
------ ------------ ---- ---------------------
----- ------------ - -- -- -
----- ------------ - -- -- -
------------------ ----------
-
----- ------------- - -- -- -
------------------ --------
-
------ -
-------------
------------------------------
---------------------
-----------------------
--
-
-
------ ------- ------------更多参数
若要对视频进行更多的自定义设定，我们可以借助 react-sublime-video 的更多参数进行设置。例如：
-- -------------------- ---- -------
------ ----- ---- -------
------ ------------ ---- ---------------------
----- -------------------- - -- -- -
------ -
-------------
------------------------------
------------------ -- ------
------------ -- ----
---- -- ----
----- -- --
--
-
-
------ ------- --------------------结论
react-sublime-video 是一款易于使用的视频插件，可以轻松地在我们的网页中部署视频播放器。通过扩展其参数并参考 API，我们可以做出高度定制化的视频播放器，并能够实现播放、暂停、自动播放、响应式布局、监听事件等功能。在使用过程中，可根据需求进行调整，实现更加灵活多样的视频播放功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64181