Html 禁用全屏iphone视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19521667/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable fullscreen iphone video
提问by Sebass van Boxel
Struggling with this problem for a few days in a row now...
现在连续几天都在为这个问题苦苦挣扎......
Is there any way or 'hack' to disable playing video fullscreen on Safari on a iPhone. Of course I already tried the 'webkit-playsinline' attribute, but this will only work in your own app.
有什么方法或“黑客”可以禁用在 iPhone 上的 Safari 上全屏播放视频。当然，我已经尝试过 'webkit-playsinline' 属性，但这仅适用于您自己的应用程序。
See:
看：
<video class="" poster="" webkit-playsinline>
<source src="" type="video/ogg" preload="auto">
<source src="" type="video/mp4" preload="auto">
</video>
Also I've tried to put the video on canvas, but as it looks video as a source for the canvas drawImage() method is not currently supported on iOS.
此外，我尝试将视频放在画布上，但由于它看起来像视频作为画布 drawImage() 方法的来源，目前在 iOS 上不受支持。
Is there any other way or alternative technique I can use? Or did I really waste my time the last few days?
我可以使用任何其他方式或替代技术吗？还是我最近几天真的浪费了时间？
回答by fregante
In iOS 10+
在 iOS 10+
Apple finally enabled the attribute playsinlinein all browsers on iOS 10, so this will work seamlessly:
Apple 最终playsinline在 iOS 10 的所有浏览器中启用了该属性，因此这将无缝运行：
<video src="file.mp4" playsinline>
In iOS 8 and iOS 9
在 iOS 8 和 iOS 9 中
You can work around this issue by simulating the playback by skimmingthe video instead of actually .play()'ing it.
您可以通过浏览视频而不是实际播放来模拟播放来解决此问题.play()。
In short, use iphone-inline-video, it takes care of the playback and audio sync (if any), and it keeps the <video>working as it should.
简而言之，使用iphone-inline-video，它负责播放和音频同步（如果有），并保持<video>正常工作。
回答by web_bod
<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>
The idea is to:
这个想法是：
- Prevent the user getting to the context menu (to show the controls)
- Hide any player controls that might be visible
- 防止用户进入上下文菜单（以显示控件）
- 隐藏任何可能可见的播放器控件
The downside is that you have to implement your own player UI - but it's not too complicated
缺点是您必须实现自己的播放器 UI - 但它并不太复杂
*This code is only intended to show you how to solve the problem, not for use in a live application
*此代码仅用于向您展示如何解决问题，不适用于实时应用程序
A bit more research on the subject finds:
对该主题的更多研究发现：
webkit-playsinlineIndicates that a video element should play in-line instead of full-screen.
Related Tags “video” Availability Available in iOS 4.0 and later. (Enabled only in a UIWebViewwith the allowsInlineMediaPlayback property set to YES. source
webkit-playsinline指示视频元素应该在线播放而不是全屏播放。
相关标签 “视频” 可用性 在 iOS 4.0 及更高版本中可用。（仅在允许InlineMediaPlayback 属性设置为YES的UIWebView 中启用。 源
I'm afraid it just not going to be possible using the video player in Safari
恐怕无法在 Safari 中使用视频播放器
They have a guide for Video on Canvas, but as you probably know it isn't supported in IOS yet: video on canvas
他们有一个关于画布上视频的指南，但您可能知道，IOS 尚不支持它：画布上的视频
This document summarises the current restrictions around mobile media content in IOS: mobile video status
本文档总结了当前 IOS 中围绕移动媒体内容的限制：移动视频状态
回答by Dithermaster
My understanding is that iOS always plays video full screen. On Apple's own website they used encoded image data and Javascript drawing to do video-like playback. Here is a breakdown of how they did it:
我的理解是 iOS 总是全屏播放视频。在 Apple 自己的网站上，他们使用编码的图像数据和 Javascript 绘图来进行类似视频的播放。以下是他们是如何做到的：
https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI
https://docs.google.com/document/pub?id=1GWTMLjqQsQS45FWwqNG9ztQTdGF48hQYpjQHR_d1WsI
