jquery视频播放
jQuery视频播放实现方法
在网页中通过jQuery实现视频播放功能，可以结合HTML5的<video>标签或第三方插件。以下是几种常见实现方式：
使用HTML5 video标签与jQuery控制
基础HTML结构：
<video id="myVideo" width="400" controls>
<source src="video.mp4" type="video/mp4">
</video>
<div class="controls">
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>
</div>jQuery控制代码：
$(document).ready(function(){
$('#playBtn').click(function(){
$('#myVideo').trigger('play');
});
$('#pauseBtn').click(function(){
$('#myVideo').trigger('pause');
});
});使用Video.js插件增强功能
Video.js是流行的HTML5视频播放器框架，支持jQuery集成：
-
引入资源文件：
<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet"> <script src="https://vjs.zencdn.net/7.10.2/video.js"></script> -
播放器初始化：
$(document).ready(function(){ var player = videojs('myVideo');
// 自定义控制 $('#customPlay').click(function(){ player.play(); }); });
#### 响应式视频播放器实现
通过jQuery动态调整视频尺寸：
```javascript
function resizeVideo(){
var containerWidth = $('.video-container').width();
$('#myVideo').width(containerWidth);
}
$(window).resize(function(){
resizeVideo();
});常见功能扩展
-
全屏控制：
$('#fullscreenBtn').click(function(){ if ($('#myVideo')[0].requestFullscreen) { $('#myVideo')[0].requestFullscreen(); } }); -
进度跳转：
$('#seekBtn').click(function(){ $('#myVideo')[0].currentTime = 60; // 跳转到60秒 });
移动端兼容处理
针对触摸事件添加控制：
$('#myVideo').on('touchstart', function(){
if(this.paused){
this.play();
} else {
this.pause();
}
});注意事项：
- 确保视频文件格式跨浏览器兼容（MP4/WebM）
- 移动端部分浏览器限制自动播放，需用户交互触发
- 考虑添加预加载属性
preload="auto"优化体验 - 对于旧版浏览器需添加Flash后备方案
以上方法可根据实际需求组合使用，实现更丰富的视频播放控制功能。
