当前位置：首页 > jquery

jquery 视频

2026-04-07 22:01:45jquery

jQuery 视频播放与控制

使用 jQuery 操作视频元素（如 <video>）可以实现播放、暂停、音量调整等功能。以下是常见操作的实现方法：

HTML 结构示例

<video id="myVideo" width="400" controls>
  <source src="video.mp4" type="video/mp4">
</video>
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>

基础控制方法

// 获取视频元素
const video = $('#myVideo')[0];

// 播放视频
$('#playBtn').click(function() {
  video.play();
});

// 暂停视频
$('#pauseBtn').click(function() {
  video.pause();
});

// 跳转到指定时间点（秒）
$('#seekBtn').click(function() {
  video.currentTime = 10;
});

// 调整音量（0-1）
$('#volumeSlider').change(function() {
  video.volume = $(this).val();
});

自定义视频控件

通过隐藏原生控件并自定义界面，可以实现更灵活的设计：

// 隐藏原生控件
$('#myVideo').removeAttr('controls');

// 自定义播放/暂停切换
$('#customPlayBtn').click(function() {
  if (video.paused) {
    video.play();
    $(this).text('暂停');
  } else {
    video.pause();
    $(this).text('播放');
  }
});

// 显示当前播放进度
video.addEventListener('timeupdate', function() {
  const percent = (video.currentTime / video.duration) * 100;
  $('#progressBar').css('width', percent + '%');
});

视频事件监听

jQuery 可以方便地绑定视频相关事件：

$('#myVideo').on({
  'ended': function() {
    alert('视频播放结束');
  },
  'error': function() {
    alert('加载视频时发生错误');
  },
  'waiting': function() {
    $('#loadingSpinner').show();
  },
  'playing': function() {
    $('#loadingSpinner').hide();
  }
});

全屏控制

实现跨浏览器的全屏功能：

jquery 视频

$('#fullscreenBtn').click(function() {
  const video = $('#myVideo')[0];

  if (video.requestFullscreen) {
    video.requestFullscreen();
  } else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen();
  } else if (video.msRequestFullscreen) {
    video.msRequestFullscreen();
  }
});