Html html5 视频在 ipad 上不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10511006/
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
html5 video not working on ipad
提问by halubilo Saya
I have an html5 video that should work on ipad. Controls must be hide and on user tap on the ipad, the html5 video must play.
我有一个 html5 视频应该在 ipad 上工作。控件必须隐藏，并且在用户点击 ipad 时，必须播放 html5 视频。
I am using html5video.js What I can see on ipad is only the poster image and when I tap the ipad, nothing happens. below is my code
我正在使用 html5video.js 我在 ipad 上看到的只是海报图像，当我点击 ipad 时，什么也没有发生。下面是我的代码
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0" />
<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>
<script>
var video = document.getElementById('video');
video.addEventListener('touchstart',function(){
video.play();
},false);
</script>
</head>
<body>
<video id="video" class="video-js vjs-default-skin" preload="auto" width="620" height="860" poster="img/poster.png" data-setup="{}">
<source src="video/Motion.mp4" type='video/mp4'>
</video>
</body>
</html>
回答by Dave Anderson
Are you serving the video with the correct MIME type? The excellent Video On The Webarticle by Dive Into HTML 5 covers everything you need to know about serving Video. Way down the bottom of the article (past all the encoding help) covers issues with iPhones and iPadsas well as the need for the correct MIME type. It's well worth the full read.
您是否使用正确的 MIME 类型提供视频？Dive Into HTML 5出色的 Web 上的视频文章涵盖了有关提供视频服务所需的所有信息。文章底部（通过所有编码帮助）涵盖了 iPhone 和 iPad 的问题以及对正确 MIME 类型的需求。值得一读。
EDIT
编辑
To work with iOS the Accept-Ranges: bytesHTTP response header must be included, see: Safari Web Content Guide - Configuring Your Server
要使用 iOS，Accept-Ranges: bytes必须包含 HTTP 响应标头，请参阅：Safari Web 内容指南 - 配置您的服务器
回答by Nikola Lukic
Try this trick (void user to tap screen):
试试这个技巧（避免用户点击屏幕）：
document.addEventListener('touchstart', function(event) {
video.play();
// They use this first touch/click event for buffering others video.
// with this trick
video2.play();
video2.pause();
// After in your program you can call from 'code' play video.
// Sum of success buffering per one click is 3 ~ 6 ( android or ios ).
}, false);
For me works on android tablet samsung , iphone and ipad 2/3.
对我来说，适用于 android 平板电脑三星、iphone 和 ipad 2/3。
Updated :
更新 ：
With new version of browsers also autoplay is enabled by default, you need to put attribute mute for success.
新版本的浏览器也默认启用自动播放，您需要设置静音属性才能成功。
There is no final solution. For example firefox version 64 on mac don't support but same version on linux support autoplay. And so long...
没有最终的解决方案。例如 mac 上的 firefox 版本 64 不支持，但 linux 上的相同版本支持自动播放。还有这么久...
回答by FlorianB
In my case the MIME type was correct but my server was not allowing the client to request partial files with the Range HTTP header. So the server must send "Accept-Ranges: bytes" when you request that mp4 file, the iPad will refuse to download that file if it is forced to download it entirely.
在我的情况下，MIME 类型是正确的，但我的服务器不允许客户端请求带有 Range HTTP 标头的部分文件。因此，当您请求该 mp4 文件时，服务器必须发送“Accept-Ranges: bytes”，如果 iPad 被迫完全下载该文件，它将拒绝下载该文件。
回答by Strabek
I had the same problem. The video wasn't playing only on iPad and iPhone4. Nothing worked. Finally I discovered that my .mp4 file was in wrong format. I didn't create that file. After I converted it once again to mp4 format it worked.
我有同样的问题。该视频不仅仅在 iPad 和 iPhone4 上播放。没有任何效果。最后我发现我的 .mp4 文件格式错误。我没有创建那个文件。在我再次将其转换为 mp4 格式后，它起作用了。
