交互式 Twitch 播放器不能仅使用选项中的视频 ID答案

【问题标题】：Interactive Twitch player doesn’t work with just video Id in the options交互式 Twitch 播放器不能仅使用选项中的视频 ID
【发布时间】：2018-12-10 03:12:47
【问题描述】：

我正在使用 Twitch API 来在我的网站中嵌入交互式视频播放器，并使用 Javascript 中的 Twitch API 与之交互。

我使用这个代码：

 var options = {
        width: 560,
        height: 315,
        autoplay: true,
        control: true,  
        video: "ZealousPowerfulHyenaArsonNoSexy"  
    };
    gPlayer = new Twitch.Player("youtubeplayer", options);

当我运行代码时出现错误：

t.channel 没有实现

当我添加一个频道时，它可以工作。根据guide，我不需要频道即可显示交互式视频剪辑。

我从指南中引用：“频道 - 或 - 视频 - 或 - 收藏”。

如何在不使用频道信息的情况下进行工作？

【问题讨论】：

标签： javascript twitch twitch-api

【解决方案1】：

问题是 videos 和 clips 不等于 Twitch，无论它们应该是多少。例如，这适用于类似于您想要实现的 VOD，但在使用剪辑 slug 时，它不会加载任何内容。

<script src="http://player.twitch.tv/js/embed/v1.js"></script>
<div id="youtubeplayer"></div>
<script type="text/javascript">
  var options = {
    width: 800,
    height: 500,
    video: "279365619"
  };
  var player = new Twitch.Player("youtubeplayer", options);
  player.setVolume(0.5);
</script>

请注意，sn-p 不会在此处显示结果，but I made a CodePen as well。

在 video 属性下，我有 Twitch 所指的 video id 而您使用的是 clip slug，它们是'不相等或可互换。 video 属性请求一个 number 而我们剪辑的 slug 是一个 string。

嵌入剪辑不同于嵌入直播或 VOD。嵌入式剪辑播放器使用一组不同的查询参数，不支持 JavaScript 交互式嵌入。

他们在这里说的是，不幸的是，剪辑目前没有交互式框架，per their roadmap for the Helix introduction，这似乎不太可能改变。

因此，就目前而言，无需使用第三方或创建您自己的交互式框架（我已经为剪辑这样做了，但直到我放假回家后才能获得示例），您将只能使用他们平淡无奇的 iFrame。

<iframe src="https://clips.twitch.tv/embed?clip=ZealousPowerfulHyenaArsonNoSexy" height="315" width="560" frameborder="1" scrolling="no" allowfullscreen="true">
</iframe>

再次出于安全原因，sn-p 不会在此处运行，但我已包含both options in my CodePen example for you。我希望这有助于您澄清，并且我会在可能的情况下将我的自定义叠加层的示例发回该 CodePen。

【讨论】：