Ответ 1
Подумал все! Я объясню каждый фрагмент кода шаг за шагом для любой будущей ссылки.
Я смог выполнить то, что мне нужно было сделать без cdn froogaloop, и просто используя fitvids.js здесь работает fiddle моих решений.
Я перечислил все мои JS ниже в разделах, но для ответа на мой вопрос о "реверсировании моей функции после окончания видео" вам нужно только обратить внимание на мои обработчики событий, Подключение к API и Функции состояния игрока. Как только я смог установить соединение и прочитать, что видео было закончено, я использовал addClass(); и removeClass(); в сочетании с CSS Transitions для обработки обмена между моими играми и состояниями готовности (post finish).
Я пытался документировать и объяснять, насколько мог, надеюсь, это может помочь кому-то в будущем!
Именование моих варов
Не так много упоминания здесь, это просто предварительный, главное, чтобы обратить внимание на то, что это единственный способ, которым я мог бы написать его, чтобы позволить мне использовать мои слушатели с Vimeo api.
var parent = $('.video-hero'),
f = $('iframe'),
$playButton = $(".play"),
$itemsToFadeOut = $(".vid-cap, .ghost, .play"),
$video = f[0],
url = f.attr('src').split('?')[0],
activeVideoClass = "video-started", //Class for when video is playing
standardClass = "standard"; //Class for when video is finished/before play
Слушатели/обработчики событий
Мои слушатели просто ждут, чтобы получить сообщение от api/player о том, является ли видео ready, paused, finished или play ing.
слушателей
// Listen for messages from the player
if (window.addEventListener){
window.addEventListener('message', onMessageReceived, false);
}
else {
window.attachEvent('onmessage', onMessageReceived, false);
}
Мои обработчики хорошо... обрабатывают, когда мои функции запущены. Мои функции расположены ниже, это просто позволяет мне выбрать, какое состояние (случай) я отправляю из API и как реагировать на него.
Обработчики
// Handle messages received from the player
function onMessageReceived(e) {
var data = JSON.parse(e.data);
switch (data.event) {
//Ready case is before play / after finish
case 'ready':
onReady();
break;
case 'pause':
onPause();
break;
case 'finish':
onFinish();
break;
}
}
Подключение к API Vimeo
Этот раздел связывается рука об руку с моей кнопкой html play и vimeo api/player, позволяя мне запускать, приостанавливать и останавливать видео
// send play to vimeo api
var runCommand = function(cmd){
var data = {method : cmd};
f[0].contentWindow.postMessage(JSON.stringify(data), url);
}
// Helper function for sending a message to the player
function post(action, value) {
var data = { method: action };
if (value) {
data.value = value;
}
f[0].contentWindow.postMessage(JSON.stringify(data), url);
}
Функции состояния игрока
Что будет происходить в зависимости от того, какое состояние или случай игрока находится в
function onReady() {
post('addEventListener', 'finish');
}
function onPause() {
console.log('paused');
}
function onFinish() {
// add class to hero when video is triggered
parent.removeClass(activeVideoClass);
parent.addClass(standardClass);
// fade out the play button
$(this).fadeIn("slow");
// fade out poster image, overlay, and heading
$itemsToFadeOut.fadeIn();
}