Пауза / Возобновить YouTube в Скрытом <DIV> - PullRequest
Новая
       15

Пауза / Возобновить YouTube в Скрытом <DIV>

0 голосов
/ 14 апреля 2020

Спасибо Михаил Минков за помощь в создании отличной основы API YouTube. Пришлось настроить то, что вы мне дали, так как я показываю плейлист, а не одно видео.

Код HTML

    <body class="center">
        <div class="navbar">
            <a href="/index.html">Home</a>
            <a href="/main/application.html">Application</a>
            <a href="/main/games.html">Games</a>
            <a href="/main/leadership.html">Leadership</a>
            <a href="#Social" class="active">Social Media</a>
            <a href="#Social" class="active">Social Media</a>
        </div>
        <div class="top">
            <input type="image" src="/media_files/social_media/youtube.png" alt="YouTube" style="width:100px" onclick="img(1); pauseVideo();">
            <input type="image" src="/media_files/social_media/twitter.png" alt="Twitter" style="width:100px" onclick="img(0); pauseVideo();">
        </div>
        <div id="player"></div>
        <div id="twitter" hidden>
            <a class="twitter-timeline" data-lang="en" data-width="600" data-height="400" data-theme="dark" href="https://twitter.com/clanshocktac?ref_src=twsrc%5Etfw">Tweets by clanshocktac</a>
            <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
        </div>
    </body>

JavaScript

    var done = false;
    var player;
    var tag = document.createElement('script');
    var firstScriptTag = document.getElementsByTagName('script')[0];
    tag.src = "https://www.youtube.com/iframe_api";
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    function img(x) {
        if (x == 0) {
            document.getElementById('player').style.display = 'none';
            document.getElementById('twitter').style.display = 'block';
        }
        else {
            document.getElementById('player').style.display = 'block';
            document.getElementById('twitter').style.display = 'none';
        }
        return;
    }

    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '600',
            width: '900',
            playerVars: {
                listType: 'playlist',
                list: 'PLDNv6o8iIDrw6ETcAy8s3xHgn2UdjpZ-e'
            }
        });
    }

    function onPlayerReady(event) {
        event.target.playVideo();
    }

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
            setTimeout(stopVideo, 6000);
            done = true;
        }
    }

    function pauseVideo() {
        player.pauseVideo();
    }

    function playVideo() {
        player.playVideo();
    }

Это исправление для Воспроизведения / Паузы, когда я переключаюсь между проблемой YouTube <div> и Twitter <div>.

1 Ответ

0 голосов
/ 14 апреля 2020

То, что вы говорите об идентификаторах, недействительно. Идентификатор работает для идентификации уникального элемента. Если вы поместите идентификатор на два отдельных элемента, он получит только один из них. Это также показывало бы предупреждения в консоли.

Также, <div align="center"> устарело. Вы должны либо использовать встроенные стили, такие как <div style="text-align: center;">, либо определить класс text-center и просто применить его к div, как <div class="text-center">.

Кроме того, из того, что вы показали, у вас есть stati c код, но с YouTube JavaScript API вам просто нужен элемент <div id="player"></div>, и вы инициализируете все с помощью JavaScript. Вы можете увидеть этот пример здесь .

Если бы мне пришлось изменить ваш пример, я бы, вероятно, сделал что-то вроде:

HTML

<div style="text-align: center;">
    <input type="image" src="/media_files/social_media/youtube.png" alt="YouTube" style="width:100px" onclick="img(1); playVideo();">
    <input type="image" src="/media_files/social_media/twitter.png" alt="Twitter" style="width:100px" onclick="img(0); stopVideo();">
</div>
<div id="player"></div>
<div id="tw" style="text-align: center;" hidden>
    <a class="twitter-timeline" data-lang="en" data-width="600" data-height="400" data-theme="dark" href="https://twitter.com/clanshocktac?ref_src=twsrc%5Etfw">Tweets by clanshocktac</a>
    <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

JavaScript 

<script>
  var tag = document.createElement('script');

  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      playerVars: 
      {
        listType:'playlist',
        list: 'PLDNv6o8iIDrw6ETcAy8s3xHgn2UdjpZ-e'
      }
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerReady(event) {
    event.target.playVideo();
  }

  var done = false;
  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }
  function playVideo() {
    player.playVideo();
  }
  function stopVideo() {
    player.stopVideo();
  }
</script>

Я сделал смесь того, что вы пытаетесь сделать, и примера, приведенного в документации по API Player Youtube. Не уверен, что это решит вашу проблему, но я думаю, вам стоит это проверить.

...