Html Youtube iframe“循环”不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25779966/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Youtube iframe "loop" doesn't work
提问by Seal Blue
I tried to use the YouTube player demoto generate the code necessary for my video to autoplay and loop itself. But only the autoplay works, it doesn't loop, and the demo-video doesn't work either. Here is the code I've used.
我尝试使用YouTube 播放器演示来生成我的视频自动播放和循环播放所需的代码。但只有自动播放有效，它不会循环播放，演示视频也不起作用。这是我使用过的代码。
<iframe class="embed-responsive-item" id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?&autoplay=1&loop=1&rel=0&showinfo=0&color=white&iv_load_policy=3" frameborder="0" allowfullscreen>
</iframe>
回答by K K
Try adding the playlistparameter along with the loop. For playlist, set it's value as the current video id.
尝试将playlist参数与循环一起添加。对于播放列表，将其值设置为当前视频 ID。
<iframe class="embed-responsive-item"id="ytplayer" type="text/html" width="640" height="360" src="https://www.youtube.com/embed/M7lc1UVf-VE?&autoplay=1&loop=1&rel=0&showinfo=0&color=white&iv_load_policy=3&playlist=M7lc1UVf-VE"
frameborder="0" allowfullscreen></iframe>
Currently, the loop parameter only works in the AS3 player when used in conjunction with the playlist parameter. To loop a single video, set the loop parameter value to 1 and set the playlist parameter value to the same video ID already specified in the Player API URL:
目前，loop 参数仅在 AS3 播放器中与播放列表参数结合使用时才有效。要循环播放单个视频，请将循环参数值设置为 1，并将播放列表参数值设置为已在播放器 API URL 中指定的相同视频 ID：
http://www.youtube.com/v/VIDEO_ID?version=3&loop=1&playlist=VIDEO_ID
Reference:https://developers.google.com/youtube/player_parameters#loop
参考：https: //developers.google.com/youtube/player_parameters#loop
回答by Abhishek Garg
Using in react nativelike this, make sure to use same video ID value for playlist as well.
像这样在react native 中使用，确保对播放列表也使用相同的视频 ID 值。
for e.g if video id is SpongeBOBthen url will be like this :
例如，如果视频 ID 是 SpongeBOB，那么 url 将是这样的：
https://www.youtube.com/embed/SpongeBOB?playlist=SpongeBOB&loop=1
https://www.youtube.com/embed/ SpongeBOB?playlist= SpongeBOB&loop=1
below is implementation in react native webview
下面是在react native webview 中的实现
<WebView
javaScriptEnabled={true}
domStorageEnabled={true}
mediaPlaybackRequiresUserAction={true}
style={{ height:180, width:300,alignSelf:"center",alignContent:"center"}}
source={{uri: 'https://www.youtube.com/embed/qD101Xlc5uw?playlist=qD101Xlc5uw&loop=1' }}
/>
回答by Lana ??
i just figure out: you need to have playlist="" to use loop
我只是想通了：你需要播放列表=“”来使用循环
src="https://www.youtube.com/embed/peSfCy7HFrM?playlist=peSfCy7HFrM&loop=1;rel=0&autoplay=1&controls=0&showinfo=0" frameborder="0" allowfullscreen>
src="https://www.youtube.com/embed/peSfCy7HFrM?playlist=peSfCy7HFrM&loop=1;rel=0&autoplay=1&controls=0&showinfo=0" frameborder="0" allowfullscreen>
回答by LuH
Accepted answer didn't work for me either. Working workaround for September 2018 (bonus: set width and height by CSS for #yt-wrapinstead of hard-coding it in JS):
接受的答案对我也不起作用。2018 年 9 月的工作解决方法（奖励：通过 CSS 设置宽度和高度，#yt-wrap而不是在 JS 中对其进行硬编码）：
<div id="yt-wrap">
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="ytplayer"></div>
</div>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
width: '100%',
height: '100%',
videoId: 'VIDEO_ID',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
player.mute(); // comment out if you don't want the auto played video muted
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.ENDED) {
player.seekTo(0);
player.playVideo();
}
}
function stopVideo() {
player.stopVideo();
}
</script>
回答by Zakir Sajib
'playlist': '<?php echo $youtube_video ?>'
inside playerVars.
在 playerVars 中。
For example a full code:
例如完整代码：
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height:'100%',
width: '100%',
fitToBackground: true,
videoId: '<?php echo $youtube_video ?>',
playerVars: {
'autoplay': 1,
'controls': 0,
'autohide':1,
'enablejsapi':1,
'loop':1,
'disablekb':1,
'fs': 0,
'modestbranding': 0,
'showinfo': 0,
'color': 'white',
'theme': 'light',
'rel':0 ,
'playlist': '<?php echo $youtube_video ?>'
},
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
player.mute();
player.setVolume(0);
//player.setSize(1920, 1080);
player.setLoop(true);
player.setPlaybackQuality('hd1080');
}
Your Html code:
您的 HTML 代码：
<div id="player"></div>
If you want to keep video in a variable use this:
如果要将视频保存在变量中，请使用以下命令：
<?php $youtube_video='C0DPdy98e4c';?>
回答by Steve Cottrell
Here's another working example of an embedded and looping playlist:
这是嵌入和循环播放列表的另一个工作示例：
<iframe width="1019" height="573" src="https://www.youtube.com/embed/videoseries?list=PLDz-3V1_TIyhVYiJeGdqc9bjpAf9L9Zfq&loop=1" frameborder="0" allow="accelerometer; autoplay " ;"="" =""="" encrypted-media;="" gyroscope;="" picture-in-picture"="" allowfullscreen=""></iframe>
