Android 4.3 上的 YouTube 嵌入式播放器

Posted

技术标签:

【中文标题】Android 4.3 上的 YouTube 嵌入式播放器【英文标题】:YouTube Embeded Player on Android 4.3 【发布时间】:2014-02-13 22:19:15 【问题描述】:

我正在尝试将 YouTube 播放器嵌入到我的网页中,如下所示。

我遇到的问题是,播放器最初可以正常加载并播放第一个视频,但是当调用 .loadVideoById 时,播放器看起来会加载视频(视频标题文本更改),但随后卡在黑屏上玩的。

这仅发生在 android 上,使用 html5 播放器(Chrome 和默认浏览器),因为我的手机更新到 Android 4.3,以前在 4.2 上很好。

它可以通过桌面 chrome 正常工作,用户代理设置为伪造 Android。

我还尝试过另外两部 Android 手机,但都遇到了完全相同的问题(都是 4.3)。使用 Google Code Playground Example Youtube Player,我也间歇性地遇到相同的行为。

如果我附加 ADB Chrome 远程调试器,我可以看到播放器卡在缓冲状态,尽管正在下载视频片段,正如预期的那样。

有没有人经历过类似的事情?或者有什么建议?

代码:

<div id="ytwrapper">
<div id="player" >
</div>
</div>
<script type="text/javascript">
var ytplayer;

2。此代码异步加载 IFrame Player API 代码。

var tag = document.createElement("script");
tag.src = "http://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

3.此函数在 API 代码下载后创建一个(和 YouTube 播放器)。

function onYouTubeIframeAPIReady() 

   ytplayer = new YT.Player('player',  width: 1280,
                            height: 720,
                            videoId: 'M7lc1UVf-VE',
                            frameborder:0,
                 events: 
                          
                            "onReady": onYouTubePlayerReady,
                    "onStateChange": onytplayerStateChange,
                    "onPlaybackQualityChange": onYTQchange,
                "onError": onYTError
                      
                          );
 

function loadnextvid()

  ytplayer.loadVideoById(vids[currentvid],0, vqs[currentvid]);


function onYouTubePlayerReady(playerId) 

loadnextvid();

</script>

【问题讨论】:

【参考方案1】:

我有同样的问题。看来目前解决此问题的唯一方法是销毁并重新创建播放器实例。

我在这里找到了这个解决方案:https://code.google.com/p/gdata-issues/issues/detail?id=5273

适用于 Android 4.4、ios7。

if (player != null) 
    player.destroy();
    player = null;



player = new YT.Player('divplayer', 
                width: '100%',
                height: '100%',
                videoId: video_id,

                playerVars:  'autoplay': 0, 'playerapiid': 'ytPlayer', 'border': 0,  'hd': 1, 'version': 3, 'rel': 0, 'color' : 'red' ,


                events: 
                    'onReady': onPlayerReady
                

            );

【讨论】:

以上是关于Android 4.3 上的 YouTube 嵌入式播放器的主要内容,如果未能解决你的问题,请参考以下文章

限制 youtube 在其他网站上的嵌入

如何使用 Phonegap 在 Android 上嵌入 YouTube 视频

渲染/显示和播放嵌入 pdf、Android 的 youtube 视频

Android webview 无法渲染通过 iframe 嵌入的 youtube 视频

在 Android 应用程序中嵌入 Youtube 视频

嵌入的 youtube 视频无法在某些 Android 设备中播放