2

问题：

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

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

  1. 我在 Chromeless 播放器上几乎没有发现任何教程内容，而且对于 Javascript 来说相对较新，我无法理解此处提供的文档以将其应用于我的问题。

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

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

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

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

问题重述：

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

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

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

已知文档：

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 观看次数，答案不足]： 如何在不添加控件的情况下嵌入 youtube 无铬播放器？

[1.4K 浏览量，答案不足]： 如何制作 YouTube 无铬播放器？

4

2 回答 2

3

在您的 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

于 2013-12-11T13:55:26.083 回答
0

Youtube 不会让您摆脱一切，但您可以尝试http://mediaelementjs.com/ - 它允许您控制控件的显示，并在需要时隐藏它们。

于 2016-10-11T11:42:23.867 回答