音频标签的Html5懒'事件'事件处理程序？ [英] Html5 lazy 'onplay' event handler for Audio tag?

问题描述

使用新的Html5音频标签，onplay事件似乎只在音频第一次播放时才会触发。在这个例子中，当点击播放时，音频开始显示正在播放。当音频结束并再次单击播放时，音频会再次启动，但不会触发警报。我在这里错过了什么吗？我不得不重置音频吗？

With the new Html5 audio tag, the onplay event only seems to fire the first time the audio is played. In this example, when clicking "Play", the audio kicks off with an alert popup showing "Playing." When the audio has finished and "Play" is clicked again, the audio kicks off again but no alert is fired. Am I missing something here? Do I have to reset the audio somehow?

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

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

我也尝试用jQuery绑定到play事件，但我得到了相同的结果。 p>

I have also tried binding to the play event with jQuery, but I get the same results.

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

推荐答案

当媒体准备开始运行时， ，

onplay is run when the media is ready to start running,

元素不再被暂停。 play（）方法返回
后，或自动播放属性导致播放开始时触发。

The element is no longer paused. Fired after the play() method has returned, or when the autoplay attribute has caused playback to begin.

取自规范

您可以尝试

You could try

<input type="button" value="Play" id="play_pause" onclick="audio.play()">

然后

and then

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

来源

这篇关于音频标签的Html5懒'事件'事件处理程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！