更改 IFrame 的 innerHtml 上的视频属性
Posted
技术标签:
【中文标题】更改 IFrame 的 innerHtml 上的视频属性【英文标题】：Change video property on innerHtml of an IFrame 【发布时间】：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 来避免这些问题，但是是的，这很昂贵。只是一个想法，祝你好运！
【参考方案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 内容），我会接受这个答案。以上是关于更改 IFrame 的 innerHtml 上的视频属性的主要内容，如果未能解决你的问题，请参考以下文章