我在Episerver中构建了一个块，当配置并添加到页面时，该块将播放Youtube视频。我正在使用Youtube提供的iframe_api。原因是我想添加自己的控件并在事件部分中设置它们的功能。效果很好，但是当我在页面中添加其中两个代码块时，它将对Youtube api进行2次调用，这意味着第二个代码块很好，但是在第一个代码块中，视频将停止播放。
我认为我将不得不以某种方式创建这些播放器的数组，然后在onYouTubeIframeAPIReady函数中对它们进行循环，但是不确定从哪里开始。
这是我的视频块视图代码：
@using ImageResizer
@using ImageResizer.Plugins.EPiServer
@using Navico.Global.Web.Infrastructure.Enums
@using Navico.Global.Web.Infrastructure.Rendering
@model Navico.Global.Web.Features.Global.Shared.Blocks.AmbientVideoBlock
@{
var nameWithoutSpecialCharactersAndNumbers = Navico.Global.Web.Infrastructure.Extensions.StringExtensions.RemoveSpecialCharactersAndNumbers(Model.GetName());
}
<div class="c-ambient-video-block fade @Model.GetName() ">
<script async src="https://www.youtube.com/iframe_api"></script>
@{
bool showPlay = true;
}
@if (Model.DisplayVideo == VideoDisplay.Rectangle)
{
<div class="c-ambient-video-block__video-container">
<div class="c-ambient-video-block__youtube-player-background" id="@Model.GetName()"></div>
@if (Model.Image != null && Model.ShowControls)
{
<img id="videoImage" src="@(Html.ResizeImage(Model.Image).Scale(ScaleMode.Both).FitMode(FitMode.Max))" class="c-ambient-video-block__still-image">
<div id="overLayText" style="width: 500px;" class="c-ambient-video-block__overlayText @(Model.OverLayTextPosition == OverLayTextPosition.BottomLeft ? "c-ambient-video-block--bottom-left" : "") @(Model.OverLayTextPosition == OverLayTextPosition.BottomRight ? "c-ambient-video-block--bottom-right" : "") @(Model.OverLayTextPosition == OverLayTextPosition.TopLeft ? "c-ambient-video-block--top-left" : "") @(Model.OverLayTextPosition == OverLayTextPosition.TopRight ? "c-ambient-video-block--top-right" : "") @(Model.OverLayTextPosition == OverLayTextPosition.Centered ? "c-ambient-video-block--centered" : "")">@Model.VideoOverlayText</div>
}
@if (Model.ShowControls)
{
<i id="playPauseButton" style="color:@(Model.VideoButtonColour == VideoButtonColour.White ? "White" : "Black");" class="zmdi zmdi-play-circle-outline zmdi-hc-4x c-ambient-video-block__play-image c-ambient-video-block--playpause-centered @(Model.OverLayButtonPosition == VideoButtonPosition.BottomLeft ? "c-ambient-video-block--playpause-bottom-left" : "") @(Model.OverLayButtonPosition == VideoButtonPosition.BottomRight ? "c-ambient-video-block--playpause-bottom-right" : "") "></i>
<i id="muteButton" style="visibility:hidden;color:@(Model.VideoButtonColour == VideoButtonColour.White ? "White" : "Black");" class="zmdi zmdi-volume-off zmdi-hc-4x c-ambient-video-block__mute-image @(Model.OverLayButtonPosition == VideoButtonPosition.BottomLeft ? "c-ambient-video-block--mute-bottom-left" : "") @(Model.OverLayButtonPosition == VideoButtonPosition.BottomRight ? "c-ambient-video-block--mute-bottom-right" : "") "></i>
}
</div>
}
else
{
<div class="c-ambient-video-block__video-container-square">
<div class="c-ambient-video-block__youtube-player-background-square" id="@Model.GetName()"></div>
</div>
}
<script>
function onYouTubeIframeAPIReady() {
var player;
var videoImage = document.getElementById("videoImage");
var overLayText = document.getElementById("overLayText");
var pausedTime;
var showPlay = @showPlay.ToString().ToLower();
var wasPaused = false;
var @nameWithoutSpecialCharactersAndNumbers = new YT.Player("@Model.GetName()", {
videoId: '@Model.VideoId',
width: '100%',
height:'100%' ,
playerVars: {
autoplay: @(Model.DisplayVideo == VideoDisplay.Square || !Model.ShowControls ? 1 : 0),
controls: 0,
showinfo: 0,
frameborder:0,
modestbranding: 1,
loop: 1,
fs: 0,
cc_load_policy: 0,
iv_load_policy: 3,
autohide: 0,
playlist: '@Model.VideoId'
},
events: {
onReady: function (e) {
var YTP = e.target;
e.target.mute();
var sc = ('@Model.ShowControls' === 'True');
var display = '@(Model.DisplayVideo == VideoDisplay.Square)' === 'True';
if (sc && !display) {
var muteButton = document.getElementById("muteButton");
muteButton.addEventListener("click", function () {
if (YTP.isMuted()) {
e.target.unMute();
muteButton.classList.remove("zmdi-volume-off");
muteButton.classList.add("zmdi-volume-mute");
} else {
e.target.mute();
muteButton.classList.remove("zmdi-volume-mute");
muteButton.classList.add("zmdi-volume-off");
}
});
var bottomLeft = '@(Model.OverLayButtonPosition == VideoButtonPosition.BottomLeft)' === 'True';
var bottomRight = '@(Model.OverLayButtonPosition == VideoButtonPosition.BottomRight)' === 'True';
var playPauseButton = document.getElementById("playPauseButton");
playPauseButton.addEventListener("click", function () {
if (showPlay == true) {
playPauseButton.classList.remove("c-ambient-video-block--playpause-centered");
playPauseButton.classList.add((bottomLeft ? "c-ambient-video-block--playpause-bottom-left" : "notbottomleft"));
playPauseButton.classList.add((bottomRight ? "c-ambient-video-block--playpause-bottom-right" : "notbottomright"));
playPauseButton.classList.remove("zmdi-play-circle-outline");
playPauseButton.classList.add("zmdi-pause-circle-outline");
if (bottomLeft) {
playPauseButton.style.marginLeft = "1%";
} else {
playPauseButton.style.marginLeft = "90%";
}
var playerBackground = document.getElementById("@Model.GetName()");
playerBackground.style.zIndex = 0;
videoImage.style.visibility = "hidden";
overLayText.style.visibility = "hidden";
var muteButton = document.getElementById("muteButton");
muteButton.style.visibility = "visible";
if (wasPaused) {
YTP.seekTo(pausedTime);
YTP.playVideo();
} else {
var remains = YTP.getDuration() - YTP.getCurrentTime();
if (this.rewindTO)
clearTimeout(this.rewindTO);
this.rewindTO = setTimeout(function () {
YTP.seekTo(0);
}, (remains - 0.1) * 1000);
YTP.playVideo();
}
showPlay = false;
window.showPlay = false;
} else {
YTP.pauseVideo();
playPauseButton.style.marginLeft = "46%";
videoImage.style.visibility = "visible";
overLayText.style.visibility = "visible";
pausedTime = YTP.getCurrentTime();
wasPaused = true;
showPlay = true;
window.showPlay = true;
playPauseButton.classList.remove("zmdi-pause-circle-outline");
playPauseButton.classList.add("zmdi-play-circle-outline");
playPauseButton.classList.add("c-ambient-video-block--playpause-centered");
playPauseButton.classList.remove((bottomLeft ? "c-ambient-video-block--playpause-bottom-left" : "notbottomleft"));
playPauseButton.classList.remove((bottomRight ? "c-ambient-video-block--playpause-bottom-right" : "notbottomright"));
var muteButton = document.getElementById("muteButton");
muteButton.style.visibility = "hidden";
var playerBackground = document.getElementById("@Model.GetName()");
playerBackground.style.zIndex = -2;
}
});
} else {
var playerBackground = document.getElementById("@Model.GetName()");
playerBackground.style.zIndex = 0;
}
}
}
});
}
</script>
</div>
是否有人通过Episerver或任何其他使用块构建页面的CMS遇到了这种特殊情况？任何帮助将不胜感激。