当前位置:首页 > jquery

jquery视频播放

2026-03-16 09:09:45jquery

以下是关于使用jQuery实现视频播放的相关方法和资源整合:

基础实现方法

使用HTML5的<video>标签结合jQuery控制播放
HTML结构示例:

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

jQuery控制代码:

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

常用控制功能

暂停视频:

$("#myVideo").trigger("pause");

跳转到特定时间点:

$("#myVideo").prop("currentTime", 60); // 跳转到60秒

检测视频结束事件:

$("#myVideo").on("ended", function(){
  alert("视频播放结束");
});

插件推荐

  1. Video.js
    支持自定义皮肤和跨浏览器兼容:

    videojs("myVideo", {
      controls: true,
      autoplay: false
    });
  2. jQuery Media Plugin
    老牌插件支持多种媒体格式:

    $('a.media').media({width: 800});

移动端适配

添加playsinline属性防止iOS全屏播放:

<video playsinline webkit-playsinline>

注意事项

  • 跨浏览器需提供多种视频格式(如MP4/WebM)
  • 移动端部分浏览器会阻止自动播放
  • 考虑添加降级方案提示用户升级浏览器

相关文档参考:

jquery视频播放

分享给朋友:

相关文章

jquery官网

jquery官网

jQuery 官网信息 jQuery 的官方网站是 jQuery.com,提供最新的 jQuery 版本下载、文档、教程和插件资源。 官网主要功能 下载 jQuery:提供压缩版(min…

jquery下载

jquery下载

jQuery下载方法 官方渠道下载 访问jQuery官网(https://jquery.com/),点击首页的“Download”按钮。页面提供两个版本: Production:压缩版(mini…

jquery 库

jquery 库

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,适合快速开发前端…

jquery滚动条

jquery滚动条

jQuery 滚动条操作 获取滚动条位置 使用scrollTop()方法获取垂直滚动条的位置,scrollLeft()获取水平滚动条位置: $(window).scrollTop(); // 垂直…

jquery子元素

jquery子元素

jQuery 子元素选择方法 在jQuery中,选择子元素可以通过多种方式实现,以下是常用的几种方法: 使用 children() 方法 children() 方法用于获取匹配元素的所有直接子元素(…

jquery视频

jquery视频

以下是关于 jQuery 视频学习资源的整理,涵盖免费教程、实战项目和进阶内容: 免费在线教程 W3School jQuery 教程 提供基础语法、选择器、事件处理等内容的交互式练习,适合快速入门。…