YouTube iframe API 和 WordPress

2022-01-19 00:00:00 youtube-api javascript wordpress

我正在 WordPress 帖子页面上尝试以下代码:

I'm trying the following code on WordPress post page:

<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',
            playerVars: { 'autoplay': 1, 'controls': 0 },
            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 playVideo() {
        player.playVideo();
    }
    function pauseVideo() {
        player.pauseVideo();
    }
    function stopVideo() {
        player.stopVideo();
    }
    function loadVideoById(val) {
        player.loadVideoById(val, 0, "large");
    }
</script>

但是，什么都没有显示.

However, nothing was displayed.

推荐答案

这种代码注入最好使用 简码.而不是 document.createElement，只需使用 wp_enqueue_script 加载 Iframe API，脚本的其余部分由短代码打印.PHP heredoc 可以轻松构建大型可配置 HTML 字符串.

This kind of code injection is better done with a Shortcode. Instead of document.createElement, just use wp_enqueue_script to load the Iframe API and the rest of the script is printed by the shortcode. PHP heredoc makes easy to build large configurable HTML strings.

帖子/页面内的短代码用法为:[ytplayer id="M7lc1UVf-VE"]

Shortcode usage inside the post/page would be: [ytplayer id="M7lc1UVf-VE"]

add_shortcode( 'ytplayer', 'print_yt_player' );

function print_yt_player( $atts ) {
    wp_enqueue_script( 'yt-iframe', 'https://www.youtube.com/iframe_api' );
    $yt_id = $atts['id'];
    $html = <<<HTML
        <div id="player"></div>   
        <script>
            var player, done = false;
            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                    height: '390',
                    width: '640',
                    videoId: '$yt_id',
                    playerVars: { 'autoplay': 1, 'controls': 0 },
                    events: {
                        'onReady': onPlayerReady,
                        'onStateChange': onPlayerStateChange
                    }
                });
            }    
            function onPlayerReady(event) {
                event.target.playVideo();
            }
            function onPlayerStateChange(event) {
                if (event.data == YT.PlayerState.PLAYING && !done) {
                    setTimeout(stopVideo, 6000);
                    done = true;
                }
            }
            function playVideo() {
                player.playVideo();
            }
            function pauseVideo() {
                player.pauseVideo();
            }
            function stopVideo() {
                player.stopVideo();
            }
            function loadVideoById(val) {
                player.loadVideoById(val, 0, "large");
            }
        </script>
HTML;
    return $html;
}

相关文章