Недавно мне пришлось столкнуться с той же проблемой.Слайдер Slick с видеоэлементами, который должен начинаться после смены слайдов и останавливаться до смены слайдов.
Прежде всего, некоторые Основы: вы не можете автоматически воспроизводить видео со звуком без взаимодействия с пользователем в самых современных браузерах.Даже метод javascript .play () не будет работать, если у Видео есть звук.
Чтобы добиться того, чтобы ваше видео воспроизводилось при смене слайдов, его необходимо отключить.Есть некоторые решения и обходные пути для этой проблемы.
Вместо использования обработчика .on(click) вы должны прослушивать скользкие события до и после изменения.Чтобы добавить управление видео и позволить slick обрабатывать события
$( document ).ready(function() {
VideoController.init();
var $slider = $('.slider');
$slider.on("beforeChange", function (
event,
slick,
currentSlide,
nextSlide
) {
var $currentSlide = $(slick.$slides[currentSlide]);
VideoController.stopVideo($currentSlide);
});
$slider.on("afterChange", function (event, slick, currentSlide) {
var $currentSlide = $(slick.$slides[currentSlide]);
VideoController.playVideo($currentSlide);
});
});
После этого вам нужно заставить ваш видеоконтроллер выполнить остальную часть работы.Wistia предоставляет библиотеку JS, которую вы можете использовать, но я не могу представить, как это сделать.
Решение, которое я могу предоставить, работает без дополнительного контроллера и использует почтовые сообщения для управления видеоэлементами.
var VideoController = (function () {
function init() {
}
// POST commands to YouTube or Vimeo API
function postMessageToPlayer(player, command) {
console.log('postMessageToPlayer');
if (player == null || command == null) return;
player.contentWindow.postMessage(JSON.stringify(command), "*");
}
function playVideo($ancestor) {
console.log('playVideo');
var player, video;
if ($ancestor.find('iframe').length) {
console.log('found Video');
player = $ancestor.find('iframe').get(0);
if ($('html').hasClass('is-muted')) {
postMessageToPlayer(player, {
"event": "command",
"func": "mute"
});
} else {
postMessageToPlayer(player, {
"event": "command",
"func": "unMute"
});
}
postMessageToPlayer(player, {
"event": "command",
"func": "playVideo"
});
} else if ($ancestor.find('video').length) {
video = $ancestor.find("video").get(0);
video.play();
} else {
console.log('no Video');
}
}
// Stops video and will play from start on resume
function stopVideo($ancestor) {
console.log('stopVideo');
var player, video;
if ($ancestor.find("iframe").length) {
player = $ancestor.find("iframe").get(0);
postMessageToPlayer(player, {
"event": "command",
"func": "stopVideo"
});
} else if ($ancestor.find("video").length) {
video = $ancestor.find("video").get(0);
video.pause();
// Check if the Video is loade, ohterwise it will break your js espacially in ie11
if (video.readyState === 4) {
video.currentTime = 0;
}
}
}
// pauses video to resume
function pauseVideo($ancestor) {
console.log('pauseVideo');
var player, video;
if ($ancestor.find("iframe").length) {
player = $ancestor.find("iframe").get(0);
postMessageToPlayer(player, {
"event": "command",
"func": "pauseVideo"
});
} else if ($ancestor.find("video").length) {
video = $ancestor.find("video").get(0);
video.pause();
}
}
return {
init: init,
postMessageToPlayer: postMessageToPlayer,
playVideo: playVideo,
stopVideo: stopVideo,
pauseVideo: pauseVideo
}
})();
На каждом слайде выполняется поиск видеоэлемента, и в соответствии с его типом можно управлять воспроизведением.Этот видеоконтроллер отправил сообщение в iframe, чтобы запустить воспроизведение встроенного проигрывателя или JS-метода .play () для html-видео.
Необходимо проверить, работает ли метод post с вашей системой wistia.Я нашел что-то об этом в их документации, используя метод post json, но я не нашел play или команду stop.Не уверен, что в этой команде указаны правильные значения.
Если это не так, вам нужно использовать wistia api.js для управления воспроизведением видео и замены кода в методах видеоконтроллера.
Все кредиты идут на https://codepen.io/digistate/pen/MvapbE К сожалению, у меня больше нет оригинальной ссылки на стековую запись