当前位置：首页 > jquery

jquery视频播放

2026-02-03 13:05:56jquery

jQuery 视频播放实现方法

使用 jQuery 实现视频播放功能可以通过操作 HTML5 的 <video> 元素或集成第三方插件来完成。以下是几种常见的实现方式：

HTML5 视频元素控制

通过 jQuery 控制 HTML5 的 <video> 元素，实现播放、暂停等功能：

<video id="myVideo" width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
</video>

<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>

$(document).ready(function() {
  $('#playBtn').click(function() {
    $('#myVideo').trigger('play');
  });

  $('#pauseBtn').click(function() {
    $('#myVideo').trigger('pause');
  });
});

使用第三方视频播放插件

集成如 Video.js、jQuery Media 等插件，提供更丰富的功能和跨浏览器支持：

<link href="https://vjs.zencdn.net/7.15.4/video-js.css" rel="stylesheet">
<video id="myVideo" class="video-js" controls preload="auto" width="640" height="264">
  <source src="movie.mp4" type="video/mp4">
</video>

$(document).ready(function() {
  videojs('myVideo').ready(function() {
    var player = this;
    $('#playBtn').click(function() {
      player.play();
    });
  });
});

自定义视频播放器 UI

通过 jQuery 完全自定义视频播放器的界面和控制逻辑：

<div class="custom-player">
  <video id="customVideo" src="movie.mp4"></video>
  <div class="controls">
    <button class="play">播放</button>
    <div class="progress-bar">
      <div class="progress"></div>
    </div>
  </div>
</div>

$(document).ready(function() {
  var video = $('#customVideo')[0];
  var progress = $('.progress');

  $('.play').click(function() {
    if(video.paused) {
      video.play();
      $(this).text('暂停');
    } else {
      video.pause();
      $(this).text('播放');
    }
  });

  video.addEventListener('timeupdate', function() {
    var percent = (video.currentTime / video.duration) * 100;
    progress.css('width', percent + '%');
  });
});

响应式视频播放器实现

确保视频播放器在不同设备上都能正常显示：

.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 比例 */
  height: 0;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div class="video-container">
  <video id="responsiveVideo" controls>
    <source src="movie.mp4" type="video/mp4">
  </video>
</div>

视频事件处理

使用 jQuery 处理视频的各种事件：

jquery视频播放

$('#myVideo').on({
  'play': function() {
    console.log('视频开始播放');
  },
  'pause': function() {
    console.log('视频已暂停');
  },
  'ended': function() {
    console.log('视频播放结束');
  }
});

这些方法提供了从基础到高级的视频播放实现方案，可以根据项目需求选择合适的实现方式。