简单的 Chromeless Youtube 嵌入 - 如何？

Question

问题：

请有人准确、清楚地解释一下，我如何在我的页面中嵌入一个简单的 Chromeless Youtube 播放器，并动态控制该播放器的来源？

问题解释： 我正在处理一个页面，我需要在其中嵌入一个完全没有控件的 youtube 视频。经过一番研究，我发现 Chromeless 视频播放器就是这样。但这是我的问题：

1. 我几乎没有发现关于 Chromeless 播放器的教程内容，而且对于 Javascript 来说相对较新，我在理解 here 提供的文档时遇到了困难，我可以将其应用于我的问题。

2. 我需要根据用户交互更改此视频的来源。我最初对 youtube javascript API 还不满意，只是通过静态 iframe 嵌入视频，并通过 JQuery 使用 .attr("src",nameofsource) 更改 iframe 的源，而不是使用 javascript 加载嵌入，只更改来源。

这没问题，我可以通过 youtube 接受的附加到嵌入 url 的参数隐藏大部分控件，但是绝对没有办法使用该方法使视频静音，而且代码很丑陋，而且我对此并不满意。

所以我已经开始嵌入视频并通过 API 更改源，效果很好，视频静音，并且很好地更改了源，但现在我面临显示控件的问题。

根据我在 Chromeless Player 上看到的文档，我没有看到这只是向 javascript YT API 添加参数的问题，而是完全不同的东西。

问题重述：

那么请有人准确、清楚地解释一下，我如何在我的页面中嵌入一个简单的 Chromeless Youtube 播放器，并动态控制该播放器的来源？

我在 Internet 上找不到任何文档来提供令人满意的、全面的（对新的 javascript 开发人员友好）说明如何执行此操作。作为一名新开发人员，我查看了文档，但我还没有足够的经验来有效地“使用手册”。

我在 StackOverflow 上发现了一些关于无铬播放器的问题，但没有一个问题能得到令人满意的答案。

已知文档：

https://developers.google.com/youtube/flash_api_reference

https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

http://viget.com/inspire/youtube-chromeless-video-jquery-plugin

已知的相关 StackOverflow 问题但答案不充分：

[23K 次观看，答案不充分]： How do I go about embedding a youtube chromeless player without adding controls?

[1.4K 观看次数，答案不充分]： How to make a YouTube chromeless player?

Answer 1

Youtube 不会让你摆脱一切，但你可以试试 http://mediaelementjs.com/ - 它允许你控制控件的显示，如果你想隐藏它们。

Answer 2

在您的 HTML 中，您需要：

<script src="https://www.youtube.com/iframe_api"></script>
<div id="player"></div>

然后在你的 JavaScript 中

var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        videoId: 'OJpQgSZ49tk',
        playerVars: {
            controls: 0,
            autoplay: 1,
            disablekb: 1,
            enablejsapi: 1,
            iv_load_policy: 3,
            modestbranding: 1,
            showinfo: 0
        }
    });
}

onYouTubeIframeAPIReady 函数在加载完成后由 YouTube 的 API 调用。其他参数和其他示例可以在文档中找到：https://developers.google.com/youtube/iframe_api_reference