一、拖拽实现插件 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 元素上运行。
具体实现代码如下: