时间戳

首页 > 解决方案 > Cloudflare Stream Video 控件在 ios 上未正确显示

ios - Cloudflare Stream Video 控件在 ios 上未正确显示

问题描述

我正在使用 cloudflare 流反应。没有自定义控件或任何东西，但我正在使用样式组件进行样式设置。播放按钮未正确显示。仍然可以点击和播放视频，但按钮看起来很奇怪。视频播放器在桌面上看起来完全正常。

JSX：

<Grid container justify="center" style={{ marginTop: "80px" }}>
    <VideoWrap item>
      <HeaderVideo controls src={getStreamId(data.fields.streamUrl)} />
    </VideoWrap>
  </Grid>

样式化组件：

export const VideoWrap = styled(Grid)`
  top: 0;
  left: 0;
  width: 90vw;
  height: auto;
  overflow: hidden;

  @media (max-width: 960px) {
    width: 90%;
    height: auto;
  }
`;

export const HeaderVideo = styled(Stream)`
  width: 100%;
  height: 100%;
  z-index: 1;
  video::-webkit-media-controls-overlay-play-button {
    display: none;
  }

  & video,
  stream,
  iframe {
    object-fit: fill;
  }
`;

输出：

输出：

期望的结果：

期望的结果

标签： iosreactjssafaristreamcloudflare

解决方案

推荐阅读