11

我有一个可以在 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>
4

4 回答 4

19

您是否使用正确的 MIME 类型提供视频？Dive Into HTML 5 撰写的出色的Video On The Web文章涵盖了您需要了解的有关提供视频的所有信息。文章底部（过去所有编码帮助）涵盖了 iPhone 和 iPad 的问题以及对正确 MIME 类型的需求。非常值得一读。

编辑

要使用 iOS，Accept-Ranges: bytes必须包含 HTTP 响应标头，请参阅：Safari Web 内容指南 - 配置您的服务器

于 2012-05-09T07:06:40.053 回答
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 上的相同版本支持自动播放。而且这么久...

于 2013-01-29T12:24:04.013 回答
1

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

于 2015-12-30T19:32:33.197 回答
0

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

于 2015-07-06T16:29:54.323 回答