HTML5 视频无法在 iPhone 上使用 react jsx

Question

我有一个反应应用程序，我在其中使用 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

对于 iOS 10+

试试playsinline属性。但在骆驼情况下反应：

<video playsInline>

来源 -适用于 iOS 的新video政策

在 iOS 8 和 iOS 9 中

简短回答：使用iphone-inline-video，它启用内联播放并同步音频。

来源 - /sf/answers/2544423661/