HTML5 音频播放器：暂停不起作用

Posted 2023-02-25

【中文标题】HTML5 音频播放器：暂停不起作用

【英文标题】：HTML5 Audio Player : Pause not working

【发布时间】：2013-09-12 09:46:45

【问题描述】：

你能帮我看看这段代码吗？我正在创建一个音频播放器，这是我的代码：

$(document).ready(function () 
  $("#play").bind("click", function () 
    $("#audio-player")[0].play();
    $(this).attr('id', 'pause-bt');
  )

  $("#pause-bt").live(
    click: function () 
        $("#audio-player")[0].pause();
        $(this).attr('id', 'play');
    
  )
)

我正在使用 jquery live 和 bind，但它们都不起作用。

请帮帮我。

谢谢

【问题讨论】：

你用的是什么版本？

嗨奥马尔，感谢您的回复。我想我已经在他们的网站上下载了最新版本的 jquery。任何这里都是我的：jquery-1.10.1.min.js。谢谢

然后试试这个$(document).ready(function () $("#play").on("click", function () $("#audio-player")[0].play(); $(this).attr('id', 'pause-bt'); ); $("#pause-bt").on('click', function () $("#audio-player")[0].pause(); $(this).attr('id', 'play'); ); );

感谢 Omar，它可以工作，但我只使用一个 ID，即默认属性值为“play”，当它单击时，它将默认 id 值更改为“pause-bt”。并且当pause-bt点击的时候，它也会把它的默认id值改为“play”。希望它有所帮助；）如果选择器是分开的，您的代码就可以工作。

好的，试试这个然后$(document).ready(function () $(document).on("click", '#play', function () $("#audio-player")[0].play(); $(this).attr('id', 'pause-bt'); ); $(document).on('click', '#pause-bt', function () $("#audio-player")[0].pause(); $(this).attr('id', 'play'); ); );

【参考方案1】：

感谢奥马尔：https://***.com/users/1771795/omar

奥马尔解决的代码

<script type="text/javascript">
    $(document).ready(function ()  
       $(document).on("click", '#play', function ()  $("#audio-player")[0].play(); $(this).attr('id', 'pause-bt'); ); 
       $(document).on('click', '#pause-bt', function ()  $("#audio-player")[0].pause(); $(this).attr('id', 'play'); ); 
    );
</script>

问题已解决...

【参考方案2】：

如果您想使用 html5，我建议使用 HTML5 音频标签。它会在您的浏览器中为您提供播放器。赫比，我正在附上这个。

HTML5 音频播放器 (jsfiddle.net/L5wRh/126/)

谢谢。

【参考方案3】：

这对我有用

$(document).ready(function()
  $('.stop').on('click', function()
    document.getElementById("videocontainer").pause();  
  );
);

 <video id="videocontainer"   controls>
  <source src="vid/Kuwait_City.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
</video> 

<a href="#" class="stop">stop</a>