youtube-api - iframe 上 loop=1 的行为不一致
问题描述
我有一个非常令人沮丧的经历,试图让视频使用基本的 iframe 持续循环。我没有通过代码与 API 交互。我只是有一个带有autoplay=1,mute=1,loop=1
. 我尝试过使用独立视频,也尝试过播放列表(使用list=
[ID] ,listType=playlist
),但我一直遇到同样的问题。有时播放器会循环播放视频,有时则不会。每次我认为我已经弄清楚并准备好部署应用程序时,我都会再次对其进行测试,但视频无法循环播放。
视窗 10
铬 71.0.3578.98
角 6.0.3
解决方案
您可以选择以下任何选项:
检查我的回答,我在其中描述了如何设置 URL 以创建播放列表(使用单个
videoId
)并模拟循环。使用 YouTube iframe Player API 设置您的视频和(一旦视频结束),调用
playVideo()
函数播放当前视频 = 因此,创建一个循环。
这是代码: - 不幸的是,你看不到它在这里工作,但是,你可以看到工作的 jsfiddle 1
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Variables of the divs (where the YouTube iframe will load):
var player;
function onYouTubeIframeAPIReady() {
// Div player:
player = new YT.Player('player', {
height: '360',
width: '640',
videoId: 'xPCZEoGJi_4',
playerVars: {
'autoplay': 1,
'loop': 1,
'mute': 1
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 5. The API calls this function when the player's state changes.
function onPlayerStateChange(event) {
// When the video ends, it will play again.
// See: https://developers.google.com/youtube/iframe_api_reference?hl=en#Events
if (event.data == YT.PlayerState.ENDED) {
player.playVideo();
}
}
// Div "player" - The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<div id="player"></div>
1如果视频(一旦加载)没有播放,您必须手动播放视频 - 这是由于 jsfiddle 的某种限制。
推荐阅读
- spring-cloud-gateway - Spring Cloud 请求速率限制器 - 无法配置每 10 分钟的请求
- arrays - 将 scaledFeatures 列转换为 pyspark 中的数据框
- c# - 在 ASP.NET Core 3.1 REST API 中接受表单数据
- c# - 所有连接的应用程序都需要实体框架连接字符串
- c# - 如何在开发时动态更新枚举
- interaction - Mitel neo 交互录音
- javascript - 保存用户点击按钮的次数
- css - 从 VS 发布时丢失空间
- android - 我们如何在 Layout 内部创建一个带有 Recycler 视图的透明 Fragment Layout
- git - 在稀疏签出时如何从 git 存储库中删除/覆盖文件?