Add video.js/demo

Author: Lemonreds

package.json

@@ -41,7 +41,9 @@
     "umi": "^3.2.5", 
     "pdfjs-dist": "1.6.210",
     "use-deep-compare-effect": "^1.6.1",
-    "yorkie": "^2.0.0"
+    "yorkie": "^2.0.0", 
+    "videojs": "^1.0.0",
+    "videojs-contrib-hls": "5.15.0"
   },
   "devDependencies": {
     "babel-eslint": "^10.0.1",

src/components/Vjs/VideoH5.jsx

@@ -0,0 +1,111 @@
+import { useRef } from 'react';
+import Video from './Vjs';
+
+const VideoH5 = props => {
+  const { onReady, style } = props;
+
+  const playerRef = useRef(null);
+
+  /**
+   * 播放视频
+   */
+  const play = (source, opts) => {
+    const player = playerRef.current;
+    if (player) {
+      const d = source?.src;
+      if (d) {
+        if (opts?.currentTime) {
+          const handleLoaded = function() {
+            window.console.log('loadedmetadata');
+            player.currentTime(opts?.currentTime);
+          };
+          // watch once
+          player.one('loadedmetadata', handleLoaded);
+        }
+
+        player.src(source);
+        player.load(source);
+      }
+    }
+  };
+
+  /**
+   * 获取当前的播放位置
+   */
+  const getDuration = () => {
+    const player = playerRef.current;
+    if (player) {
+      return player.currentTime();
+    }
+    return 0;
+  };
+
+  /**
+   * 禁止拖动播放条
+   */
+  const disableProgress = disabled => {
+    const player = playerRef.current;
+    if (player) {
+      player.disableProgress({ autoDisable: disabled });
+    }
+  };
+
+  const handleOnTimeUpdate = function() {
+    const { onTimeUpdate } = props;
+    const duration = this.duration();
+    const currentTime = this.currentTime();
+
+    if (onTimeUpdate instanceof Function) {
+      onTimeUpdate?.({ duration, currentTime });
+    }
+  };
+
+  const onVjsLoaded = player => {
+    playerRef.current = player;
+
+    player.on('timeupdate', handleOnTimeUpdate);
+    
+
+    if (onReady instanceof Function) {
+      onReady({ play, getDuration, disableProgress });
+    }
+  };
+
+  return (
+    <Video
+      style={style}
+      options={{
+        autoplay: false,
+        controls: true,
+        muted: false,
+        fluid: true,
+        // poster: 'xxx', // 视频封面图地址
+        controlBar: {
+          children: [
+            { name: 'playToggle' }, // 播放按钮
+            { name: 'currentTimeDisplay' }, // 当前已播放时间
+            { name: 'PlayNext' }, //点击播放下一个按钮
+            { name: 'progressControl' }, // 播放进度条
+            { name: 'durationDisplay' }, // 总时间
+            { name: 'remainingTimeDisplay' }, // 剩下的时间
+            {
+              name: 'playbackRateMenuButton',
+              playbackRates: [0.5, 1, 1.5, 2]
+            }, // 倍数播放
+            {
+              name: 'volumePanel', // 音量控制
+              inline: false // 不使用水平方式
+            },
+            { name: 'FullscreenToggle' } // 全屏
+          ]
+        },
+        preload: true,
+        responsive: true,
+        sources: []
+      }}
+      onVjsLoaded={onVjsLoaded}
+    />
+  );
+};
+
+export default VideoH5;

src/components/Vjs/Vjs.jsx

@@ -0,0 +1,50 @@
+import { useRef, useEffect } from 'react';
+import videojs from 'video.js';
+
+window.videojs = videojs;
+
+require('video.js/dist/video-js.css');
+require('videojs-contrib-hls/dist/videojs-contrib-hls');
+require('./plugins/disableProgress');
+require('./Vjs.less');
+
+const Video = props => {
+  const videoRef = useRef(null);
+  const playerRef = useRef(null);
+  const { options, onVjsLoaded, style } = props;
+
+  useEffect(() => {
+    // make sure Video.js player is only initialized once
+    if (!playerRef.current) {
+      const videoElement = videoRef.current;
+      if (!videoElement) return;
+
+      playerRef.current = videojs(videoElement, options, () => {
+        onVjsLoaded?.(playerRef.current);
+      });
+    }
+    return () => {
+      const player = playerRef.current;
+      if (player) {
+        player.dispose();
+        playerRef.current = null;
+      }
+    };
+  }, [videoRef]);
+
+  return (
+    <div
+      style={{ width: style?.width ?? '100%', height: style?.height ?? 210 }}
+    >
+      <video
+        ref={videoRef}
+        className='video-js vjs-big-play-centered'
+        playsInline
+      >
+        <p className='vjs-no-js'>当前浏览器不支持 Video</p>
+      </video>
+    </div>
+  );
+};
+
+export default Video;

src/components/Vjs/Vjs.less

@@ -0,0 +1,45 @@
+.video-js button {
+  outline: none;
+}
+.video-js.vjs-fluid,
+.video-js.vjs-16-9,
+.video-js.vjs-4-3,
+.video-js.vjs-tech {
+  height: 100%;
+  background-color: #161616;
+}
+
+.video-js.vjs-fluid {
+  padding-top: 0;
+}
+
+.vjs-poster {
+  background-color: #161616;
+}
+.video-js.vjs-error .vjs-big-play-button {
+  display: none;
+}
+.vjs-paused .vjs-big-play-button {
+  display: block;
+}
+.video-js .vjs-big-play-button {
+  border: none;
+}
+
+// controls
+
+.vjs-remaining-time {
+  display: block !important;
+}
+
+.vjs-playback-rate {
+  display: flex !important;
+}
+
+.vjs-playback-rate-value {
+  font-size: 1.4em !important;
+}
+
+.vjs-menu-item-text {
+  font-size: 1.3em;
+}

src/components/Vjs/index.js

@@ -0,0 +1,3 @@
+import VideoH5 from './VideoH5';
+
+export default VideoH5;

src/components/Vjs/plugins/disableProgress.js

@@ -0,0 +1,53 @@
+/**
+ * videojs的插件
+ * 用于禁止拖拽进度条
+ */
+(function(vjs) {
+  var extend = function(obj /*, arg1, arg2, ... */) {
+      var arg, i, k;
+      for (i = 1; i < arguments.length; i++) {
+        arg = arguments[i];
+        for (k in arg) {
+          if (arg.hasOwnProperty(k)) {
+            obj[k] = arg[k];
+          }
+        }
+      }
+      return obj;
+    },
+    defaults = {
+      autoDisable: false
+    },
+    disableProgress = function(options) {
+      var player = this,
+        state = false,
+        settings = extend({}, defaults, options || {});
+
+      player.controlProgress = {
+        disable: function() {
+          state = true;
+
+          const controls = document.querySelector('.vjs-progress-control');
+          if (controls) {
+            controls.style.pointerEvents = 'none';
+          }
+        },
+        enable: function() {
+          state = false;
+          const controls = document.querySelector('.vjs-progress-control');
+          if (controls) {
+            controls.style.pointerEvents = 'auto';
+          }
+        },
+        getState: function() {
+          return state;
+        }
+      };
+
+      if (settings.autoDisable) {
+        player.controlProgress.disable();
+      }
+    };
+
+  vjs.plugin('disableProgress', disableProgress);
+})(window.videojs);

src/hooks/useDraggable.js

@@ -1,12 +1,8 @@
-import { useRef } from 'react';
+import { useRef, useEffect } from 'react';
 import { off, on } from 'utils/dom';
-import useMount from './useMount';
 
 /**
  * @hook useDraggable
- * @desc 使得DOM变得可拖拽
- * @at 2020/09/22
- * @by lmh
  * */
 
 // 拖拽的初始位置
@@ -25,7 +21,7 @@ const useDraggable = (
   const isDragging = useRef(null);
   const ref = useRef(null);
 
-  useMount(() => {
+  useEffect(() => {
     const mouseMove = e => {
       if (ref.current === currentTarget) {
         if (isDragging.current) {
@@ -36,7 +32,6 @@ const useDraggable = (
 
             let x = e.clientX - initPosition.x;
             let y = e.clientY - initPosition.y;
-
             // 是否允许 拖拽位置脱离边界
             if (!overbound) {
               if (x < 0) x = 0;

src/pages/hook/examples/useDraggable.js

@@ -3,7 +3,6 @@ import React, { useRef, useState } from 'react';
 import Wrapper from 'components/Wrapper';
 import Description from 'components/Description';
 import useDraggable from 'hooks/useDraggable';
-import Links from 'components/Links';
 import Part from 'components/Part';
 import DraggleLayout from 'components/DraggleLayout';