音频标签的Html5懒惰'onplay'事件处理程序?

Lev*_*kon 5 html javascript jquery html5

使用新的Html5音频标签,onplay事件似乎只在第一次播放音频时触发.在此示例中,单击"播放"时,音频将以"正在播放"的警告弹出窗口开始播放.当音频完成并再次点击"播放"时,音频再次开始,但没有发出警报.我在这里错过了什么吗?我是否必须以某种方式重置音频?

<a href="#" onclick="$('#audio')[0].play();">Play</a>

<audio preload="none" id="audio" onplay="alert('playing');"><source type="audio/wav" src="..."></source></audio>
Run Code Online (Sandbox Code Playgroud)

我也尝试使用jQuery绑定到play事件,但我得到了相同的结果.

<a href="#" onclick="$('#audio')[0].play(); return false;">Play</a>

<audio preload="none" id="audio"><source type="audio/wav" src="..."></source></audio>

<script type="text/javascript">

    $(document).ready(function () {

        $('#audio')[0].bind('play', function () {

            alert("Playing");

        });

    });    

</script>
Run Code Online (Sandbox Code Playgroud)

Man*_*uro 7

媒体准备好开始运行时运行onplay,

该元素不再暂停.在play()方法返回后,或者当autoplay属性导致播放开始时触发.

取自规范

你可以试试

<input type="button" value="Play" id="play_pause" onclick="audio.play()">
Run Code Online (Sandbox Code Playgroud)

然后

var play_pause = document.getElementById('play_pause');
video.onpause = function(e) {
  play_pause.value = 'Play';
  play_pause.onclick = function(e) { video.play(); }
}
video.onplay = function(e) {
  play_pause.value = 'Pause';
  play_pause.onclick = function(e) { video.pause(); }
}
Run Code Online (Sandbox Code Playgroud)

资源