react hook方式使用video.js

最新推荐文章于 2024-07-09 16:12:55 发布

julyi24

最新推荐文章于 2024-07-09 16:12:55 发布

阅读量1.4k

点赞数

文章标签： react

本文链接：https://blog.csdn.net/u012765966/article/details/115073080

版权

本文介绍了如何在React应用中利用Hooks来集成video.js，包括安装步骤和配置播放按钮的详细说明，特别是让播放按钮居中显示的方法。

摘要由CSDN通过智能技术生成

一、安装

npm i  video.js

二、添加配置

播放按钮局中显示：class增加“vjs-big-play-centered”

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: React.FC<VideoType> = props => {
  const videoRef = useRef<any>(null);
  useEffect(() => {
    const player = VideoJs(
      videoRef.current,
      {
        autoplay: false, // 自动播放
        muted: false, //静音
        preload: 'auto', // 预加载
        controls: true, // 是否显示控制条
        controlBar: {
          // 设置控制条组件
          // /* 设置控制条里面组件的相关属性及显示与否
          currentTimeDisplay: true,
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: tr