HTML5 视频无法在 iphone 上使用 React jsx

Question

我有一个 React 应用程序，我在其中使用 html5 视频标签来显示封面视频。它适用于 ipad、android 和所有主要浏览器，但在 iphone 上它只显示播放按钮的一瞥，如果单击该按钮将显示整页视频。

class FrontPage extends React.Component{
  constructor(props) {
    super(props);
    this.authorize = [''];
  }
  render() {
    return (
      <div>
        <video controls="true" style={BGstyle} preload="yes" autoPlay muted loop width="100%" height="auto">
          <source src="/images/film.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
        <Ladder/>
        <SignUp/>
      </div>
    );
  }
}
var BGstyle = {
  position: "absolute",
  zIndex:999,
  right:0,
  bottom:0,
  minWidth:'100%',
  width: 'auto',
  backgroundSize:"cover"
}

export default FrontPage;

你可以在www.viogto.dk

上看到

Answer 1

为iOS10+

试试 playsinline 属性。但在骆驼案例中做出反应：

<video playsInline>

来源 - New video Policies for iOS

在iOS8和iOS9

Short answer: use iphone-inline-video, it enables inline playback and syncs the audio.

Source -

HTML5 视频无法在 iphone 上使用 React jsx

HTML5 video not working on iphone with react jsx

html

video

jsx

reactjs