我的嵌入 YouTube 视频有这个 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 视频框，其中之一是“循环播放”视频。如果我单击此选项，它会更改 iframe 的 innerHtml 上的 video 元素，向其添加 loop 属性。
它解决了我的问题。视频不再在每次循环时重新加载。我的问题是:如何使用 jQuery 执行此操作？是否有一些安全的方法可以在 iframe 的 innerHtml 的 video 元素上添加此 loop 属性？
最佳答案
您无法更改它，因为视频未在与您的代码相同的域中播放，这意味着您无法访问该 iframe 中的元素，但是您可以使用 youtube 的 JS API 来循环播放您的视频结束时。
此代码不会将“循环”属性添加到 <video> iframe 中的元素，但它会为您提供所需的循环功能(无需重新加载视频，只需从头开始播放):
<!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>关于jquery - 更改 IFrame 的 innerHtml 上的视频属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37586319/