音频标签的 Html5 延迟“onplay”事件处理程序？

Posted 2023-02-25

【中文标题】音频标签的 Html5 延迟“onplay”事件处理程序？

【英文标题】：Html5 lazy 'onplay' event handler for Audio tag?

【发布时间】：2011-10-05 16:14:36

【问题描述】：

使用新的 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>

我也尝试过使用 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>

【参考方案1】：

onplay 在媒体准备好开始运行时运行，

元素不再暂停。在 play() 方法完成后触发 返回，或者当自动播放属性导致播放开始时。

取自spec

你可以试试

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

然后

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

source

【讨论】：

好吧，我会的。是的，我正在寻找onplaying 事件或绑定到jQuery 中的'playing' 事件。谢谢曼苏罗！