视频在一两秒后变黑答案

【问题标题】：Video goes black after a second or two视频在一两秒后变黑
【发布时间】：2013-08-11 05:29:36
【问题描述】：

我目前正在使用 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 上工作 - 可能只是我.. 所以我将脚本粘贴到这里。

【问题讨论】：

你可以在 jsfiddle 上发布示例
无法让 jsfiddle 显示视频。将 javascript 源代码粘贴到代码字段中。
你能发布完整的javascript和html代码
这是完整的 JavaScript。唯一的 HTML 是一个容器，其 id 为 youtube-player 和另外两个用于标题和描述的 div。
您需要更新您的闪存吗？ get.adobe.com/flashplayer

标签： javascript iphone ios youtube youtube-javascript-api

【解决方案1】：

我也有同样的问题。

我的问题似乎是我的 onPlayerReady 函数：

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

我删除后它工作得很好：

event.target.playVideo();

如果有兴趣，这是我的完整代码：

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】：

我遇到了完全相同的问题。我在这里找到了答案：

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

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

试试下面的代码：

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

【讨论】：