连续几天一直在苦恼这个问题...
有没有什么办法或者“技巧”可以禁用苹果手机Safari浏览器中视频全屏播放。当然，我已经尝试了“webkit-playsinline”属性，但这只适用于自己的应用程序。
参考资料：
<video class="" poster="" webkit-playsinline>
<source src="" type="video/ogg" preload="auto">
<source src="" type="video/mp4" preload="auto">
</video>
我也尝试将视频放在画布上，但由于iOS目前不支持将视频作为canvas drawImage()方法的源，因此看起来无法实现。
是否有其他方法或替代技术可供使用？还是我确实浪费了过去几天的时间？
在iOS 10及以上版本中，苹果公司终于启用了playsinline属性，可在所有浏览器上无缝使用：
<video src="file.mp4" playsinline>
你可以通过模拟播放视频而不是实际地使用.play()来解决这个问题，从而规避这个问题。
简而言之，使用iphone-inline-video，它会处理播放和音频同步（如果有的话），并使<video>正常工作。
<video src="file.mp4" playsinline> 可以让视频内联，但仅使用 webkit-playsinline 属性无效。 - martpieplaysinline 而不是 playinline 或者 playinine，这正确吗？ - Raphaël BaletplaysInline而不是playsinline。对于新手来说这是个陷阱... - davewasthere <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 表示视频元素应该内联播放而不是全屏。
相关标签“video”可用性 在iOS 4.0及更高版本中可用。 （只在 allowsInlineMediaPlayback 属性设置为YES的 UIWebView 中启用。 源）
恐怕在Safari中使用视频播放器将不可能
他们有一个关于Canvas上的视频指南，但正如您可能知道的那样，在IOS中它还没有得到支持：Canvas上的视频
本文总结了IOS中移动媒体内容的当前限制：移动视频状态
只需添加 'playsinline'：
在 JavaScript 中：
yourclassName.setAttribute('playsinline', '');
<video class="Vidoo" src="https://.../video.mp4" playsinline></video>
不要像我一样做傻事，忘记了如果使用React，你必须使用playsInline而不是playsinline。这是一个年轻玩家的陷阱...
<video class="" poster="" playsInline webkit-playsInline>
<source src="" type="video/ogg" preload="auto">
<source src="" type="video/mp4" preload="auto">
</video>
在使用React Native开发移动应用时，我遇到了这个问题。我的解决方案很简单/费力。 如果您正在使用Webview，则这是我的解决方案。还有一件事要提醒的是，如果您在iOS设备上使用低功耗模式，则无法自动播放视频。有一种函数可以解决这个问题，但现在这个方法可行。
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>
`,
}}
/>
我通过使用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以及在“poster”参数上预加载gif。