学做网站培训课程介绍

当前位置:

JS监听和判断Video视频播放、暂停、结束、长度信息

在很多网站上都会有视频,在HTML5后,我们网站的视频会使用视频标签(video标签)进行播放。为了更好的控制视频的状态,我们可以使用JS来监听和判断Video视频播放、暂停、结束、长度等信息,下面总结一下JS监听VIDEO视频信息的代码。

(1)HTML页面视频标签大体如下


<video id="video" controls="controls">
<source type="video/mp4" src="mi.mp4">
</video>

(2)视频加载后获取视频的长度


<script>
var elevideo = document.getElementById("video");
elevideo.addEventListener('loadedmetadata', function () { //加载数据
//视频的总长度
console.log(elevideo.duration);
});
</script>

(3)视频开始播放


<script>
var elevideo = document.getElementById("video");
elevideo.addEventListener('play', function () { //播放开始执行的函数
console.log("开始播放");
});
</script>

(4) 视频正在播放中


<script>
var elevideo = document.getElementById("video");
elevideo.addEventListener('playing', function () { //播放中
console.log("播放中");
});
</script>

(5)视频加载中


<script>
var elevideo = document.getElementById("video");
elevideo.addEventListener('waiting', function () { //加载
console.log("加载中");
});
</script>

 

(6)视频暂停播放


<script>
var elevideo = document.getElementById("video");
elevideo.addEventListener('pause', function () { //暂停开始执行的函数
console.log("暂停播放");
});
</script>

 

(7)视频结束播放


<script>
var elevideo = document.getElementById("video");
elevideo.addEventListener('ended', function () { //结束
console.log("播放结束");
}, false);
</script>

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 当我们网站的某些图片加载失败后,如果不处理,就会影响用户体验。很好的办法就是通过jQuery自动替换网站图片加载失败的图片,把它替换成一张默认的图
  • 以下代码为JQUERY通过FOR循环追加元素到OBJ对象的方法,如果你想通过循环的方式来追加元素到对象,可以使用以下的代码来实现。var ajax_gwc =
  • jQuery使用.on('click')点击事件,在我们做网站时经常用到。但有时我们会发现jQuery使用.on('click')事件在执行过程中会自动执行二次,这应该怎么解决
  • 现在很多网站都有这样的功能,就是数字从零一直渐增最后达到指定的数字。这个功能的实现在学做网站论坛前面的建站教程中也讲到了怎么制作。通常情况
  • 现在很多的网站上会有数字展示,为了让效果看起来更加高大上,会让这些数字变化展示,数字翻滚计数到指定数字。效果如下图:下面介绍一下这种动态数
  • 有些网站的导航菜单的高度随着网页下拉变化,并且将网页恢复到顶部时,高度又恢复。效果如下图:怎么实现这样的导航栏高度随着网页拖动变化呢?这就
  • 对于一些数据,我们经常使用TABLE表格来汇总,这样可以看起来更清楚。通常我们可以在表格的最底部显示一下整个表格的值总和。如下图:对于这样的有
  • 网站提交数据常用的方法是使用FORM表单,使用FORM表单提交比较固化,在有些情况下使用比较麻烦。取而代之的是使用JQuery的$.post()函数进行无刷新提交
  • 在制作网站表单时,有时需要让用户填写日期和时间,为了方便用户填写,我们会在INPUT填写框下面提供下拉选择日期时间的选择器,这样用户不用手动填写
  • 我们常用click()来绑定点击事件,但当我们要执行的元素是通过JQUERY生成的时候,就会出现点击无效的情况。下面介绍一下解决JQUERY点击事件无效的方法