vue mounted获取video的duration是NaN

原因是video数据没加载完，在video的onloadedmetadata事件里获取，

<template>
    <div class="page">
        <video :src="videoUrl" controls class="video" ref="myvideo"></video>
    </div>
</template>

<script>
export default {
    mounted() {
        const myvideo = this.$refs.myvideo;
        // 需求：视频默认在结束位置
        myvideo.onloadedmetadata = function () {
            console.log("视频长度为：" + myvideo.duration);
            myvideo.currentTime = myvideo.duration;
        };
    },
    computed: {
        videoUrl() {
            return window.BASE_URL + "/whls.mp4";
        },
    },
};
</script>

<style scoped lang="scss">
.page {
    display: flex;
    justify-content: center;
    align-items: center;
}
.video {
    margin-top: 30px;
    width: 96%;
    height: 95%;
}
</style>