更改 IFrame 的 innerHtml 上的视频属性答案

【问题标题】：Change video property on innerHtml of an IFrame更改 IFrame 的 innerHtml 上的视频属性
【发布时间】：2016-10-01 20:43:55
【问题描述】：

我有这个 iframe 用于我的嵌入 youtube 视频：

<iframe class="event-video" src="http://www.youtube.com/embed/myvideoid?showinfo=0&autoplay=1&loop=1&playlist=myvideoid&controls=0&modestbranding=1&iv_load_policy=3"></iframe>

我使用loop=1 循环播放视频，但每次重新启动时都会再次加载（视频会因 youtube 的“加载”gif 而冻结几秒钟）。

因为我希望我的视频连续循环（无缝），所以这个解决方案并不让我满意。

我发现，如果我右键单击视频，它会显示一个带有一些选项的 HTML5 视频框，其中一个用于“循环”视频。如果我单击此选项，它会更改 iframe 的 innerHtml 上的 video 元素，并为其添加 loop 属性。

它解决了我的问题。视频不再在每个循环中重新加载。我的问题是：我怎样才能用 jQuery 做到这一点？有什么安全的方法可以在iframe 的innerHtml 的video 元素上添加这个loop 属性吗？

【问题讨论】：

SOP 会阻止您以任何方式进入 iframe。我建议您更愿意研究基于 JS 的播放器及其 API - 看看是否可以将 video 元素直接渲染到主文档的 DOM 中，以便您也可以直接操作它。
另一个想法是一起跳过 YouTube 并使用标准的 HTML5 视频。显然，这意味着带宽成本和更长的加载时间，但它会让您完全控制视频。您可以使用 CDN 来避免这些问题，但是是的，这很昂贵。只是一个想法，祝你好运！

标签： jquery html video iframe youtube-iframe-api

【解决方案1】：

您无法更改这一点，因为视频不是在与您的代码相同的域中播放的，这意味着您无法访问该 iframe 中的元素，但是您可以使用 youtube 的 JS API 来循环您的结束时的视频。

此代码不会将“循环”属性添加到 iframe 内的 <video> 元素，但它会为您提供您正在寻找的循环功能（无需重新加载视频，只需从头开始播放）：

    <!doctype html>
    <html lang="en">
        <head>
            <meta charset="utf-8">
            <title>Test</title>
            <script src="http://www.youtube.com/player_api"></script>
        </head>
        <body>
        <div id="player"></div>
        <script type="text/javascript">
            var player;
            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                    height: '390',
                    width: '640',
                    videoId: 'M4Xrh8OP1Jk',
                    events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                    }
                });
            }

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

            function onPlayerStateChange(event) {
                console.log(event.data)
                if (event.data == YT.PlayerState.ENDED) {
                    event.target.playVideo();
                }
            }
        </script>
  </body>
</html>

【讨论】：

谢谢。它可以工作，但不幸的是，当视频“重新启动”时它会“闪烁”。它不是 100% 无缝的，也许是 99%，但那 1% 仍然困扰着我。但由于我的问题是关于是否可能（修改 iframe 内容），我会接受这个答案。