javascript - 一两秒钟后视频变黑

Question

我目前正在使用Youtube JavaScript API将视频嵌入到我的网页中，以控制我拥有的播放列表。我似乎一遍又一遍的错误是，视频本身在加载标题，播放图标和加载图标后立即变黑。一秒钟或两秒钟似乎都将播放视频。但是标题滑动起来以允许视频播放后，我得到的只是黑色背景。标题和youtube文字在右上角显示得很好。但是视频本身无法播放。

从我所看到的来看，这个问题仅发生在iPhone上。在Android和PC上完美运行。

    var playlistDescription = [];
    var playlist = [];
    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 youtubePlayer;
    function onYouTubeIframeAPIReady() {
        playlist.push("youtubevideoid");

        $(".video-list-item").each( function() {
            if ($(this).data("id") != "youtubevideoid") {
                playlist.push($(this).data("id"));
            }
        })

        youtubePlayer = new YT.Player("youtube-player", {
            videoId: "youtubevideoid",
            height: "378",
            width: "672",
            playerVars: {
                "color1": "#046a3b",
                "color2": "#faa820"
            },
            events: {
                "onReady": onPlayerReady,
                "onStateChange": onPlayerStateChange
            }
        });


    }  

    function onPlayerReady(event) {
        youtubePlayer.loadPlaylist(playlist);
    }

    function onPlayerStateChange(event) {
        if (event.data == -1 || event.data == 0) {
            var playlistDescriptionItem = playlistDescription[youtubePlayer.getPlaylistIndex()];
            $(".divSubHeadline").text(playlistDescriptionItem.title);
            $(".pageContent span").text(playlistDescriptionItem.description);
        }
    }

这是我用来加载youtube播放列表的脚本。
播放列表变量包含视频连接到的播放列表项。

不能让它在jsfiddle上工作-可能就是我。。所以我在这里粘贴了脚本。

Answer 1

我有完全一样的问题。我在这里找到了答案:

https://groups.google.com/forum/#!searchin/youtube-api-gdata/ios $ 20autoplay / youtube-api-gdata / Fr39edfAKgs / FxfdHIu3H8MJ

“警告:为防止用户自费下载通过蜂窝网络进行的下载，无法在iOS的Safari中自动播放嵌入式媒体-用户始终启动播放。一旦启动播放，iPhone或iPod touch上会自动提供一个 Controller ，但对于iPad您必须设置控件属性或使用JavaScript提供 Controller 。”

请尝试以下代码:

youtubePlayer = new YT.Player("youtube-player", {
        videoId: "youtubevideoid",
        height: "378",
        width: "672",
        playerVars: {
            "autoplay": 1,
            "controls": 1,
            "showinfo": 0
        },
        events: {
            "onReady": onPlayerReady,
            "onStateChange": onPlayerStateChange
        }
    });


}  

function onPlayerReady(event) {
    // do whatever you need to do here
    // but don't call:
    // event.target.playVideo();
}