触发HTML5音频轨道，以便在加载时播放

Question

我正在尝试使用.play（）JavaScript函数加载页面几秒后播放HTML5音轨。

有时，当音频加载缓慢时，当播放器看起来像这样时会触发.play（）：

缓冲时音频不播放。

有时候，当音频快速加载并且播放器看起来像这样时，.play（）工作正常。

解决这个问题的最快方法是什么？ （使用听众？我坚持'加载时播放'功能）。

Answer 1

这应该有效：

<script language="JavaScript" type="text/javascript">
    var myAudio = document.getElementById('audio1')
    myAudio.oncanplaythrough = function () {this.play();}
</script>

<audio id="audio1" controls preload="auto" />
<audio id="audio2" controls preload="auto" oncanplaythrough="this.play();" />

Answer 2

如果加载成功，无论是使用src属性还是使用源元素，那么在下载数据时，会触发进度事件。加载足够的数据以确定视频的维度和持续时间后，将触发loadedmetadata事件。如果加载了足够的数据来渲染帧，则会触发loadeddata事件。当加载了enugh数据以便能够播放一些视频时，会触发canplay事件。当浏览器确定它可以播放整个视频而不停止下载更多数据时，会触发canplaythrough事件;如果视频具有自动播放属性，也会在视频开始播放时播放。

注意：Opera 10.50不会尝试确定何时有足够的数据可以播放，而是只是同时触发canplay和canplaythrough。这可能会在将来的版本中修复。

如果浏览器决定停止下载数据以节省带宽，那么它将触发暂停事件。如果服务器由于某种原因停止提供数据（不关闭连接），则在三秒钟后浏览器将触发一个停顿的事件。如果浏览器的播放速度快于服务器提供的数据，或者搜索时导致浏览器等待下载数据，则会触发等待事件。

注意：Opera 10.50尚未暂停下载，也不会触发停顿的事件。

如果您希望在视频播放前禁用播放按钮，则可以在canplay事件中启用它：

<input type="button" value="Play" id="playpause" onclick="playOrPause()" disabled>
video.oncanplay = function(e) {
  playpause.disabled = false;
}

Source

Answer 3

您可以设置：

<script>
var myAudio = document.getElementById('audio1');
myAudio.setAttribute('autoplay', 'autoplay');</script>