AbortError：play() 请求被新的加载请求中断

Question

我正在使用 Vue，遇到以下问题。当前组件接收两个 props：

isVisible

和

currentPdfPageForAi

，用于更改组件中的视频源。在所有情况下一切正常，除了一种情况：如果一个视频从头到尾自动播放，然后通过更改

currentPdfPageForAi

属性切换到下一个视频。

我的 Vue 文件：

<template>
    <div v-show="isVisible" class="ai-container cursor-pointer" @click="updateVisible()">
        <video :src="videoUrl" ref="video"></video>
    </div>
</template>

<script>
import config from "./../../../env";
export default {
    data() {
        return {
            videoUrl: '',
        }
    },

    props: {
        isVisible: {
            type: Boolean,
            default: false
        },
        currentPdfPageForAi: {
            type: Number,
        }
    },

    methods: {
        updateVisible: function () {
            this.$emit('update-visible', '');
        },

        getVideo: function () {
            this.videoUrl = `${config.MINIO_SERVER}/${config.MINIO_BUCKET_NAME}/${config.MINIO_AI_VIDEO_FOLDER}/${this.currentPdfPageForAi}.mp4`;
        },

        videoTimingController: function () {
            let video = this.$refs.video;

            if (this.isVisible) {
                this.getVideo();
                video.load();
                var playPromise = video.play();

                if (playPromise !== undefined) {
                    playPromise.then(_ => {
                        video.currentTime = 0;
                        video.play();
                    })
                        .catch(error => {
                            console.error('error while playing video: ', error);
                        });
                }
            } else {
                video.pause();
            }
        },
    },

    created() {
        this.getVideo();
    },

    mounted() {
        //hi
    },

    watch: {
        currentPdfPageForAi(newVal) {
            this.getVideo();
            this.videoTimingController();
        },

        isVisible(newVal) {
            this.videoTimingController();
        },
    },
};
</script>

我认为视频播放完毕后会出现错误。

Answer 1

我刚刚找到了一种使我的代码能够运行的方法。 不确定我的方法是否正确。 我刚刚补充：

updated() {
    this.getVideo();
},