在 IFrame 的 innerHtml 上更改视频属性

Question

我有这个 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 循环播放视频，但每次重新启动时都会再次加载（视频因 "loading" youtube 的 gif 而冻结几秒钟）。

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

我发现如果我右键单击视频，它会显示一个 HTML5 视频框，其中有一些选项，其中之一是 "loop" 视频。如果我单击此选项，它会更改 iframe 的 innerHtml 上的 video 元素，向其添加 loop 属性。

它解决了我的问题。视频不再在每次循环时重新加载。我的问题是：如何使用 jQuery 执行此操作？有什么安全的方法可以在 iframe 的 innerHtml 的 video 元素上添加 loop 属性吗？

Answer 1

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

此代码不会将 "loop" 属性添加到 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>

在 IFrame 的 innerHtml 上更改视频属性

Change video property on innerHtml of an IFrame

html

video

iframe

jquery

youtube-iframe-api

在 IFrame 的 innerHtml 上更改视频 属性

Change video property on innerHtml of an IFrame

html

video

iframe

jquery

youtube-iframe-api

在 IFrame 的 innerHtml 上更改视频属性