HTML5的音频和视频监听器的应用代码详解

百变鹏仔 2个月前 (10-18) #H5教程

文章标签监听器

一介绍

1、和元素有不少监听事件，因此可以绑定这些事件的监听器。

2、本应用实现的ontimeupdate事件的监听器。

3、通过ontimeupdate事件绑定监听器可以实时监控音频、视频的播放位置。

二代码

立即学习“前端免费学习笔记（深入）”；

<!DOCTYPE html><html><head><meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" /><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title> 视频播放 </title></head><body><h2> 视频播放 </h2><video id="mv" src="movie.webm" loop>您的浏览器不支持video元素</video><br/><input id="bn" type="button" value="播放"/><span id="detail"></span>秒<script type="text/javascript">var bn = document.getElementById("bn");var mv = document.getElementById("mv");var detail = document.getElementById("detail");// 为video元素的ontimeupdate事件绑定监听器mv.ontimeupdate = function(){	detail.innerHTML = mv.currentTime + "/" 		+ mv.duration;};bn.onclick = function(){	if(mv.paused)	{		mv.play();		bn.value = "暂停";	}	else	{		mv.pause();		bn.value = "播放";	}}</script></body></html>

三运行结果

文章推荐

HTML5的音频和视频监听器的应用代码详解

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集