史上最详细的DOM事件之媒体事件

简介: 史上最详细的DOM事件之媒体事件上篇博客讲了DOM的拖动事件,这篇博客我们来讲一讲DOM的媒体事件。HTML代码: <audio src="念旧-阿悠悠.mp3" controls></audio> 1JS代码: var oAudio=document.getElementsByTagName("audio")[0]; // 事件 描述 DOM // onabort 事件在视频/音频(audio/video)终止加载时触发。 // oncanplay 事件在用户可以开始播放视频/音频(audio/video)时触发。

史上最详细的DOM事件之媒体事件




上篇博客讲了DOM的拖动事件,这篇博客我们来讲一讲DOM的媒体事件。


HTML代码:


<audiosrc="念旧-阿悠悠.mp3"controls></audio>

JS代码:


var oAudio=document.getElementsByTagName("audio")[0];
    // 事件 描述  DOM
    // onabort  事件在视频/音频(audio/video)终止加载时触发。  
    // oncanplay  事件在用户可以开始播放视频/音频(audio/video)时触发。  
    // oncanplaythrough 事件在视频/音频(audio/video)可以正常播放且无需停顿和缓冲时触发。  
    // ondurationchange 事件在视频/音频(audio/video)的时长发生变化时触发。  
    // onemptied  当期播放列表为空时触发  
    // onended  事件在视频/音频(audio/video)播放结束时触发。  
    // onerror  事件在视频/音频(audio/video)数据加载期间发生错误时触发。  
    // onloadeddata 事件在浏览器加载视频/音频(audio/video)当前帧时触发触发。  
    // onloadedmetadata 事件在指定视频/音频(audio/video)的元数据加载后触发。  
    // onloadstart  事件在浏览器开始寻找指定视频/音频(audio/video)触发。  
    // onpause  事件在视频/音频(audio/video)暂停时触发。  
    oAudio.onpause=function(ev){
        alert("暂停播放");
        console.log(ev);
    }
    // onplay 事件在视频/音频(audio/video)开始播放时触发。  
    oAudio.onplay=function(ev){
        alert("开始播放");
        console.log(ev);
    }
    // onplaying  事件在视频/音频(audio/video)暂停或者在缓冲后准备重新开始播放时触发。  
    // onprogress 事件在浏览器下载指定的视频/音频(audio/video)时触发。  
    // onratechange 事件在视频/音频(audio/video)的播放速度发送改变时触发。  
    // onseeked 事件在用户重新定位视频/音频(audio/video)的播放位置后触发。  
    // onseeking  事件在用户开始重新定位视频/音频(audio/video)时触发。  
    // onstalled  事件在浏览器获取媒体数据,但媒体数据不可用时触发。  
    // onsuspend  事件在浏览器读取媒体数据中止时触发。  
    // ontimeupdate 事件在当前的播放位置发送改变时触发。  
    // onvolumechange 事件在音量发生改变时触发。  
    // onwaiting  事件在视频由于要播放下一帧而需要缓冲时触发。

注意: 媒体事件主要针对video,audio等媒体元素。


视频讲解链接:https://www.bilibili.com/video/BV1yi4y147gD/

相关文章
|
8月前
|
XML 消息中间件 JavaScript
从0开始学习JavaScript--JavaScript DOM操作与事件处理
在前端开发中,DOM(文档对象模型)是一个至关重要的概念,它为JavaScript提供了一种与HTML和XML文档交互的方法。本文将深入探讨DOM的概念与作用,以及JavaScript与DOM之间的密切关系。
|
2月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
59 5
|
4月前
|
JavaScript 前端开发
JavaScript HTML DOM 事件
JavaScript HTML DOM 事件
30 5
|
3月前
|
JavaScript 前端开发 API
深入理解jQuery:高效DOM操作与事件处理
【10月更文挑战第11天】深入理解jQuery:高效DOM操作与事件处理
33 0
|
4月前
|
前端开发 JavaScript
CSS中禁用DOM事件
CSS中禁用DOM事件
|
6月前
|
移动开发 JavaScript 前端开发
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
VUE实现一个列表清单【props 父子组件通信、slot插槽的使用、全局自定义指令的封装、$nextTick解决异步DOM更新、巧用v-model简化父子组件之间的通信、触发事件的事件源event】
52 0
|
8月前
|
JavaScript
js_操作dom(委托和冒泡事件)
js_操作dom(委托和冒泡事件)
47 0
|
XML JavaScript 前端开发
|
JavaScript
JS(Dom事件操作)第十九
JS(Dom事件操作)第十九
191 0
|
8月前
|
存储 JavaScript 前端开发
JavaScript:DOM事件
JavaScript:DOM事件
58 0