Javascript videoyu tam ekran yapma ve mouse imlecini kaybetme

Gustave Le Boon · 10 Mart 2021

Merhaba. Ben bir video player yaptım. Her şey tamam ancak iki tane şey hakkında tıkandım. İlki videoyu tam ekran yapma. Aslında Request Full Screen metoduyla yapabiliyorum ama video tam ekran olunca benim tasarımını yaptığım video kontrol kısmı kayboluyor ve default bir kontrol kısmı geliyor. İkincisi ise mouse imlecini ve video kontrol kısmını ekranda herhangi bir mouse hareketi olmazsa gizlemek istiyorum. Tam anlatamadıysam diye resim de ekliyorum.

nullptr · 10 Mart 2021

Video player elementinin id sinin player oldugunu var sayalim. Play/pause butonunun id sinin de play-pause oldugunu varsayalim. Su tarz bir code ile video oynarken, mouse imlecini videonun uzerine getirdiginde 3 saniyelik bir zaman sonra gizlemesi lazim. Mouse oynatildiginda tekrar imlec gorunur olacaktir. Kodu test etmedim, hatalar olabilir sadece fikir vermesi acisindan yazdim. Kolay gelsin.

[CODE lang="javascript" title="mouse gizleme"]var player = document.getElementById('player');
var play_pause = document.getElementById('play_pause');
var is_video_playing = false;
var timeout_id = null;

play_pause.addEventListener('click', function(e) {
e.preventDefault();
is_video_playing = !is_video_playing;
});

player.addEventListener('mousemove', function(e) {
if (timeout_id) {
clearTimeout(timeout_id);
document.body.style.cursor = 'auto';
}

if (!is_video_playing) {
return;
}

timeout_id = setTimeout(function() {
document.body.style.cursor = 'none';
}, 3000);
});

player.addEventListener('mouseleave', function(e) {
if (timeout_id) {
clearTimeout(timeout_id);
}
document.body.style.cursor = 'auto';
});[/CODE]

Gustave Le Boon · 11 Mart 2021

nullptr dedi:
Video player elementinin id sinin player oldugunu var sayalim. Play/pause butonunun id sinin de play-pause oldugunu varsayalim. Su tarz bir code ile video oynarken, mouse imlecini videonun uzerine getirdiginde 3 saniyelik bir zaman sonra gizlemesi lazim. Mouse oynatildiginda tekrar imlec gorunur olacaktir. Kodu test etmedim, hatalar olabilir sadece fikir vermesi acisindan yazdim. Kolay gelsin.

[CODE lang="javascript" title="mouse gizleme"]var player = document.getElementById('player');
var play_pause = document.getElementById('play_pause');
var is_video_playing = false;
var timeout_id = null;

play_pause.addEventListener('click', function(e) {
e.preventDefault();
is_video_playing = !is_video_playing;
});

player.addEventListener('mousemove', function(e) {
if (timeout_id) {
clearTimeout(timeout_id);
document.body.style.cursor = 'auto';
}

if (!is_video_playing) {
return;
}

timeout_id = setTimeout(function() {
document.body.style.cursor = 'none';
}, 3000);
});

player.addEventListener('mouseleave', function(e) {
if (timeout_id) {
clearTimeout(timeout_id);
}
document.body.style.cursor = 'auto';
});[/CODE]

Sağ ol dostum. Bundan esinlenerek yaptım bir şeyler ve çalışıyor.

Javascript videoyu tam ekran yapma ve mouse imlecini kaybetme

Gustave Le Boon

Hectopat

Dosya Ekleri

nullptr

Hectopat

Gustave Le Boon

Hectopat