video.js youtube 延迟加载

如何解决video.js youtube 延迟加载

我有一个包含大约 100 个电影缩略图的主页，每个缩略图上都有一个播放图标，通过 video.js 播放器启动 YouTube 视频。 问题是 video.js 预加载了所有 youtube 资源，我有一个 50mb 的主页。 有没有办法只在用户播放视频或其他解决方案时加载资源？ 该网站是在 VUE 中制作的。

这里是播放器组件的代码：

<template>
    <div>
        <video ref="player" class="video-js"></video>
    </div>
</template>
<script>
import "video.js/dist/video-js.min.css";
import videojs from "video.js";
import "videojs-youtube";
import "@devmobiliza/videojs-vimeo";

export default {
    name: "UtTrailerPlayer",props: {
        src: {
            type: String,default: null,},type: {
            type: String,data: () => {
        return {
            player: null,playerOpts: {
                controls: false,width: 320,height: 240,debug: true,fluid: true,liveui: false,preload: "none",techOrder: ["youtube"],languages: ["it"],};
    },methods: {
        init: function() {
            if (this.src) {
                let opts = {
                    controls: false,sources: [],};

                if (this.type == "youtube") {
                    opts["sources"] = [
                        {
                            type: "video/youtube",src: this.src,];
                } else if (this.type == "vimeo") {
                    opts["sources"] = [
                        {
                            type: "video/vimeo",vimeo: {
                                color: "#F2B544",];
                }

                const player = this.$refs.player;
                this.$nextTick(() => {
                    if (opts.sources.length > 0 && player) {
                        // console.log(opts.sources[0]);
                        // this.player = videojs(player,opts,this.onPlayerReady());
                        this.player = videojs(player,opts);
                    } else {
                        // this.$emit("error");
                    }
                });
            } else {
                console.log("no src");
            }
        },onPlayerReady: function() {
            console.log("player ready");
        },play: function() {
            if (this.player) {
                this.player.play();
            }
        },pause: function() {
            if (this.player) {
                this.player.pause();
            }
        },mounted: function() {
        this.init();
    },beforeDestroy() {
        if (this.player) {
            this.player.dispose();
        }
    },};
</script>
<style lang="scss"></style>