Question

我有一个应该在ipad上运行的html5视频。控件必须隐藏，用户点击ipad，html5视频必须播放。

我正在使用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>

Answer 1

您是否使用正确的MIME类型提供视频？ Dive Into HTML 5中的优秀Video On The Web文章涵盖了有关提供视频所需了解的所有内容。文章底部（通过所有编码帮助）涵盖了issues with iPhones and iPads以及need for the correct MIME type。完全阅读是值得的。

修改

要使用iOS，必须包含Accept-Ranges: bytes HTTP响应标头，请参阅：Safari Web Content Guide - Configuring Your Server

Answer 2

尝试这个技巧（无效用户点击屏幕）：

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);

对我来说，在Android平板电脑三星，iphone和ipad 2/3上工作。

已更新：

对于新版本的浏览器，默认情况下也会启用自动播放，您需要将属性静音设置为成功。

没有最终解决方案。例如，mac上的firefox版本64不支持，但支持自动播放的linux版本相同。这么久......

Answer 3

在我的情况下，MIME类型是正确的但我的服务器不允许客户端使用Range HTTP标头请求部分文件。因此，当您请求mp4文件时，服务器必须发送“Accept-Ranges：bytes”，如果强制下载该文件，iPad将拒绝下载该文件。

Answer 4

我遇到了同样的问题。该视频不仅仅在iPad和iPhone4上播放。没有任何效果。最后我发现我的.mp4文件格式错误。我没有创建该文件。在我再次将其转换为mp4格式之后，它起作用了。

html5视频无法在ipad上运行

4 个答案: