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

＆＃34;警告：为了防止用户通过蜂窝网络进行未经请求的下载，嵌入式媒体无法在iOS上的Safari中自动播放 - 用户始终会启动播放。一旦启动播放，控制器将自动在iPhone或iPod touch上提供，但对于iPad，您必须设置控件属性或使用JavaScript提供控制器。＆＃34;

尝试以下代码：

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();
}

Answer 2

我遇到了同样的问题。

我的问题似乎是我的onPlayerReady功能：

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

我删除后效果很好：

event.target.playVideo();

如果是interessted，这是我的整个代码：

player = new YT.Player(playerId, {
  height: '410',
  width: '820',
  videoId: videoId,
  playerVars: {
      "autoplay": 1,
      "controls": 1,
      "showinfo": 0
  },
  events: {
      'onReady': onPlayerReady,
      'onStateChange': onIntroPlayerStateChange
  }
});

function onPlayerReady(event) {

}

function onPlayerStateChange(event) {
    if (event.data === 0) {
        console.log("Movie ended - go get some fresh air");
    }
}

自动播放，似乎不适用于IOS7： - （

一两秒后视频变黑

2 个答案: