js获得当前视频播放的状态

这篇具有很好参考价值的文章主要介绍了js获得当前视频播放的状态。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

要获得视频播放的状态,可以使用HTML5的video对象,该对象包含了许多有用的属性和方法,可以方便地控制视频播放。

以下是一些常用的方法和属性:

  • paused:返回一个布尔值,表示视频是否处于暂停状态。
  • currentTime:返回当前视频播放的时间,以秒为单位。
  • duration:返回视频总长度,以秒为单位。
  • ended:返回一个布尔值,表示视频是否已经播放完毕。
  • play():播放视频。
  • pause():暂停视频。

示例1:判断视频是否处于暂停状态

var video = document.getElementById('myVideo');
if (video.paused) {
  console.log('视频处于暂停状态');
} else {
  console.log('视频正在播放');
}

示例2:判断视频是否已经播放完毕


var video = document.getElementById('myVideo');
if (video.ended) {
  console.log('视频已经播放完毕');
} else {
  console.log('视频还没有播放完毕');
}

示例3:获取当前视频播放的时间


var video = document.getElementById('myVideo');
var currentTime = video.currentTime;
console.log('当前视频播放的时间:', currentTime);

示例4:获取视频总长度


var video = document.getElementById('myVideo');
var duration = video.duration;
console.log('视频总长度:', duration);

示例5:播放和暂停视频


var video = document.getElementById('myVideo');
video.play(); // 播放视频
video.pause(); // 暂停视频

注意事项:文章来源地址https://www.toymoban.com/news/detail-590875.html

  • 在获取视频状态之前,确保视频已经加载完毕。
  • 在对视频进行操作时,确保浏览器已经支持HTML5的video标签,否则会出现兼容性问题。
  • 不同浏览器可能会有一些差异,需要注意测试和处理。

到了这里,关于js获得当前视频播放的状态的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • video.js 视频截图、录制、自定义全屏,hls、flv、mp4视频播放

    功能 video.js内嵌 截图、录制功能 (图片、视频会下载到本地) 自定义全屏 播放hls、flv、mp4 功能集合成Vue组件 参考 video.js components RecordRTC demo video 截图并下载 video.js添加自定义组件的方法 使用RecordRTC对video视频进行录制 播放hls、flv、mp4 安装 引入 html 引入组件(视频地址使

    2023年04月08日
    浏览(46)
  • 使用video.js完成hls/m3u8格式的视频播放

    近期项目中,需要播放视频,最开始给了个测试接口是hls格式的,查了一下,使用了video.js插件来进行播放。后期又改成了flv视频,这里简单记录一下。 1. 下载video.js插件,以及contrib-hls播放插件,页面引入,这两个插件,以及样式     这里好像涉及到版本问题,高版本的v

    2024年02月14日
    浏览(42)
  • 【记录处理Vue项目中Video.js播放不了MP4视频Bug】

    在Vue项目中使用Video.js播放MP4视频。 在项目中使用Video.js播放MP4视频。视频采集上来存在数据库,前端使用Video.js对视频进行播放。突然有一天,MP4视频播放不了,并且报错: VIDEOJS: ERROR: (CODE:4 MEDIA_ERR_SRC_NOT_SUPPORTED) No compatible source was found for this media. 并发现前一时间段采集到

    2024年04月14日
    浏览(50)
  • vue使用video.js实现播放m3u8格式的视频

    我使用的video.js版本如下: 在components下新建一个VideoPlayer文件夹 index如下:  直接把地址传给sourceUrl即可

    2024年02月12日
    浏览(46)
  • 使用vant+video.js实现轮播图图片和视频轮播播放

    先上效果图 1. 安装 2. 在需要用到的页面引入 3. 具体页面使用 假设传给子组件的数组结构 按照步骤来使用,其他地方视频播放情况都还好,至少安卓是好的,只是点击播放和暂停时候,ios需要点击多下才能触发点击事件; 然后以为是video.js插件可能没更新,ios版本迭代超过

    2023年04月08日
    浏览(47)
  • video.js 播放m3u8、flv、rtmp、RTS格式视频

     第一种方案(只适用m3u8格式): 属性 说明    options: {                     autoplay: true, // 设置自动播放                     muted: true, // 设置了它为true,才可实现自动播放,同时视频也被静音 (Chrome66及以上版本,禁止音视频的自动播放)                     prelo

    2024年02月12日
    浏览(66)
  • React学习笔记(番外一)——video.js视频播放组件的入门及排坑经历

    很久没有静下心写博客了。近段时间接到一个任务,前端页面要加上视频播放功能。实现加排坑前后花了三天时间(别问我问什么这么久😂),觉得还是有必要记录一下的。 这一部分有必要写在最前面,避免你看了一长串安装、引入、代码,然后发现自己想要播放的视频格

    2024年02月02日
    浏览(47)
  • js前端获取video视频名称+时长+缩略图+宽高

    js前端获取video视频名称+时长+缩略图+宽高,缩略图的核心是用canvas画出来的base64图片,调用函数需要传入二进制的视频文件,注意这是一个promise函数,需要用then来接收,代码如下

    2024年02月12日
    浏览(43)
  • videojs-flvjs:video.js + flv.js播放m3u8和flv视频

    videojs-flvjs是video.js的扩展,让video.js支持flv.js播放器,可以在video.js的techOrder里配置flvjs播放器。 下面做了一个切换m3u8和flv直播流的简易工具: https://mister-ben.github.io/videojs-flvjs/ https://blog.csdn.net/little__SuperMan/article/details/89203270/

    2023年04月16日
    浏览(48)
  • 【VideoJs】初识videojs && video.js 视频播放器的基本使用 && videojs基础用法 && videojs视频播放器 && vue3中使用videojs

    免费,开源 插件多 可自定义 【推】 虽然,但是Videojs算好了,但我觉得有点杂,特别是文档与插件,且自定义插件有点困难,也可能是我比较菜吧 相比之下,我还是强烈推荐 【Xgplayer ——点我进入】 备用地址 http://t.csdn.cn/H0cAV Xgplayer 优点 优雅、美观 文档清晰明了 大厂出

    2024年02月03日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包