现在连续几天都在与这个问题作斗争......
是否有任何方法或“破解”来禁止在 iPhone 上的 Safari 上全屏播放视频。当然，我已经尝试过“webkit-playsinline”属性，但这仅适用于您自己的应用程序。
参见：
<video class="" poster="" webkit-playsinline>
<source src="" type="video/ogg" preload="auto">
<source src="" type="video/mp4" preload="auto">
</video>
我也尝试将视频放在画布上，但由于看起来视频作为画布的drawImage()方法的来源，目前在iOS上不支持。
我可以使用任何其他方法或替代技术吗？还是我这几天真的浪费了时间？
您将需要 playsinline` 属性：
<video src="file.mp4" playsinline></video>
如果您在 React 组件中使用 JSX，则
Inline<video src="file.mp4" playsInline/>
此属性自 2016 年起可用。如果您从 2015 年开始阅读本文，则有 一个替代选项。
<div id="video-player">
<video src="http://movies.apple.com/media/us/html5/showcase/2011/demos/apple-html5-demo-tron-us_848x352.m4v"></video>
<p><a href="javascript:playPause();">Play/Pause</a></p>
</div>
<script type="text/javascript">
// intercept and cancel requests for the context menu
var myVideo = document.querySelector('video');
myVideo.addEventListener("contextmenu", function (e) { e.preventDefault(); e.stopPropagation(); }, false);
// hide the controls if they're visible
if (myVideo.hasAttribute("controls")) {
myVideo.removeAttribute("controls")
}
// play/pause functionality
function playPause() {
if (myVideo.paused)
myVideo.play();
else
myVideo.pause();
}
// essentially you'll have to build your own controls ui
// for position, audio, etc.
</script>
这个想法是：
缺点是你必须实现自己的播放器 UI - 但它并不太复杂
*此代码仅用于向您展示如何解决问题，不适用于实际应用程序
对该主题进行更多研究发现：
webkit-playsinline 指示视频元素应内联播放 而不是全屏。
相关标签“视频”可用性 适用于 iOS 4.0 及更高版本。 （仅在 UIWebView 中使用 allowedInlineMediaPlayback 启用 属性设置为 YES。 来源
恐怕无法使用 Safari 中的视频播放器
他们有关于 Canvas 上视频的指南，但您可能知道 IOS 尚不支持它：
canvas 上的视频移动视频状态在 JavaScript 中：
yourclassName.setAttribute('playsinline', '');
在 html 中：
<video class="Vidoo" src="https://.../video.mp4" playsinline></video>
<video class="" poster="" playsInline webkit-playsInline>
<source src="" type="video/ogg" preload="auto">
<source src="" type="video/mp4" preload="auto">
</video>
，则无法自动播放视频。有某种功能可以实现它，但现在，这可以工作。
import { WebView } from "react-native-webview";
<WebView
style={styles.container}
javaScriptEnabled={true}
domStorageEnabled={true}
allowsInlineMediaPlayback={true}
source={{
html: `
<video
id = "video"
style="width: 100%; height: 100%; object-fit: cover;"
poster="" width="50%" height="50%" muted=" loop="" playsinline
autoplay>
<source src="https://aparissi.com/wp-content/uploads/2021/10/SplashVideo-1.mp4">
<source>
</video>
`,
}}
/>
在React Native WebView中，有一个名为“allowsInLineMediaPlayback
”的属性。将其设置为 true！您还必须在视频标签内添加playsinline。另一件要提到的事情是，如果您也没有静音属性，则无法自动播放视频。 快乐编码！
我设法通过使用 mp4 视频作为预加载器“海报”来使其工作。
<video poster="/path/to/video.mp4" autoplay loop muted webkit-playsinline playsinline type="video/mp4">
Your browser does not support the video tag.
</video>
我只是想将 mp4 显示为 GIF...我意识到预加载器本身运行良好。 并且..为了防止其他浏览器将来可能出现故障，我只是添加了一个条件来检查当前浏览器是否是iOS浏览器，如果是，那么我使用这个无意义的解决方法，否则，我使用普通的视频标签SRC 和“海报”参数上的预加载 gif。