视频播放-videojs

视频播放-video-js组件

安装

• yarn add video.js --save
• npm install video.js --save

代码

import React, { useEffect, useRef } from 'react';
import VideoJs from 'video.js';
// import videozhCN from 'video.js/dist/lang/zh-CN.json'
import 'video.js/dist/video-js.css';
import styles from './index.less';
type VideoType = {
  video: string;
  photo: string;
};
const CommonVideo = props => {
  const videoRef = useRef(null);
  useEffect(() => {
    const player = VideoJs(
      videoRef.current,
      {
        autoplay: false, // 自动播放
        muted: false, //静音
        preload: 'auto', // 预加载
        controls: true, // 是否显示控制条
        controlBar: {
          // 设置控制条组件
          // /* 设置控制条里面组件的相关属性及显示与否
          currentTimeDisplay: true,
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: true, // 显示倒计时时间
          fluid: true,
          language: 'zh-CN', // 设置语言
          volumePanel: {
            inline: false,
          },
          // */
          /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
          children: [
            { name: 'playToggle' }, // 播放按钮
            { name: 'currentTimeDisplay' }, // 当前已播放时间
            { name: 'progressControl' }, // 播放进度条
            { name: 'durationDisplay' }, // 总时间
            {
              // 倍数播放
              name: 'playbackRateMenuButton',
              playbackRates: [0.5, 1, 1.5, 2, 2.5],
            },
            {
              name: 'volumePanel', // 音量控制
              inline: false, // 不使用水平方式
            },
            { name: 'FullscreenToggle' }, // 全屏
          ],
        },
      },
      () => {
        player.src(props.video);
        player.poster(props.photo);
      },
    );
    return () => {
      // player.dispose();
    };
  }, [props]);
  return (
    <video
      ref={videoRef}
      preload="true"
      // className={styles.videoContent}
      className={['video-js', 'vjs-16-9', 'vjs-big-play-centered', styles.videoContent].join(' ')}
      playsInline
    ></video>
  );
};
export default CommonVideo;