Блог

Я использую VideoJS в своем проекте с плагином «videojs-hls-селектор качества» для изменения качества видео. Проблема в том, что мне нужно немного настроить его — удалить прокрутку из меню выбора качества. Это игрок:

 import React, { useCallback, useEffect, useState } from 'react';
import { makeStyles } from '@material-ui/core';
import Skeleton from '@material-ui/core/Skeleton';
import videojs, { VideoJsPlayer, VideoJsPlayerOptions } from 'video.js';
import 'videojs-landscape-fullscreen';

require('videojs-contrib-quality-levels');
require('videojs-hls-quality-selector');

const useStyles = makeStyles(() => ({
  videoPlaceholder: {
    width: '100%',
    minHeight: 'calc((100%-64px)/2)'
  },
  skeleton: { height: '100%', width: '100%' },
}));

interface VideoJsPlayerOptionsProps extends VideoJsPlayerOptions {
  style?: { height: string };
  loading?: boolean;
  setOpen?: (val: boolean) => void;
}
type VideoJsPlayerHLS = {
  hlsQualitySelector?: any;
  landscapeFullscreen?: any;
};
type VideoJsPlayerExtended = VideoJsPlayer amp; VideoJsPlayerHLS;

const MediaPlayer = React.memo((props: VideoJsPlayerOptionsProps) => {
  const classes = useStyles();

  const [videoEl, setVideoEl] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => setLoading(false), [loading]);

  const onVideo = useCallback((el) => {
    setVideoEl(el);
  }, []);

  useEffect(() => {
    if (videoEl == null) return;
    const player: VideoJsPlayerExtended = videojs(videoEl, props);
    player.on('error', () => {
      props.setOpen(true);
    });

    if (window.screen) {
      player.landscapeFullscreen({
        fullscreen: {
          enterOnRotate: true,
          alwaysInLandscapeMode: true,
          iOS: false
        }
      });
    }
    player.hlsQualitySelector({
      displayCurrentQuality: true
    });
    return () => {
      return player.dispose();
    };
  }, [props, videoEl]);

  if (props.loading) return null;
  return (
    <>
      {loading ? (
        <Skeleton variant="rectangular" className={`${classes.skeleton} video-js `} />
      ) : (
        /* wrap the player in a div with a `data-vjs-player` attribute
      so videojs won't create additional wrapper in the DOM */
        <div data-vjs-player style={{ height: '100%' }}>
          <video
            ref={onVideo}
            className={`video-js ${classes.videoPlaceholder} vjs-big-play-centered `}
            playsInline
          >
            <track default kind="captions" srcLang="en" />
          </video>
        </div>
      )}
    </>
  );
});

export default MediaPlayer;
 

Я попытался изменить его с помощью:

 'amp;.video-js.vjs-control-bar.vjs-layout-small.vjs-menu-button-popup.vjs-menu.vjs-menu-content': {
    maxHeight: 'auto'
  }
 

но это не работает.

Вот элемент, который необходимо изменить: