为什么我的 YouTube Iframe API 视频关闭了?
Why my YouTube Iframe API video turns off?
我遇到 YouTube Iframe API 的问题。我有一个 Slick 滑块,其中包含来自 YouTube 的图片和视频。一张幻灯片 - 一段视频或一张图片。 Slick 有圆点并且可以拖动。我正在尝试编写 功能:视频在其幻灯片处于活动状态时开始播放 。无需单击 'play' 按钮 - 它会在我自动打开幻灯片时启动。 我的问题是我的视频开始播放了,是的。但它也会在一秒钟后关闭。 并且它不会在换幻灯片时自动播放。谁能告诉我我做错了什么?提前致谢。
<div class="video-banner" id="{{ yt }}" data-ytid="{{ yt }}"></div>
(function($){
window.onYouTubeIframeAPIReady = function() {
$('.video-banner').each(function() {
yt_id = $(this).data("ytid");
playerInfo.push({ "id": yt_id, 'videoId': yt_id, 'slick_id': $(this).closest('.slick-slide').data('slick-index') });
});
for (var i = 0; i < playerInfo.length; i++) {
var curplayer = createPlayer(playerInfo[i]);
players[i] = curplayer;
}
}
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
function createPlayer(playerInfo) {
return new YT.Player(playerInfo.id, {
videoId: playerInfo.videoId,
host: 'https://www.youtube.com',
width: '100%',
height: 500,
playerVars: {
autoplay: 0,
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
},
});
}
function onPlayerReady(event) {
if (window.location.href.indexOf("?yt=") > -1) {
if (getParameterByName('yt') == event.target.getVideoData().video_id) {
event.target.playVideo();
}
}
}
$(slider).on('afterChange', function(event, slick, currentSlide, nextSlide) {
for (var i = 0; i < playerInfo.length; i++) {
if (playerInfo[i].slick_id == currentSlide) {
if (typeof players[i].playVideo === "function")
players[i].playVideo();
}
}
});
});
}(jQuery))
问题是视频没有静音。浏览器有时会在没有静音的情况下阻止 iframe。
另一方面:我在 Chrome 上工作,参见:YouTube-iFrame-API doesn't work on Chrome v.72.
我遇到 YouTube Iframe API 的问题。我有一个 Slick 滑块,其中包含来自 YouTube 的图片和视频。一张幻灯片 - 一段视频或一张图片。 Slick 有圆点并且可以拖动。我正在尝试编写 功能:视频在其幻灯片处于活动状态时开始播放 。无需单击 'play' 按钮 - 它会在我自动打开幻灯片时启动。 我的问题是我的视频开始播放了,是的。但它也会在一秒钟后关闭。 并且它不会在换幻灯片时自动播放。谁能告诉我我做错了什么?提前致谢。
<div class="video-banner" id="{{ yt }}" data-ytid="{{ yt }}"></div>
(function($){
window.onYouTubeIframeAPIReady = function() {
$('.video-banner').each(function() {
yt_id = $(this).data("ytid");
playerInfo.push({ "id": yt_id, 'videoId': yt_id, 'slick_id': $(this).closest('.slick-slide').data('slick-index') });
});
for (var i = 0; i < playerInfo.length; i++) {
var curplayer = createPlayer(playerInfo[i]);
players[i] = curplayer;
}
}
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, '\$&');
var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, ' '));
}
function createPlayer(playerInfo) {
return new YT.Player(playerInfo.id, {
videoId: playerInfo.videoId,
host: 'https://www.youtube.com',
width: '100%',
height: 500,
playerVars: {
autoplay: 0,
},
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
},
});
}
function onPlayerReady(event) {
if (window.location.href.indexOf("?yt=") > -1) {
if (getParameterByName('yt') == event.target.getVideoData().video_id) {
event.target.playVideo();
}
}
}
$(slider).on('afterChange', function(event, slick, currentSlide, nextSlide) {
for (var i = 0; i < playerInfo.length; i++) {
if (playerInfo[i].slick_id == currentSlide) {
if (typeof players[i].playVideo === "function")
players[i].playVideo();
}
}
});
});
}(jQuery))
问题是视频没有静音。浏览器有时会在没有静音的情况下阻止 iframe。 另一方面:我在 Chrome 上工作,参见:YouTube-iFrame-API doesn't work on Chrome v.72.