jquery 播放暂停

原创

mob64ca12cfec58 2024-06-07 03:13:05 ©著作权

文章标签 ide jQuery sed 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12cfec58的原创作品，请联系作者获取转载授权，否则将追究法律责任

jQuery 播放暂停

在Web开发中，我们经常会遇到需要控制音频或视频播放暂停的需求。而使用jQuery来实现这一功能非常方便。本文将介绍如何使用jQuery来实现音频和视频的播放暂停控制，并提供相应的代码示例。

音频播放暂停

HTML

首先我们需要在HTML中添加一个音频元素，如下所示：

<audio id="myAudio" controls>
  <source src="audio.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

JavaScript

接下来，我们使用jQuery来实现音频的播放暂停功能。我们首先需要获取音频元素，然后通过jQuery来控制其播放暂停状态。

$(document).ready(function() {
  $('#playButton').click(function() {
    var audio = document.getElementById('myAudio');
    if (audio.paused) {
      audio.play();
      $('#playButton').text('Pause');
    } else {
      audio.pause();
      $('#playButton').text('Play');
    }
  });
});

演示

在页面中添加一个按钮来控制音频的播放暂停状态：

<button id="playButton">Play</button>

点击按钮即可实现音频的播放暂停功能。这里使用audio.paused属性来判断音频当前的播放状态，通过audio.play()和audio.pause()方法来实现播放和暂停。

视频播放暂停

HTML

类似地，我们需要在HTML中添加一个视频元素：

<video id="myVideo" controls>
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

JavaScript

对于视频的播放暂停控制，我们也可以使用类似的方法：

$(document).ready(function() {
  $('#playButton').click(function() {
    var video = document.getElementById('myVideo');
    if (video.paused) {
      video.play();
      $('#playButton').text('Pause');
    } else {
      video.pause();
      $('#playButton').text('Play');
    }
  });
});