Question

我为我的嵌入视频播放了iframe：

<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视频框，其中一个用于“循环”视频。如果我点击此选项，它会将video添加iframe属性的innerHtml上的loop元素更改为该文件。

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

Answer 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>

更改IFrame的innerHtml上的视频属性

1 个答案: