让 YouTube JS API 与 iOS 一起工作，处理 embedSWF？答案

【问题标题】：Making the YouTube JS API work with iOS, dealing with embedSWF?让 YouTube JS API 与 iOS 一起工作，处理 embedSWF？
【发布时间】：2012-10-09 11:47:39
【问题描述】：

我正在使用 YouTube 的 JS API 并显示视频播放器 use of embedSWF is recommended by Google in the documentation，如下所示：

  <script type="text/javascript" src="swfobject.js"></script>    

  <div id="ytapiplayer">
    You need Flash player 8+ and JavaScript enabled to view this video.
  </div>

  <script type="text/javascript">

    var params = { allowScriptAccess: "always" };
    var atts = { id: "myytplayer" };
    swfobject.embedSWF("http://www.youtube.com/v/VIDEO_ID?enablejsapi=1&playerapiid=ytplayer&version=3","ytapiplayer", "425", "356", "8", null, null, params, atts);

  </script>

虽然这在我的计算机和 Android 设备上运行良好，但在 iOS 上，ytapiplayer div 不会变成嵌入式播放器，而是仅显示其原始内容，即错误消息说 Flash player 8+和JS是必需的。

是否有可能让我的这个在 iOS 上工作？如果有，怎么做？

提前致谢！

【问题讨论】：

标签： javascript ios youtube youtube-api swfobject

【解决方案1】：

也许您应该尝试新的 YouTube iframe Player API？ https://developers.google.com/youtube/iframe_api_reference

它适用于移动设备，无需考虑 Flash。嵌入示例：

<script type="text/javascript" src="//www.youtube.com/iframe_api"></script>

function onYouTubePlayerAPIReady() {
    var videoBox = document.getElementById('video1');
    videoBox.ytplayer = new YT.Player(videoBox, {
        videoId: 'kXDiGtgPL6E',
        playerVars: {
            //controls: 0,
            wmode:'transparent'
        },
        height: '200',
        width: '320'
    });
}

【讨论】：

这行得通，谢谢。但是，我的 OnStateChange 函数现在都被调用了两次。把一切都搞砸了，因为我的脚本认为两个视频已经播放（状态==结束），而实际上它只是一个。这几乎是一系列事件：播放器结束 -> 初始化新视频 -> 播放器结束（错误） -> 初始化下一个视频 -> 成功播放（但上一个视频被跳过，因为 API 报告它在它之前已经结束甚至可以开始播放）不知道为什么会这样......
也许你可以把你的代码放到 jsfiddle 中？作为临时解决方法，您还可以在每个视频之后重新嵌入播放器。

【解决方案2】：

几个月前我为一个项目做了这件事......

Javascript，与你所拥有的非常相似：

<script type="text/javascript" src="js/swfobject.js"></script>
        <script type="text/javascript">
            var flashvars = {};
                flashvars.youTubeVideo = "VitQwgsBq-w";
                flashvars.controllerAlign = "top";
                flashvars.queTo = "0";
                flashvars.controlBarAlpha = ".3";
            var params = {};
            var attributes = {};
                swfobject.embedSWF("images/youTubeLoader.swf", "youTubeDiv", "250px", "200px", "9.0.0", false, flashvars, params, attributes);
</script>

swfobject.js 要做的是寻找一个名为“youTubeDiv”的 HTML div，并用一个 SWF youtube 播放器替换它的所有内容

（我这样做是因为 iframe 解决方案在我正在处理的 HTML5 项目中存在 z-index 问题）

现在是 HTML：

    <div id="youTubeDiv">
            <iframe width="250px" height="200px" src="http://www.youtube.com/embed/VitQwgsBq-w" frameborder="0" allowfullscreen></iframe>
    </div>

【讨论】：

这会显示视频，但会使播放器无法响应任何 API 操作（播放新视频、音量变化、事件变化等）。