Форумы портала PHP.SU :: Версия для печати :: Остановить setTimeout при паузе видео

Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Остановить setTimeout при паузе видео

Форумы портала PHP.SU » Клиентская разработка » JavaScript & VBScript » Остановить setTimeout при паузе видео

Страниц (1): [1]

1. leshiy - 06 Июня, 2020 - 13:31:25 - перейти к сообщению

Пытаюсь сделать свой видеоплеер но не получается как в известных видеоплеерах скрыть и показать панель управления, если при воспроизведении видео двинулась мышь в области плеера то панель управления показывается и запускается 3-х секундный отсчет через который панель управления снова скрывается, но если таймер уже идет и видео остановлено то отсчет почему то не останавливается.

CODE (javascript):
скопировать код в буфер обмена

 
document.getElementById('player').addEventListener('click',function(){
var time;
glplayer.onmousemove = function (e){
if(videoPlayer.paused===false){
//панель управления видна
let target =e.target.closest('#control');
if(!target){
    time = setTimeout(function () {
//панель управления скрыта
    }, 3000)
}else{clearTimeout(time);
}
}
}
if(videoPlayer.paused) {
//панель управления скрыта
videoPlayer.play();
} else {
//clearTimeout(time); почему то не работает
videoPlayer.pause();
//панель управления видна
}
},false);
 

2. LIME - 06 Июня, 2020 - 21:56:28 - перейти к сообщению

тактак стоп
у тебя же черным по английскому написано
если плеер на паузе то играть
иначе на паузу
тоесть если не на паузе то на паузу
если на паузе то отменить паузу
ничего не смущает в логике?
рекомендую научиться дебажить в хроме с точками останова
https://learn[dot]javascript[dot]ru/devtools

отказ от ответственности: код не запускал и даже внимательно не смотрел
сразу офигел от логики

3. Vladimir Kheifets - 07 Июня, 2020 - 08:09:12 - перейти к сообщению

LIME пишет:

тактак стоп
у тебя же черным по английскому написано
если плеер на паузе то играть
иначе на паузу
тоесть если не на паузе то на паузу
если на паузе то отменить паузу
ничего не смущает в логике?
рекомендую научиться дебажить в хроме с точками останова
https://learn[dot]javascript[dot]ru/devtools
отказ от ответственности: код не запускал и даже внимательно не смотрел
сразу офигел от логики

Код тоже не запускал, а только посмотрел.

Спойлер (Отобразить)

Увидел, что по первому клику по элементу 'player',
если плеер на паузе,
то начинает играть,
по следующему клику по элементу 'player',
если на паузе то отменить паузу.

Внутри обработчика клика по элементу 'player', есть второй glplayer.onmousemove.
Кликнули, сдвинули и тут должно происходить нечто с панелю управления и Timeout, а оно не хочет работать.
Про это и был задан вопрос.
Не увидел кода управления панелью, а только Timeout, let target =e.target.closest('#control'); и комментарии.
Чтобы разобраться с этим нужно увидеть не только js обработчики событий,
но и код, в котором они должны работать.

4. leshiy - 07 Июня, 2020 - 11:39:38 - перейти к сообщению

let target =e.target.closest('#control');//#cntrol это и есть панель управления.

CODE (html):
скопировать код в буфер обмена

<div id="glplayer"><div id="control"></div><video poster="/3910.jpg" id="player" playsinline="" src="/11755.mp4"></video></div>

Кликнули #control скрылась, мышью двинули #control появилась и запустился setTimeout на 3сек. после чего #control опять скрылась.
Проблема в том что если setTimeout уже запущен то у меня не выходит его остановить при остановке плеера.

5. leshiy - 07 Июня, 2020 - 14:06:36 - перейти к сообщению

Вот код.Обнаружилось еще и то что setTimeout походу не отключается и во время движения мыши.

CODE (html):
скопировать код в буфер обмена

 
<!doctype html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    #glplayer{position:relative}
    #player{width:100%}
.controls{position:absolute;height:50px;width:100%;bottom:0;background-color:red}
    .none{display:none}
   </style>
    </head>
<body>
<br>
<div id="glplayer">
    <div id="control" class="controls"></div>
<video id="player" src="https://atuin.ru/demo/plyr/854.mp4"></video>
</div>
 
 
 
<script>
var videoPlayer=document.getElementById('player'),
control=document.getElementById('control');
document.getElementById('player').addEventListener('click',function(){
control.setAttribute('class','none');
var time;
document.getElementById('glplayer').onmousemove = function (e){
if(videoPlayer.paused===false){
control.setAttribute('class','controls');
let target =e.target.closest('#control');
if(!target){
    time = setTimeout(function () {
control.setAttribute('class','none');
    }, 3000)
}else{clearTimeout(time);
}
}
}
if(videoPlayer.paused) {
control.setAttribute('class','none');
videoPlayer.play();
} else {
//clearTimeout(time); почему то не работает
videoPlayer.pause();
control.setAttribute('class','controls');
}
},false);</script>
 
 
 
 
</body>
</html>

(Добавление)

LIME пишет:

ничего не смущает в логике?

В коде логика такая:
если плеер на паузе то play()
если нет то pause()
нормальная логика!!!

6. Vladimir Kheifets - 08 Июня, 2020 - 11:58:39 - перейти к сообщению

leshiy пишет:

Вот код.Обнаружилось еще и то что setTimeout походу не отключается и во время движения мыши.

CODE (html):
скопировать код в буфер обмена

 
<!doctype html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    #glplayer{position:relative}
    #player{width:100%}
.controls{position:absolute;height:50px;width:100%;bottom:0;background-color:red}
    .none{display:none}
   </style>
    </head>
<body>
<br>
<div id="glplayer">
    <div id="control" class="controls"></div>
<video id="player" src="https://atuin.ru/demo/plyr/854.mp4"></video>
</div>
 
 
 
<script>
var videoPlayer=document.getElementById('player'),
control=document.getElementById('control');
document.getElementById('player').addEventListener('click',function(){
control.setAttribute('class','none');
var time;
document.getElementById('glplayer').onmousemove = function (e){
if(videoPlayer.paused===false){
control.setAttribute('class','controls');
let target =e.target.closest('#control');
if(!target){
    time = setTimeout(function () {
control.setAttribute('class','none');
    }, 3000)
}else{clearTimeout(time);
}
}
}
if(videoPlayer.paused) {
control.setAttribute('class','none');
videoPlayer.play();
} else {
//clearTimeout(time); почему то не работает
videoPlayer.pause();
control.setAttribute('class','controls');
}
},false);</script>
</body>
</html>

(Добавление)

LIME пишет:

ничего не смущает в логике?

В коде логика такая:
если плеер на паузе то play()
если нет то pause()
нормальная логика!!!

Добрый день!
Меня тоже не смущает Ваша логика переключателя play<>pause по клику.
Я вставил отладку в Ваш код:

Спойлер (Отобразить)

CODE (html):
скопировать код в буфер обмена

<!doctype html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#glplayer{position:relative}
#player{width:100%}
.controls{position:absolute;height:50px;width:100%;bottom:0;background-color:red}
.none{display:none}
</style>
</head>
<body>
<br>
<div id="glplayer">
<div id="control" class="controls"></div>
<video id="player" src="http://beautiful-puppies.de/video/20200331120740.mp4"></video>
</div> 
<script>
var videoPlayer=document.getElementById('player'),
control=document.getElementById('control');
document.getElementById('player').addEventListener('click',function()
{
        control.setAttribute('class','none');
        var time;
        document.getElementById('glplayer').onmousemove = function (e)
        {
                console.log("videoPlayer.paused:"+videoPlayer.paused);
                if(videoPlayer.paused===false)
                {
                        control.setAttribute('class','controls');
                        let target = e.target.closest('#control');
                        console.log("target:"+target);
                        if(!target)
                        {
                                time = setTimeout(function () {
                                control.setAttribute('class','none');}, 3000);
                                console.log("setTimeout");
                        }
                        else
                        {                               
                                clearTimeout(time);
                                console.log("clearTimeout");
                        }
                }
        }
        if(videoPlayer.paused) 
        {
                control.setAttribute('class','none');
                videoPlayer.play();
        } 
        else 
        {               
                //clearTimeout(time); почему то не работает
                videoPlayer.pause();
                control.setAttribute('class','controls');
        }
},false);
</script>
</body>
</html>

Посмотрел в Хроме. Вот, такой результат:

Спойлер (Отобразить)

Ваш код не работает потому, что:
let target = e.target.closest('#control');
выдает всегда: target=null
М.б от него отказаться?
Вы хотели:

Цитата:

Кликнули #control скрылась, мышью двинули #control появилась и запустился setTimeout на 3сек. после чего #control опять скрылась.

Попробуйте это:

Спойлер (Отобразить)

CODE (html):
скопировать код в буфер обмена

<!doctype html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
#glplayer{position:relative}
#player{height:100vh}
.controls{
position:absolute;
height:50px;
width:100%;
bottom:0;
background-color:red;
cursor:pointer;
}
.none{display:none}
</style>
</head>
<body>
<br>
<div id="glplayer">
<div id="control" class="controls"></div>
<video id="player" src="http://beautiful-puppies.de/video/20200331120740.mp4"></video>
</div> 
<script>
var videoPlayer=document.getElementById('player'),
control=document.getElementById('control');
 
control.addEventListener('click',function()
{
        //Кликнули #control панель скрылась
        control.setAttribute('class','none');
}
,false);
 
videoPlayer.addEventListener('click',function()
{
        control.setAttribute('class','none');
        var time;
        document.getElementById('glplayer').onmousemove = function (e)
        {
                console.log("videoPlayer.paused:"+videoPlayer.paused);
                if(videoPlayer.paused===false)
                {                       
                        //let target = this.target.closest('#control');
                        control_class = control.getAttribute('class');
                        console.log("control_class:"+control_class);                    
                        //мышью двинули ecли #control не было видно, то #control появился
                        if(control_class=="none")
                        {
                                control.setAttribute('class','controls');
                                //запустился setTimeout на 3сек. после чего #control опять скрылась.
                                console.log("setTimeout");
                                time = setTimeout(function () 
                                {                                       
                                        control.setAttribute('class','none');
                                        //clearTimeout(time);
                                        console.log("clearTimeout");
                                }, 3000);
                        }
                        
                }
        }
        if(videoPlayer.paused) 
        {
                control.setAttribute('class','none');
                videoPlayer.play();
        } 
        else 
        {                       
                videoPlayer.pause();
                control.setAttribute('class','controls');
        }
},false);
</script> 
</body>
</html>

По разметке.
#player{width:100%} вытягивает видео по высоте за пределы рабочей области экрана.
поэтому, для того чтобы проверить JS, заменил на #player{height:100vh}, но это уже другая тема.

Удачи!

7. leshiy - 08 Июня, 2020 - 16:56:21 - перейти к сообщению

1.Поменял ваши стили на свои старые и в хроме все нормуль, а вот с вашими наоборот видео растягивается на весь браузер и даже за его пределы.
2.В моем реальном плеере очень большой css (let target =e.target.closest('#control'); работает.Здесь не работает потому что у #control нет элементов) и поэтому я сделал упрощенный вариант.
3.Если видео показывает и вы двинули мышку и появилась панель управления и сразу же нажать на паузу то вот тут clearTimeout(time) и не срабатывает и через 3сек. она исчезает.

8. leshiy - 08 Июня, 2020 - 20:06:08 - перейти к сообщению

Сделал рабочий пример со style и плеером, но только с Play и Pause.

Спойлер (Отобразить)

но проблему с паузой так и не решил.Помоему таймер не отключается в 36 строке.

9. Vladimir Kheifets - 08 Июня, 2020 - 21:09:37 - перейти к сообщению

leshiy пишет:

Сделал рабочий пример со style и плеером, но только с Play и Pause.

Спойлер (Отобразить)

но проблему с паузой так и не решил.Помоему таймер не отключается в 36 строке.

Исправьте, пожалуйста, спойлер. Код не возможно читать.
Про стили. У меня ноутбук с экраном 15". С Вашим стилем я не вижу контольной панели в видимой область плайера. Необходимо прописывать в css @media screen ... для разных типов устройств и орентаций экранов. Иначе Ваш плейер сможете увидеть только Вы на своём компьютере .

10. leshiy - 09 Июня, 2020 - 11:06:45 - перейти к сообщению

1.А что с кодом то не так?
2.Попробуйте на другом браузере.Хром прекрасно отображает плеер и на компе и на мобиле.

11. Vladimir Kheifets - 09 Июня, 2020 - 17:27:15 - перейти к сообщению

leshiy пишет:

1.А что с кодом то не так?

Вы вставили код в спойлер , но вместо html поствили quote.
Получилось нечитаемо
См, скриншот ниже

12. leshiy - 09 Июня, 2020 - 19:28:46 - перейти к сообщению

Да все там читаемо.На вашем скрине видно только часть кода с отображением самого плеера.Единственное это адрес видео файла.
Вставьте любой или http://beautiful-puppies[dot]de/vide[dot][dot][dot]200331120740[dot]mp4

13. Vladimir Kheifets - 11 Июня, 2020 - 18:04:56 - перейти к сообщению

leshiy пишет:

Да все там читаемо.На вашем скрине видно только часть кода с отображением самого плеера.Единственное это адрес видео файла.
Вставьте любой или http://beautiful-puppies.de/video/20200331120740.mp4

Добрый день!

Цитата:

Да все там читаемо

Ну прям, как в Алисе в стране, читать на лету, что на банках написано Не понял

Очень хотелось, разобраться..., вставил, посмотрел в Хроме, увидел см. скриншот.