HTML5 视频无法在 iphone 上使用 react jsx答案

【问题标题】：HTML5 video not working on iphone with react jsxHTML5 视频无法在 iphone 上使用 react jsx
【发布时间】：2017-02-12 14:42:47
【问题描述】：

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

【问题讨论】：

我发现这是一个 css 错误，如果我删除它在 iphone 上工作的所有 css。如何在 iPhone 上制作封面视频？

标签： html reactjs video jsx

【解决方案1】：

适用于 iOS 10+

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

<video playsInline>

来源 - New video Policies for iOS

在 iOS 8 和 iOS 9 中

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

来源 - https://stackoverflow.com/a/36348909/3337722

【讨论】：