一、拖拽实现插件 react-beautiful-dnd
简介：基于react的组件库，主要包含了以下三个组件
1、DragDropContext : 用于包装拖拽根组件，Draggable和Droppable都需要包裹在DragDropContext内。
2、Droppable 用于包装你需要拖动的组件，使组件能够被拖拽（make it draggable）。
3、Draggable 用于包装接收拖拽元素的组件，使组件能够放置（dropped on it）。
具体使用步骤：
1、安装：npm install react-beautiful-dnd --save
2、实现代码参考以下网址：
https://www.jianshu.com/p/ba19292cdc7e
总结：
是总体的包装
用于包装拖拽根组件，Draggable和Droppable都需要包裹在DragDropContex内
不支持嵌套
必须设置的onDragEnd钩子函数(拖拽后的数组重新排序操作在这里进行)
参考博客地址：
https://blog.csdn.net/tianxintiandisheng/article/details/107109890
https://www.jianshu.com/p/ba19292cdc7e
二、视频处理插件 HLS.js
简介：hls.js是一个JavaScript库，可实现HTTP Live Streaming客户端。 它依靠HTML5视频和MediaSource扩展进行播放。
它通过将MPEG-2传输流和AAC / MP3流转换为ISO BMFF（MP4）片段来工作。 如果在浏览器中可用，可以使用Web Worker异步执行此转换。 WWDC2016期间宣布，hls.js还支持HLS + fmp4
hls.js不需要任何播放器，它可以直接在标准HTML 元素上运行。
具体实现代码如下：