YouTube iFrame Javascript API не всегда загружает видео с сайта - PullRequest
Новая
       36

YouTube iFrame Javascript API не всегда загружает видео с сайта

0 голосов
/ 14 марта 2019

У меня есть домашняя страница сайта Django, которая отображает зацикленное видео YouTube при запуске через API iFrame Youtube. Однако, чтобы предотвратить загрузку анимации Youtube или избежать пустой области на несовместимых устройствах, у меня есть картинка, которая сначала появляется на месте, а затем исчезает в видео на Youtube с использованием задержки по таймеру. Однако API YouTube не согласован, и иногда видео с YouTube не появляется (остается на изображении).

Я прикрепил JS и CSS, который запускает эти элементы. Я не уверен, является ли это несоответствие результатом самого кода, или это из-за медленной скорости интернета / чрезмерной загрузки. Я видел некоторые комментарии о том, что функция API является глобальной, но я верю, что этот скрипт уже есть.

Javascript: API iFrame Youtube 

<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>

CSS 

.home-banner .slide .video-slide {
  background-color: #000; }

.home-banner.loading .video-background {
  opacity: 0; }

.video-background {
  position: relative;
  top: 0%;
  left: 0;
  padding-top: 56.25%;
  width: 100%;
  -webkit-transform: translateY(-0%);
  -ms-transform: translateY(-0%);
  transform: translateY(-0%);
  -webkit-transition: 2s opacity ease;
  transition: 2s opacity ease;
  transition-delay: 2.8s;
  opacity: 1; }

.video-foreground,
.video-background iframe {
  position: absolute;
  top: 0;
  left: 0%;
  width: 100%;
  height: 100%;
  pointer-events: none; }
...