史上最详细的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/

相关文章
|
3月前
|
存储 JavaScript 前端开发
JavaScript:DOM事件
JavaScript:DOM事件
39 0
|
9月前
|
XML JavaScript 前端开发
|
9月前
|
JavaScript
JS(Dom事件操作)第十九
JS(Dom事件操作)第十九
155 0
|
4月前
|
JavaScript 前端开发
原生JavaScript之dom表单改变和鼠标常用事件
那么好,本次我们聊聊表单改变时如何利用onchange方法来触发input改变事件以及鼠标常用的滑入滑出,点击down和点击up事件.
31 2
|
5月前
|
JavaScript 前端开发 API
JavaScript事件处理:探索DOM事件和事件监听器
JavaScript事件处理:探索DOM事件和事件监听器
43 0
|
8月前
|
JavaScript 前端开发
JavaScript -- DOM事件
JavaScript -- DOM事件
|
8月前
|
JavaScript 前端开发
JavaScript — DOM的增删改查、节点、事件、文档的加载
JavaScript — DOM的增删改查、节点、事件、文档的加载
113 0
|
10月前
|
缓存 JavaScript 前端开发
web前端面试高频考点——JavaScript-Web-API 篇(一)DOM、BOM、事件
web前端面试高频考点——JavaScript-Web-API 篇(一)DOM、BOM、事件
|
10月前
|
JavaScript 前端开发
DOM ------ 事件 的那些事儿
DOM ------ 事件 的那些事儿
|
10月前
|
前端开发 JavaScript UED
前端祖传三件套JavaScript的DOM之事件的各种具体事件类型的键盘/文本
在前端开发中,JavaScript 中的 DOM 事件机制提供了丰富的功能和灵活的方式来处理各种事件。本文将介绍 JavaScript 中常见的键盘/文本事件类型,包括输入事件、按键事件和复制/剪切/粘贴事件。
105 0