Event.taget untuk video player

Kode dibawah di maksudkan ketika user klik pada class yang di miliki parent .video-player maka tombol spasi dapat digunakan untuk play/pause video. tapi ketika user meng-klik class diluar parent .video-player maka tombol spasi tidak dapat digunakan untuk play/pause video melainkan menjalankan fungsi default ya itu scroll ke bawah.

masalahnya : ketika user klik video(play) dan melakukan klik lagi diluar video spacebar masih berfungsi untuk play/pause video, seharusnya tidak / scroll ke bawah.

mohon bntunaya untuk memperbaiki kode dibawah.

$(document).click(function(e){

	if ($(e.target).parents().is('.video-player')) {

		$(this).keypress(function(e) {

			if (e.which == 32) {

				$('.video-player > div > .play-btn i').toggleClass('d-none');

				e.preventDefault();

				if ($('video').get(0).paused) {
					$('.video-player > div > .controls .play-btn i').removeClass('fa-play');
					$('.video-player > div > .controls .play-btn i').addClass('fa-pause');
					$('video').get(0).play();
				} else {
					$('.video-player > div > .controls .play-btn i').removeClass('fa-pause');
					$('.video-player > div > .controls .play-btn i').addClass('fa-play');
					$('video').get(0).pause();
				}
			}
		});
	}
})

avatar dembilesmana
@dembilesmana

11 Kontribusi 1 Poin

Diperbarui 5 tahun yang lalu

Tanggapan

masalahnya sekarang apa? coba dijelaskan di atas, console.log errornya apa

ga ada errornya mas, masalahnya kalo saya klik video (play) trs saya klik diluar video spacebar masih bisa play/pause video. saharusnya gabisa.

ini codenya mas https://codepen.io/dembilesmana/pen/EqQLeJ

kalau dibalik aja gimana? if keypress enter dulu, baru dalamnya dicek kalo parenntya video player baru jalankan fungsi yang dimau

maksudnya dibalik gimana mas? saya belum mudeng.

kalo diliat dari alurnya, user klik dulu jika yang di klik parentnya .video-player maka semua controls video bisa di atur pake keyboard.

coba cek jawaban ilham107

2 Jawaban:

maksudnya dibalik gimana mas? saya belum mudeng.

avatar dembilesmana
@dembilesmana

11 Kontribusi 1 Poin

Dipost 5 tahun yang lalu

<pre> if ($(e.target).parents().is('.video-player')) {

	$(this).keypress(function(e) {

		if (e.which == 32) {

</pre>

Dibalik alurnya

<pre> $(this).keypress(function(e) {

   if (e.which == 32) {

          if($(e.target).parents().is(&#039;.video-player&#039;)) {

</pre>

avatar momoji
@momoji

108 Kontribusi 44 Poin

Dipost 5 tahun yang lalu

Tanggapan

yap, ini yang sy maksud bisa dicoba

seharusnya tidak bekerja karena kode tersebut terlihat mirip dengan kode yg saya lampirkan di codepen

Login untuk ikut Jawaban