用js控制视频播放进度基本示例代码

更新时间：2025年04月03日 10:00:01 作者：qq_42214739

写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下

前言

在JavaScript中控制视频播放进度，你可以使用HTML5的标签，并通过操作其currentTime属性来实现。currentTime属性表示视频或音频的当前播放时间（以秒为单位）。你可以设置这个属性来跳转到视频的特定时间点，或者通过增加或减少其值来快进或快退视频。

下面是一个基本的例子，展示了如何使用JavaScript来控制视频播放的进度：

HTML部分:

<video id="myVideo" width="320" height="240" controls>  
  <source src="movie.mp4" type="video/mp4">  
  Your browser does not support the video tag.  
</video>  
<button onclick="jumpToFiveSeconds()">跳转到5秒</button>  
<button onclick="jumpToTenSeconds()">跳转到10秒</button>

JavaScript部分:

function jumpToFiveSeconds() {  
  var video = document.getElementById("myVideo");  
  if (video.readyState >= 2) { // 确保视频已经加载  
    video.currentTime = 5; // 跳转到5秒  
  }  
}  
  
function jumpToTenSeconds() {  
  var video = document.getElementById("myVideo");  
  if (video.readyState >= 2) { // 确保视频已经加载  
    video.currentTime = 10; // 跳转到10秒  
  }  
}

在这个例子中，我们有两个按钮，分别用于将视频播放进度跳转到5秒和10秒。通过document.getElementById获取元素，然后设置其currentTime属性为想要跳转的时间点（以秒为单位）。

注意：

在尝试设置currentTime之前，我们检查video.readyState以确保视频元数据已经加载（readyState >= 2）。这是为了确保视频可以被成功寻址到指定时间点。

readyState属性表示媒体元素的当前状态。readyState的值范围从0到4，其中2代表“元数据已加载”，即足够的数据来显示媒体时长等信息，但不一定足以开始播放。

controls属性在标签中是为了给用户一个默认的播放控件，包括播放/暂停按钮、音量控制等。这不是必须的，但在这个例子中，它有助于你直观地看到视频的状态变化。

此外，你还可以通过监听事件（如timeupdate）来动态跟踪视频的播放进度，或者使用play(), pause(), seeking, seeked等方法来控制视频的播放行为。

总结

到此这篇关于用js控制视频播放进度的文章就介绍到这了,更多相关js控制视频播放进度内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

React+Typescript实现倒计时Hook的方法
本文主要介绍了React+Typescript实现倒计时Hook的方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
原生javascript实现连连看游戏
这篇文章主要为大家详细介绍了原生javascript实现连连看游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-01-01
Javascript代码实现仿实例化类
这篇文章主要介绍了Javascript代码实现仿实例化类的相关资料并附上示例，非常不错的文章,需要的朋友可以参考下
2015-04-04
微信开发 JS-SDK 6.0.2 经常遇到问题总结
本篇文章主要介绍了"微信微信JS-SDK 6.0.2 遇到问题 "，主要涉及到微信微信JS-SDK 6.0.2 填坑笔记方面的内容，对于微信微信JS-SDK 6.0.2 填坑笔记感兴趣的同学可以参考一下。
2016-12-12
浏览器复制插件zeroclipboard使用指南
ZeroClipboard 是国外大神开发的一个用于剪贴板复制的 JS 插件，它是基于 Flash 来实现跨浏览器的复制功能的。当我们使用 ZeroClipboard 的时候，它会悄悄隐藏一个小小的 Flash 影片(swf)，不会对我们的用户界面造成影响。我们只需要借助它实现复制功能就行了。
2016-03-03
js数组的操作详解
用js有很久了，但都没有深究过js的数组形式。偶尔用用也就是简单的string.split(char)。对于字符的处理很多情况下需要用到数组
2013-03-03
JavaScript中变量提升 Hoisting
因为这个问题很是经典，而且容易出错，所以在介绍一次。哈哈。莫怪哦。
2012-07-07
基于JavaScript将表单序列化类型的数据转化成对象的处理（允许对象中包含对象）
这篇文章主要介绍了基于JavaScript将表单序列化类型的数据转化成对象的处理（允许对象中包含对象）的相关资料,需要的朋友可以参考下
2015-12-12
js学使用setTimeout实现轮循动画
这篇文章主要为大家详细介绍了js使用setTimeout实现轮循动画，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07
JS通过ajax动态读取xml文件内容的方法
这篇文章主要介绍了JS通过ajax动态读取xml文件内容的方法,实例分析了Ajax操作XML文件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-03-03

用js控制视频播放进度基本示例代码

目录

前言

HTML部分:

JavaScript部分:

注意：

总结

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具