PlayerJS 质量选择器样式

问题描述

我在我的项目中使用 VideoJS 和插件“videojs-hls-quality-selector”来改变视频的质量。问题是我需要稍微自定义一下 - 从质量选择器菜单中删除滚动。 这是一个玩家：

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 & 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;

我尝试更改它：

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

但这不起作用。

这里是需要更改的元素：

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）