在网页开发中，我们经常需要在页面上嵌入音频或视频元素，以提供更丰富的用户体验。HTML5 提供了 <audio> 和 <video> 标签来实现这一功能。在使用这些标签时，我们可能会遇到需要在媒体资源加载完成后执行特定操作的情况。这时，可以利用 loadeddata 事件来实现。
loadeddata 事件简介
loadeddata 事件在音频/视频的当前帧的数据已加载时触发。也就是说，当浏览器已经加载足够的数据，可以播放当前帧时，就会触发这个事件。
使用示例
下面是一个简单的示例，演示了如何使用 loadeddata 事件来监测音频资源是否已加载完成：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----- ---------------------------- ------------------
----- --------------- ---------------------------- -------------------
------------ ------ ---- ----- ---------------
-------
------
------ -------- -------------
------- --------------- -----------------
--------
--------
----- ----- - -----------------------------------
------------------------------------ -- -- -
------------------ ---- ---------
-- -----------------
---
---------
-------
-------在上面的示例中，我们创建了一个带有控件的音频元素，并监听了其 loadeddata 事件。当音频数据加载完成时，会在控制台输出 Audio data loaded。
注意事项
loadeddata事件在音频/视频的当前帧数据加载完成后触发，但并不保证整个媒体资源已加载完成。如果需要确保整个资源已加载完成，可以使用canplaythrough事件。- 在使用
loadeddata事件时，建议在事件处理函数中检查媒体资源的readyState属性，以确保资源已加载完成。
希望本文对你理解 HTML 音频/视频 DOM 的 loadeddata 事件有所帮助！如果有任何疑问或建议，欢迎留言讨论。