Как передать значение из javascript в php на мультиязычном сайте?

Question

[Сергей Бурдужа]

Добрый день.
У меня сайт на wordpress.
Есть на сайте страница, где отображается видео. Эта страница появляется только если посетитель зарегистрировался.
Я хочу записать время видео в куку, и при повторном заходе, посетитель смотрел видео дальше.
Вот код php файла:

<?php if ($video->have_posts()): ?>
		                <?php while ($video->have_posts()): ?>
			                <?php $video->the_post(); ?>
                            <header class="section__header">
                                <h2 class="section__title">
					                <?php the_title(); ?>
                                </h2>
                            </header>
                            <video class="no-forward"  controls controlsList="nodownload" >
                                <source src="<?php echo carbon_get_the_post_meta('crb_video_link'); ?>" type="video/mp4">
                            </video>
		                <?php endwhile; ?>
	                <?php else: ?>
	                <?php endif; ?>

Далее, в js, я хочу прописать время видео, когда нажал на паузу.

let setVideoTime = function () {
		video.addEventListener('pause', function () {
			console.log(video.currentTime);
		});
	}
	setVideoTime();

И теперь мне нужно передать это время в php файл.
Я тут встретил два подхода:
1.

$(".for_button").click(function() {
 location.href = "http://localhost/lessons/phptojs/view_text.php?id=" + id;
 });

и через ajax.

Я выше писал, что проблема в том, что сайт у меня на 3 языках.
Так как мне лучше передать параметр из js в php?

И еще, я прописал в коде, что получаю время воспроизведения при нажатии на паузу.
А как быть, если посетитель просто закроет браузер?

Заранее благодарен за помощь.

Comments

[poniyur]

А как быть, если посетитель просто закроет браузер?

1. Ловить событие закрытия вкладки (не советую)
2. Обновлять куку по таймеру

[Сергей Бурдужа]

poniyur, типа через setInterval?

Answer 1

[Надим]

Не понимаю, нафига здесь php нужен, если куку можно записать напрямую через JavaScript?
Лично я бы и вовсе хранил время воспроизведения не в куках, а в localStorage, при этом отслеживал бы не паузу, а нажатие кнопки плей, через тот же setInterval обновляя данные каждую секунду.

Comments

[Сергей Бурдужа]

Вы правы, я тоже заметил, что php тут не нужен.
Буду работать дальше.

[Шохрух Шаймардонов]

нее сетинтервал лишняя нагрузка. легче 2 события прослушать, либо пауза, либо закрытие браузера и записать в локалку

[Сергей Бурдужа]

Шохрух Шаймардонов, А какое событие у закрытие браузера?

[Шохрух Шаймардонов]

Сергей Бурдужа, Тут описано

[Сергей Бурдужа]

Шохрух Шаймардонов, Спасибо.

[Шохрух Шаймардонов]

Сергей Бурдужа, пожалуйста

[Надим]

Шохрух Шаймардонов, событие на закрытие окна ненадежно. Сет интервал настолько ничтожную нагрузку даст, что ей можно просто пренебречь.

[Сергей Бурдужа]

Надим Закиров, я протестирую и то и другое.
А как проверить, если в localStorage задано свойство? Чтобы инициировать в первый раз.

[Шохрух Шаймардонов]

Надим Закиров, чем оно не надежно, во-первых, во-вторых, наш автор может косякнуть с сет-интервал и infiniteLoop закинуть.))

[Надим]

Сергей Бурдужа, если ключ в локальном хранилище не содержит данных, будет нулл:
localStorage.getItem('vtime'); // выдаст null
Соответственно просто делаете условие:

if ( localStorage.getItem('vtime') ) {
// Код если есть значение
}

else {
// Код если значение еще не задано
}

[Сергей Бурдужа]

Надим Закиров, Спасибо, я тоже к этому пришел.

[Надим]

Шохрух Шаймардонов, не надежно, оно не всегда срабатывает, а даже если срабатывает, то не факт, что ваш код успеет выполнится до уничтожения вкладки. Надежнее использовать setInterval.

[Сергей Бурдужа]

Все, всем спасибо.
Вот мой итоговый результат

if(!localStorage.getItem('video')) {
		localStorage.setItem('video', '0');
	}else{
		video.currentTime = localStorage.getItem('video');
	}

	let setVideoTime = function () {
		video.volume = 0.1;

		setInterval(function () {
			let videoTime = video.currentTime;
			localStorage.setItem('video', videoTime);
		}, 1000);

		video.addEventListener('pause', function () {
			let videoTime = video.currentTime;
			localStorage.setItem('video', videoTime);
		});
	}
	setVideoTime();

Все работает.

[Сергей Бурдужа]

Надим Закиров, У меня возникла серьезная проблема.
Дело в том, что у меня на сайте десятки видео. И теперь, если я посмотрел одно видео до пятой минуты нажал на паузу и открыл другое видео, то оно тоже начинает воспроизводится с пятой минуты.
А как привязать localStorage к каждому видео?

[Надим]

Сергей Бурдужа, значит тогда надо не просто хранить значение, а еще и указывать к какому видео оно относится. Например, вместо ключей можете использовать содержимое атрибута src у видео. Правда этот вариант подойдет только, если у вас одна страница = одна видео. Если у вас на сайте бывают страницы, где несколько видео, то такая схема не подойдет и надо нафиг все переделывать с использованием json и циклов.

[Сергей Бурдужа]

Надим Закиров, У меня одно видео на одной странице.

[Надим]

Сергей Бурдужа, смотрите тогда ниже:

vlink = document.querySelector('video > source').getAttribute('src'); // Запишет в переменную vlink ссылку на видео

Дальше просто в своем коде используйте полученное значение как ключ:

if(!localStorage.getItem(vlink)) {
    localStorage.setItem(vlink, '0');
  }else{
    video.currentTime = localStorage.getItem(vlink);
  }

  let setVideoTime = function () {
    video.volume = 0.1;

    setInterval(function () {
      let videoTime = video.currentTime;
      localStorage.setItem(vlink, videoTime);
    }, 1000);

    video.addEventListener('pause', function () {
      let videoTime = video.currentTime;
      localStorage.setItem(vlink, videoTime);
    });
  }
  setVideoTime();

[Сергей Бурдужа]

Надим Закиров, а вот, что у меня получилось.

let videoSrc = document.querySelector('video source').getAttribute('src');

	if(!localStorage.getItem(videoSrc)) {
		localStorage.setItem(videoSrc, '0');
	}else{
		video.currentTime = localStorage.getItem(videoSrc);
	}

	let setVideoTime = function () {
		video.volume = 0.1;

		function rememberTime(){
			for (var i = 0; i < localStorage.length; i++) {
				if(videoSrc == localStorage.key(i)){
					let videoTime = video.currentTime;
					localStorage.setItem(videoSrc, videoTime);
				}
			}
		}

		setInterval(function () {
			rememberTime();
		}, 1000);

		video.addEventListener('pause', function () {
			rememberTime();
		});
	}
	setVideoTime();

[Сергей Бурдужа]

Надим Закиров, Спасибо вам, что потратили время на меня. Я в первые работаю с localStorage.

[Сергей Бурдужа]

Надим Закиров, Извините меня за наглость. Просто осталось прикрутить последнюю фитчу.
Мы с вами добавили возможность сохранения времени видео в localStorage.
Я сам отключил перемотку вперед.

let video = document.querySelector('.no-forward');


	let vlink = document.querySelector('video > source').getAttribute('src'); // Запишет в переменную vlink ссылку на видео

	if(!localStorage.getItem(vlink)) {
		localStorage.setItem(vlink, '0');
	}else{
		video.currentTime = localStorage.getItem(vlink);
	}

	let setVideoTime = function () {
		video.volume = 0.1;

		setInterval(function () {
			let videoTime = video.currentTime;
			localStorage.setItem(vlink, videoTime);
		}, 1000);

		video.addEventListener('pause', function () {
			let videoTime = video.currentTime;
			localStorage.setItem(vlink, videoTime);
		});
	}
	setVideoTime();

	let disableSeeking = function () {
		// let	previousTime = 0;
		let	previousTime = localStorage.setItem(vlink, videoTime);

		video.addEventListener('timeupdate', function (evt) {
			if (!video.seeking) {
				previousTime = Math.max(previousTime, video.currentTime);
			}
		}, false);

		video.addEventListener('seeking', function (evt) {
			if (video.currentTime > previousTime) {
				video.currentTime = previousTime;
			}
		}, true);
	};

	let seekVideo = function () {
		if(!$('body').hasClass('administrator')){
			disableSeeking();
		}
	};
	seekVideo();

Только теперь опять не запоминается время в localSotage, потому что let previousTime = 0;

Если я беру время из localStorage, то тогда перемотка вперед не блокируется.

Можете меня в последний раз выручить?
Заранее благодарен.

[Надим]

Сергей Бурдужа, увы, долго вникать. Могу вам написать свой вариант, если оплатите мое время.

[Сергей Бурдужа]

Надим Закиров, Спасибо вам за помощь, я уже разобрался.

let setVideoTime = function () {
		video.volume = 0.1;

		setInterval(function () {
			let videoTime = video.currentTime;
			localStorage.setItem(vlink, videoTime);
		}, 1000);

		video.addEventListener('pause', function () {
			let videoTime = video.currentTime;
			localStorage.setItem(vlink, videoTime);
		});
	};
	setVideoTime();

	let disableSeeking = function () {
		let	previousTime = localStorage.getItem(vlink);

		video.addEventListener('timeupdate', function (evt) {
			if (!video.seeking) {
				previousTime = Math.max(previousTime, video.currentTime);
			}
		}, false);

		video.addEventListener('seeking', function (evt) {
			if (video.currentTime > previousTime) {
				video.currentTime = previousTime;
			}
		}, true);
	};

Удачи вам и успехов в работе.