在 iOS5 中自动播放 HTML5 音频/视频答案

【问题标题】：Autoplay HTML5 audio/video in iOS5在 iOS5 中自动播放 HTML5 音频/视频
【发布时间】：2011-12-24 01:44:48
【问题描述】：

我有一个带有音效的 HTML5 网络应用。我正在尝试让这些效果在 iOS5 中工作，但我这辈子都做不到。

想知道是否有人有任何变通方法来让 JS 控制 iOS5 中的 HTML5 音频/视频控件。

甚至是一种一键控制多个音频文件的方法。就目前而言，如果我有 10 种音效，我需要 10 次用户点击才能控制所有这些，这是荒谬！

【问题讨论】：

据我所知，Apple 不允许在 iOS 上自动播放，它必须由用户点击启动，而且您一次只能播放一个文件的视频，音频可能相同
我可以很好地叠加音轨，我只需要每个人的权限...
正如@andrewh 提到的那样，它是用户激活的，那么为什么不在整个应用程序上覆盖一个透明的 div相互作用。这更像是一种黑客行为。或者通过您的应用中可能需要点击的任何其他按钮触发音频
不需要覆盖任何东西，我最多可以捕捉到document.body 的点击。部分问题在于我每次点击只能激活一个音频文件，所以如果我想控制超过 10 种音效，用户需要点击 10 次。

标签： javascript html html5-video html5-audio

【解决方案1】：

荒诞，但你必须从 iPhone 或任何手机的角度来看待它。它是一种通过蜂窝网络进行带宽限制的手机，许多人从最近的 Sprint 广告中知道这一点。他们不希望用户超出他们的带宽限制，因为某些网站在他们自己没有采取行动的情况下向他们的手机发送大量数据。

以下内容摘自官方Safari Developer Library，有更多细节。

用户通过蜂窝网络控制下载

在 iOS 上的 Safari（适用于所有设备，包括 iPad）中，用户可以在蜂窝网络上并按数据单元收费，预加载和自动播放被禁用。在用户启动数据之前不会加载数据。这意味着 JavaScript play() 和 load() 方法也处于非活动状态直到用户开始播放，除非 play() 或 load() 方法由用户操作触发。换句话说，用户发起的 Play 按钮有效，但 onLoad="play()" 事件无效。

这会播放电影：<input type="button" value="Play" onClick="document.myMovie.play()">

这在 iOS 上没有任何作用：<body onLoad="document.myMovie.play()">

【讨论】：

有点晚了，但这意味着没有解决方案？

【解决方案2】：

由于 Apple，他们限制了自动播放功能，以防止手机数据收费。在 xcode4 中，我添加了一个解决方法。在您的“webViewDidFinishLoad”中发送一个 javascript 调用以自动播放视频并且它可以工作。我在 html 文件中使用常规 javascript 进行了尝试，但没有成功。不过，通过 webViewDidFinishLoad 做到这一点就可以了。在这个例子中，我想在我的 index.html 页面上自动播放视频。我在该页面上有一个名为 startVideo() 的 javascript 函数。

- (void)webViewDidFinishLoad:(UIWebView *)webView{
    NSURLRequest* request = [webView request];
    NSString *page = [request.URL lastPathComponent];
    if ([page isEqualToString:@"index.html"]){
        NSString *js = @"startVideo();";
        [myWebMain stringByEvaluatingJavaScriptFromString:js];
    }
}

这是我的 javascript 函数：

<script>
function startVideo(){
var pElement3 = document.getElementById('myVideo');
pElement3.play();
}
</script>

如果您是 html 视频新手，这里是 html

<video id="myVideo" poster="index_poster.png" width="1024" height="768" xcontrols     autoplay="autoplay">
<source src="flow.m4v" type="video/mp4"/>
browser not supports the video
</video>

【讨论】：

【解决方案3】：

你有没有尝试过这样的事情？

function clickedOnce(){
  $('audio').each(function(){
      this.play();
  });
}

【讨论】：

是的 :) 只有其中一个有效。其他人被忽略。我的代码现在类似于：var files = $('audio');...clickFn(){ files.pop().play(); } 来控制每个文件...
是的，我只能在 Ipad 上查看，它只能播放一个 :(
你能发布更多你的代码吗？我将来可能也需要这个。谢谢