标签: youtube-iframe-api

几个月来我一直在使用YouTube IFrame播放器API,并且最近在播放器加载时开始看到此异常: Uncaught ReferenceError: ytcfg is not defined 检查iframe,我看到成功调用yt.setConfig,但ytcfg.set稍后失败.API最近有变化吗？任何播放器参数都可能导致此问题？

<script src="//s.ytimg.com/yts/jsbin/www-embed-player-vflnzmqns/www-embed-player.js" type="text/javascript" name="www-embed-player/www-embed-player"></script>
<script src="//s.ytimg.com/yts/jsbin/player-en_US-vflr--npw/base.js" name="player/base"></script>
<script>
    yt.setConfig({
        ...
    });
    writeEmbed();
</script>
<script>
    ytcsi.info('st', 35);
    ytcfg.set({
        "TIMING_ACTION": "",
        "CSI_VIEWPORT": true,
        "TIMING_INFO": {
            "c": "WEB",
            "yt_li": 1,
            "cver": "1.20161112",
            "yt_lt": "cold"
        },
        "CSI_SERVICE_NAME": "youtube"
    });
    ;</script>

这个问题有几个变种:

https://issuetracker.google.com/issues/35178202"ytcfg未定义" https://issuetracker.google.com/issues/35177930"__ytRIL未定义"

这是我得到的错误消息:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided
('https://www.youtube.com') does not match the recipient window's origin 
('http://localhost:9000').

我已经看到了目标来源http://www.youtube.com和收件人来源的其他类似问题https://www.youtube.com,但没有一个像我的目标所在的地方https://www.youtube.com和原点http://localhost:9000.

1. 我没有遇到问题.问题是什么？
2. 我该如何解决？

我试图嵌入一个声音静音的视频,但我无法弄清楚它是如何工作的.

目前我正在使用此功能但不起作用:

<iframe src="https://www.youtube.com/embed/uNRGWVJ10gQ?rel=0&amp;autoplay=1" width="560" height="315" frameborder="0" allowfullscreen></iframe>

你们中的任何人都知道我怎样才能做到这一点？

我在用

<iframe width="550" height="314" src="https://www.youtube.com/embed/vidid?modestbranding=1&amp;rel=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe>

这将删除右侧底部"Youtube"徽标.并删除悬停时出现的"标题栏".

但在这个问题是,当我悬停在视频上然后在右侧底部"Youtube"tumbnail /文本即将到来,当我删除鼠标然后它消失.

当我使用"autohide = 1"时,控制栏会被隐藏,在右下角,悬停时会显示一个"Youtube"图标/图像/徽标.我在用

iframe.setAttribute("src", "youtube.com/embed/" + youtube.id + "?modestbranding=1&;showinfo=0&;autohide=1&;rel=0;"); 

这个.有了这个,我可以从控制栏中删除/隐藏标题栏和徽标,但在右下角悬停时屏幕上还有另一个徽标,我应该使用哪个参数来隐藏它？

更多的是"回答"而不是"问题",但在其他地方没有找到这个我在这里发布.

我在IE和Firefox的所有版本中初始化iFrame API时遇到了困难,并且有点自定义实现.基本上,它会加载API,但不会创建播放器对象.

经过一些试验和错误后,我终于发现它无法正常工作,因为div我传递给对象的ID已将其CSS可见性设置为'none'.一旦它被设置为'visible'整个工作.之后我尝试将divCSS 设置为'display:none'(应用程序要求视频被隐藏,直到用户请求),这也导致iFrame API无声地失败(从不回调'onPlayerReady').

所以,简而言之,当使用YouTube iFrame API进行初始化时div,您希望在以后保持隐藏状态,使用像绝对定位这样的CSS技术将其推离屏幕直到您以后需要它.此外,发现一旦玩家对象被初始化'onPlayerReady'并被调用,你可以整天打开和关闭显示,一切都将按预期工作.

我看了很多问题和youtube api的东西但是对于我的生活无法弄清楚为什么onYouTubeIframeAPIReady无法正常工作.

这是我的iframe:

<iframe id="youtube_vid" width="763" height="430" src="https://www.youtube.com/embed/dlJshzOv2cw?theme=light&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" frameborder="0" allowfullscreen=""></iframe>

我的剧本:

function callYTapi() {

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

    function onYouTubeIframeAPIReady() {
        console.log('IframeAPI = Ready');
        var player = new YT.Player('youtube_vid', {
            events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
            }
        });
    }

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

    function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PAUSED) {
            console.log("Paused");
        }

        if (event.data == YT.PlayerState.PLAYING) {
            console.log("Playing");
        }

        if (event.data == YT.PlayerState.ENDED) {
            end(); 
        }
    } …

是否有官方方式隐藏More videosYouTube嵌入的标题和部分(截至2018年7月2日的最新版本),只是在右下方显示YouTube徽标？我知道嵌入曾经有过这种能力.

我基本上寻找的是嵌入式自动播放,除了强制性的YouTube徽标之外没有其他元素,并且可以暂停它,但是More videos在执行此操作时没有出现.

对于该showinfo选项,文档目前说:

将参数值设置为0会导致播放器不显示before视频开始播放的视频标题和上传者等信息.

所以这before清楚地表明这在视频播放期间没有生效.

但有没有办法隐藏上传器,标题,后观和共享按钮从嵌入的顶部？

这是视频暂停时的当前状态:

<iframe src="https://www.youtube.com/embed/dnmJLVWetQM?autoplay=1&controls=0&modestbranding=1&showinfo=0&iv_load_policy=3" frameborder="0" allowfullscreen="1" allow="autoplay; encrypted-media" title="YouTube video player" width="720" height="405">

此处的评论不再是最新的.

对于该rel选项,文档目前说:

此参数指示播放器在播放初始视频时是否应显示相关视频.

因此,当视频暂停时,这也不适用.

我正在尝试设置YouTube iframe API以播放质量较低的全高清视频.我的目标是节省移动设备的带宽并减少加载时间.我的HTML结构是经典的播放器div,还有消息的调试div.

HTML

<div id="debug"></div>

<div id="your_video_id">
  <div id="player"></div>
</div>

我试图调用setPlaybackQuality为玩家准备尽快,以避免移动用户浪费的缓冲时间(如本建议后).我也在"BUFFERING"和"PLAYING"状态下调用它.当质量改变时,调试内容将根据实际播放质量进行更新.

JAVASCRIPT

/* Trigger player ready */
function onPlayerReady(event) 
{
    player.setPlaybackQuality("small");
}

/* Detect playback quality changes */
function onQualityChange(event) 
{
    document.getElementById("debug").innerHTML = event.data;
}

/* Trigger player events */
function onPlayerStateChange(event) 
{
    if (event.data == YT.PlayerState.BUFFERING) 
    {
        player.setPlaybackQuality("small");
    }

    if (event.data == YT.PlayerState.PLAYING) 
    {
        player.setPlaybackQuality("small");
    }
}

该代码似乎在桌面上工作(调试正确设置为"小"),但它在移动(调试设置为"大",与Android 4.2.2测试)忽略.这有解决方案吗？

当我使用HTML5模式下的iframe api在youtube上嵌入youtube时,它仍会使用HTTP拉取实际流,这会生成混合内容警告.是否正确支持此用例？

我从2011年发现了这个讨论,这表明事实并非如此.但是我只是尝试使用HTTPS访问CDN服务器并且它有效 - 但是它返回了错误的证书(google.com而不是youtube.com的东西).

有没有人设法使用HTML5中的IFRAME API在HTTPS页面上嵌入视频而不会触发混合内容警告(即Chrome中带有黄色警告标志的锁定)？

谢谢

我正在尝试使用youtube-ios-player-helper库播放YouTube视频,但我在运行时遇到错误:

Received error rendering template: Error Domain=NSCocoaErrorDomain Code=258 "The operation couldn't be completed. (Cocoa error 258.)"

Run Code Online (Sandbox Code Playgroud)