HTML5的音频和视频监听器应用

小咪咪 2022-05-12 00:40 227阅读 0赞

**一 介绍**

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

2、本应用实现<video>的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>

**三 运行结果**

![169deea2-6131-366e-ab79-c5aa03680096.png][]

[169deea2-6131-366e-ab79-c5aa03680096.png]: /images/20220512/5b3cc1b21b1f4706be91203ad5aa7e7b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，227人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5页面嵌入视频播放,使用HTML5在网页中嵌入音频和视频播放的基本方法

HTML5 特性，包括原生音频和视频支持而无需 Flash。 HTML5 和标签让我们给站点添加媒体变得简单。我们只需要设置 src 属性来识别媒体资源，包含 contro

墨蓝/ 2022年10月06日 06:57/ 0 赞/ 273 阅读

相关 HTML5音频视频

1.video 视频元素属性名称说明 src 视频资源的URL width 视频宽度 height 视频高度 autoplay 设置后，表示立刻开始播放视

冷不防/ 2022年09月24日 13:15/ 0 赞/ 324 阅读

相关 HTML5+CSS3-动画、视频、音频、canvas

1、动画语法：第一步 @-webkit-keyframes 命名\{ From\{-------初始位置 \} To\{--------

妖狐艹你老母/ 2022年08月22日 15:13/ 0 赞/ 234 阅读

相关 HTML5 API 之video/audio 视频/音频

video的使用方法： <video autoplay="autoplay" controls="controls" width="800" muted="muted" lo

港控/mmm°/ 2022年06月01日 00:28/ 0 赞/ 335 阅读

相关 HTML5的音频和视频监听器应用

一介绍 1、<audio>和<video>元素有不少监听事件，因此可以绑定这些事件的监听器。 2、本应用实现<video>的ontimeupdate事件的监听器。 3、

小咪咪/ 2022年05月12日 00:40/ 0 赞/ 228 阅读

相关 HTML5——多媒体：audio音频、video视频

1. audio音频标签、video视频标签 ![70][] 2. 特性：（1）autoplay：自动播放；注意：在谷歌浏览器中autoplay有时会失效（其他浏览器没

痛定思痛。/ 2022年05月11日 05:08/ 0 赞/ 702 阅读

相关 HTML5 音频 / 视频 DOM 操作

目录 HTML5 音频 / 视频 DOM 操作 HTML5 Audio/Video 方法 HTML5 Audio/Video 属性 HTML5 Audio/Video

清疚/ 2022年05月09日 13:40/ 0 赞/ 256 阅读

相关 HTML5学习笔记（二）视频与音频处理

一、<video> 1、<video>是H5的新标签，用来处理视频，在此之前，各网站用来处理视频一直使用flash技术 flash的缺点有以下几方面，首先浏览器原

╰半夏微凉°/ 2022年04月18日 05:41/ 0 赞/ 312 阅读

相关 Html5选择本地视频音频文件播放

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>

比眉伴天荒/ 2021年11月27日 06:48/ 0 赞/ 716 阅读

相关 html中的音频和视频标签

音频标签 <audio controls="" autoplay="" src="./audio/haha.mp3"> 你的浏览器不支持，请更新浏览器

迈不过友情╰/ 2021年09月15日 14:44/ 0 赞/ 450 阅读