Question

我有一个Django网站主页，该页面在启动时通过iFrame Youtube API显示了循环的YouTube视频。但是，为了防止Youtube加载动画或避免在不兼容的设备上出现空白区域，我先放置了一张图片，然后使用计时器延迟将其淡入Youtube视频中。但是，Youtube API不一致，有时Youtube视频不会出现（停留在图像上）。

我附上了运行这些元素的JS和CSS。我不确定这种不一致是由于代码本身造成的，还是由于互联网速度较慢/加载过多而导致的。我已经看到一些有关确保API函数具有全局性的评论，但我相信此脚本已经存在。

Javascript：iFrame Youtube API

flatness

CSS

<script async src="https://www.youtube.com/iframe_api"></script>
<script async src="video.js"></script>
<script>
    window.onYouTubeIframeAPIReady = function() {
        var player;
        player = new YT.Player('YouTubeBackgroundVideoPlayer', {
            videoId: 'LKXNZT1z9cs', // YouTube Video ID
            width: 1280,               // Player width (in px)
            height: 720,              // Player height (in px)
            playerVars: {
                playlist: 'LKXNZT1z9cs',
                autoplay: 1,        // Auto-play the video on load
                autohide: 1,
                disablekb: 1,
                controls: 0,        // Hide pause/play buttons in player
                showinfo: 0,        // Hide the video title
                modestbranding: 0,  // Hide the Youtube Logo
                loop: 1,            // Run the video in a loop
                fs: 0,              // Hide the full screen button
                autohide: 0,         // Hide video controls when playing
                rel: 0,
                enablejsapi: 1
            },
            events: {
                onReady: function onPlayerReady(event) {
                    goToStart(event);
                },
                onStateChange: function (e) {
                    if (e && e.data === 1) {
                        var videoHolder = document.getElementById('home-banner-box');
                        if (videoHolder && videoHolder.id) {
                            videoHolder.classList.remove('loading');
                        }
                    } else if (e && e.data === 0) {
                        e.target.playVideo()
                    }
                }
            }
        });
    }
</script>

Youtube iFrame Javascript API并不总是加载网站视频

0 个答案: