javascript - 1 单击后未显示 YouTube 视频
问题描述
为什么 YouTube 视频需要点击 2 次才能显示?
我将如何修复此代码以便玩家立即打开?需要点击 2 次鼠标才能打开。我将如何解决这个问题?视频应该立即打开,但它们没有,怎么来的,我怎样才能让它们打开?
这段代码应该可以工作,而不是出于某种原因。我无法弄清楚出了什么问题,以及如何让它正常工作。
视频应该出现在 1 次点击,而不是 2 次。我不知道如何解决这个问题。
代码:
https://jsfiddle.net/37q96vuj/
const videoPlayer = (function makeVideoPlayer() {
"use strict";
const players = [];
function loadPlayer() {
const tag = document.createElement("script");
tag.src = "https://www.youtube.com/player_api";
const firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}
function onPlayerReady(event) {
const player = event.target;
player.setVolume(50); // percent
}
function onPlayerStateChange(event) {
const player = event.target;
if (event.data === YT.PlayerState.PLAYING) {
const otherVideos = (video) => video !== player;
const pauseVideo = (video) => video.pauseVideo();
players.filter(otherVideos).forEach(pauseVideo);
}
const playerVars = player.b.b.playerVars;
if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
player.seekTo(playerVars.start);
}
}
function addVideo(video, desiredPlayerVars) {
const videoId = video.getAttribute("data-id");
const defaultPlayerVars = {
autoplay: 1,
controls: 1,
showinfo: 1,
rel: 0,
iv_load_policy: 3,
cc_load_policy: 0,
fs: 0,
disablekb: 1
};
const playerVars = Object.assign(defaultPlayerVars, desiredPlayerVars);
players.push(new YT.Player(video, {
width: 200,
height: 200,
videoId: videoId,
playerVars,
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
}
}));
}
function init(opts) {
loadPlayer();
addVideo(opts.video);
}
return {
init
};
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init({
video: wrapper.querySelector(".video"),
playerVars: {
start: 900,
end: 1200
}
});
}
const cover = document.querySelector(".playa");
cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init({
video: wrapper.querySelector(".video"),
playerVars: {
start: 30,
end: 50
}
});
}
const cover = document.querySelector(".playb");
cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init({
video: wrapper.querySelector(".video"),
playerVars: {
start: 30,
end: 50
}
});
}
const cover = document.querySelector(".playc");
cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init({
video: wrapper.querySelector(".video"),
playerVars: {
start: 30,
end: 50
}
});
}
const cover = document.querySelector(".playd");
cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init({
video: wrapper.querySelector(".video"),
playerVars: {
start: 30,
end: 50
}
});
}
const cover = document.querySelector(".playe");
cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init({
video: wrapper.querySelector(".video"),
playerVars: {
start: 30,
end: 50
}
});
}
const cover = document.querySelector(".playf");
cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init({
video: wrapper.querySelector(".video"),
playerVars: {
start: 30,
end: 50
}
});
}
const cover = document.querySelector(".playg");
cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init({
video: wrapper.querySelector(".video"),
playerVars: {
start: 30,
end: 50
}
});
}
const cover = document.querySelector(".playh");
cover.addEventListener("click", coverClickHandler);
}());
(function iife() {
"use strict";
const show = (el) => el.classList.remove("hide");
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
videoPlayer.init({
video: wrapper.querySelector(".video"),
playerVars: {
start: 30,
end: 50
}
});
}
const cover = document.querySelector(".playi");
cover.addEventListener("click", coverClickHandler);
}());