javascript - 需要帮助添加 playVideo();
问题描述
我不知道如何将这两段代码添加到 javascript 中。
我playVideo();
在这段代码中工作没有问题。
代码https://jsfiddle.net/n1szq76d/
剩下要添加到我正在处理的代码中的是这个。
videoPlayer.play();
和这个:
function onYouTubeIframeAPIReady() {
const wrapper = cover.parentElement ;
const frameContainer = wrapper.querySelector(".video");
videoPlayer.addPlayer(frameContainer);
}
这是我正在处理的代码。
代码:https ://jsfiddle.net/pbcmuj19/
看看我之前的代码playVideo();
,你能弄清楚它是如何添加到这个代码中的吗?
我一直很难做到这一点。
(function manageCover() {
"use strict";
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
}
const cover = document.querySelector(".jacket-left");
cover.addEventListener("click", coverClickHandler);
}());
(function manageCover() {
"use strict";
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
}
const cover = document.querySelector(".jacket-middle");
cover.addEventListener("click", coverClickHandler);
}());
(function manageCover() {
"use strict";
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
}
const cover = document.querySelector(".jacket-right");
cover.addEventListener("click", coverClickHandler);
}());
(function manageCover() {
"use strict";
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
hide(cover);
}
const cover = document.querySelector(".jacketc");
cover.addEventListener("click", coverClickHandler);
}());
(function manageCover() {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function hide(el) {
el.classList.add("hide");
}
function coverClickHandler(evt) {
const cover = evt.currentTarget;
const thewrap = cover.parentNode.querySelector(".wraph");
hide(cover);
show(thewrap);
}
const cover = document.querySelector(".jacketd");
cover.addEventListener("click", coverClickHandler);
}());
const videoPlayer = (function makeVideoPlayer() {
"use strict";
const players = [];
let playerVars = {};
let player = null;
const tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
function onPlayerReady(event) {
const player = event.target;
player.setVolume(100); // percent
}
let hasShuffled = false;
function onPlayerStateChange(event) {
const player = event.target;
if (!hasShuffled) {
player.setShuffle(true);
player.playVideoAt(0);
hasShuffled = true;
}
if (event.data === YT.PlayerState.PLAYING) {
for (let i = 0; i < players.length; i++) {
if (players[i] !== event.target) players[i].pauseVideo();
}
}
if (playerVars.loop && event.data === YT.PlayerState.ENDED) {
player.seekTo(playerVars.start);
}
}
function addPlayer(video, settings) {
playerVars = Object.assign({
videoId: video.dataset.id,
host: "https://www.youtube-nocookie.com",
events: {
"onReady": onPlayerReady,
"onStateChange": onPlayerStateChange
}
}, settings);
players.push(new YT.Player(video, playerVars));
}
function play() {
player.playVideo();
}
return {
addPlayer,
play
};
}());
function loadPlayer(opts) {
"use strict";
function show(el) {
el.classList.remove("hide");
}
function initPlayer(wrapper) {
const video = wrapper.querySelector(".video");
opts.width = opts.width || 198;
opts.height = opts.height || 198;
opts.controls = 1;
opts.rel = 0;
opts.enablejsapi = 1;
opts.iv_load_policy = 3;
opts.fs = 0;
opts.disablekb = 1;
function paramInOpts(settings, param) {
if (opts[param] !== undefined) {
settings[param] = opts[param];
}
return settings;
}
const settingsParams = ["width", "height", "videoid", "host"];
const settings = settingsParams.reduce(paramInOpts, {});
const playerVarsParams = ["autoplay", "cc_load_policy",
"controls", "disablekb", "end", "fs", "iv_load_policy",
"list", "listType", "loop", "playlist", "rel", "start"
];
settings.playerVars = playerVarsParams.reduce(paramInOpts, {});
videoPlayer.addPlayer(video, settings);
}
function coverClickHandler(evt) {
const wrapper = evt.currentTarget.nextElementSibling;
show(wrapper);
initPlayer(wrapper);
}
const cover = document.querySelector(opts.target);
cover.addEventListener("click", coverClickHandler);
}
const playlist = "0dgNc5S8cLI,mnfmQe8Mv1g,-Xgi_way56U,CHahce95B1g";
function onYouTubeIframeAPIReady() {
loadPlayer({
target: ".jacket-left",
width: 277,
height: 207
});
loadPlayer({
target: ".jacket-middle",
width: 277,
height: 207,
start: 4
});
loadPlayer({
target: ".jacket-right",
width: 277,
height: 207
});
loadPlayer({
target: ".jacketc",
width: 600,
height: 338,
loop: true,
playlist
});
loadPlayer({
target: ".alpha",
start: 0,
end: 280,
loop: true
});
loadPlayer({
target: ".beta",
start: 0,
end: 240,
loop: true
});
loadPlayer({
target: ".gamma",
start: 0,
end: 265,
loop: true
});
loadPlayer({
target: ".delta",
start: 4,
end: 254,
loop: true
});
loadPlayer({
target: ".epsilon",
start: 0,
end: 242,
loop: true
});
loadPlayer({
target: ".zeta",
start: 0,
end: 285,
loop: true
});
loadPlayer({
target: ".eta",
start: 23,
end: 312,
loop: true
});
loadPlayer({
target: ".theta",
start: 2
});
loadPlayer({
target: ".iota"
});
}
解决方案
推荐阅读
- ios - 将 WCSession 的委托设置为 nil
- google-maps - 给定这个 google place url,我如何获取地址和坐标?
- nginx - 当整个域已经重定向时,如何将页面重定向到另一个域?
- dijkstra - 我们可以在 Dijkstra 算法中添加转弯惩罚吗
- javascript - 获取请求在 html 中呈现未定义
- c# - 类型 T 的方法推断
- python - 我如何编写一个函数,它接受两个参数句子和单词,它返回相同单词的出现次数
- javascript - express.js(MYSQL)中的DELETE函数不删除行
- reactjs - 我很难为计时器编写 Jest 测试
- javascript - 即使预期和结果相同,使用 Mocha 测试 String.split() 也会失败