onloadedmetadata事件的介绍及其应用场景

onloadedmetadata事件是一个HTML5中的事件，它会在一个媒体元素被加载时触发，从而可以获取媒体元素的元数据，包括视频的高度、宽度、时长等信息。它的主要应用场景是用来获取媒体元素的元数据，从而实现对媒体元素的控制。

使用方法：

要使用onloadedmetadata事件，可以使用addEventListener()方法，它接受两个参数：事件名称和回调函数，如下所示：

var video = document.getElementById('video');
video.addEventListener('loadedmetadata', function(){
    console.log(this.videoWidth);
    console.log(this.videoHeight);
    console.log(this.duration);
});

上面的代码中，使用getElementById()方法获取video元素，使用addEventListener()方法给它添加一个loadedmetadata事件，当video元素加载完成时，就会触发loadedmetadata事件，并执行回调函数，从而可以获取video元素的元数据，如视频的宽度、高度、时长等信息。

onloadedmetadata事件还可以用来实现自动播放、自动循环播放等功能，如下所示：

var video = document.getElementById('video');
video.addEventListener('loadedmetadata', function(){
    // 自动播放
    this.play();
    // 自动循环播放
    this.loop = true;
});

上面的代码中，当video元素加载完成时，就会触发loadedmetadata事件，并执行回调函数，从而实现自动播放和自动循环播放的功能。

onloadedmetadata事件是一个非常有用的事件，它可以用来获取媒体元素的元数据，并实现自动播放、自动循环播放等功能，是一个非常实用的事件。