jquery 视频
使用 jQuery 播放视频
jQuery 可以简化 HTML5 视频的控制。通过 video 元素的 DOM 操作，可以实现播放、暂停等功能。
// 播放视频
$("#myVideo").trigger("play");
// 暂停视频
$("#myVideo").trigger("pause");动态加载视频源
通过 jQuery 动态修改视频源，适用于多视频切换的场景。
$("#changeVideoBtn").click(function() {
$("#myVideo").attr("src", "new-video.mp4");
$("#myVideo").load(); // 重新加载视频
});视频事件监听
jQuery 可以方便地绑定视频事件，如播放结束、时间更新等。
$("#myVideo").on("ended", function() {
alert("视频播放结束");
});
$("#myVideo").on("timeupdate", function() {
var currentTime = this.currentTime;
$("#timeDisplay").text(currentTime.toFixed(2));
});自定义视频控件
通过 jQuery 创建自定义视频控制界面，隐藏原生控件并实现自定义按钮。
<video id="myVideo" src="video.mp4" style="width:100%"></video>
<div class="custom-controls">
<button id="playBtn">播放</button>
<button id="pauseBtn">暂停</button>
</div>$("#playBtn").click(function() {
$("#myVideo").trigger("play");
});
$("#pauseBtn").click(function() {
$("#myVideo").trigger("pause");
});视频全屏控制
使用 jQuery 控制视频全屏显示，需结合原生 JavaScript 的全屏 API。
$("#fullscreenBtn").click(function() {
var video = $("#myVideo").get(0);
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
});视频音量控制
通过 jQuery 调整视频音量，范围通常为 0.0 到 1.0。
$("#volumeSlider").change(function() {
$("#myVideo").prop("volume", $(this).val());
});视频进度条控制
实现自定义进度条，允许用户跳转到指定时间点。
$("#progressBar").click(function(e) {
var percent = e.offsetX / $(this).width();
var video = $("#myVideo").get(0);
video.currentTime = percent * video.duration;
});响应式视频布局
使用 jQuery 确保视频在不同屏幕尺寸下保持正确比例。
$(window).resize(function() {
var aspectRatio = 16/9;
var newWidth = $("#videoContainer").width();
$("#myVideo").width(newWidth).height(newWidth / aspectRatio);
});视频预加载
通过 jQuery 实现视频预加载，提升用户体验。
$("#preloadBtn").click(function() {
$("#myVideo").attr("preload", "auto");
$("#myVideo").load();
});多视频同步控制
控制多个视频同步播放或暂停。
$("#syncPlay").click(function() {
$(".video-class").trigger("play");
});这些方法涵盖了 jQuery 操作视频的常见需求，从基本控制到高级功能均可实现。实际应用中可根据具体需求组合使用这些技术。
