Добавить видео на страницу с помощью YouTube Player API - PullRequest
Новая
       18

Добавить видео на страницу с помощью YouTube Player API

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

Я хочу загрузить видео YouTube одним нажатием кнопки с помощью Player Player. Цель состоит в том, чтобы пользователь мог ввести URL-адрес видео, щелкнуть кнопку, а затем видео загружается ниже (я исключил ввод формы ниже, чтобы сделать его немного проще).

Я пытался использовать location.reload(); чтобы принудительно перезагрузить страницу, и проверил некоторые другие подобные вопросы , которые не совсем полезны, потому что они не используют API (который я должен использовать позже, когда добавлена ​​функциональность)

Этот пример из документации отлично работает: 

<!DOCTYPE html>
<html>
<body>

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

<script>
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement('script');

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

    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    // 5. The API calls this function when the player's state changes.
    //    The function indicates that when playing a video (state=1),
    //    the player should play for six seconds and then stop.
    var done = false;
    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
            setTimeout(stopVideo, 6000);
            done = true;
        }
    }
    function stopVideo() {
        player.stopVideo();
    }
</script>
</body>
</html>

Я хочу, чтобы что-то подобное (очень похожая версия) работало. Я не уверен, почему это не в настоящее время. 

<!DOCTYPE html>
<html>
<body>

<input type="submit" value="Submit" id="submit">

<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

<script>

    document.getElementById("submit").addEventListener("click", function() {

        location.reload();

        // 2. This code loads the IFrame Player API code asynchronously.
        var tag = document.createElement('script');

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

        // 3. This function creates an <iframe> (and YouTube player)
        //    after the API code downloads.
        var player;

        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '390',
                width: '640',
                videoId: 'M7lc1UVf-VE',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });
        }

        // 4. The API will call this function when the video player is ready.
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // 5. The API calls this function when the player's state changes.
        //    The function indicates that when playing a video (state=1),
        //    the player should play for six seconds and then stop.
        var done = false;

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

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

    });

</script>
</body>
</html>

1 Ответ

1 голос
/ 05 апреля 2020

У вас есть две проблемы.

1) onYouTubeIframeAPIReady никогда не вызывается, поскольку оно определено после загрузки API YouTube. Вы можете увидеть это, добавив console.log.

2) Когда вы перезагрузите страницу, страница перезагрузится; то есть ваши предыдущие переменные и видео, и все пропало.

Вот минимальный пример для загрузки и воспроизведения видео YouTube по нажатию кнопки: 

<input type="submit" value="Submit" id="submit">

<div id="player"></div>

<script src="https://www.youtube.com/iframe_api"></script>
<script>
    document.getElementById('submit').addEventListener('click', () => {
        new YT.Player('player', {
            height: '390',
            width: '640',
            videoId: 'M7lc1UVf-VE',
            events: {
                onReady: e => e.target.playVideo()
            }
        });
    });
</script>

Обратите внимание, примеры кода YouTube либо пытаются чтобы быть обратно совместимым или просто не был строго обновлен. Они не следуют современным стилям (например, они используют var вместо let, == вместо ===, " вместо ' и др. c.

...