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

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

 PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


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

> Без описания
leshiy
Отправлено: 06 Июня, 2020 - 13:31:25
Post Id


Частый гость


Покинул форум
Сообщений всего: 188
Дата рег-ции: Июнь 2008  


Помог: 0 раз(а)




Пытаюсь сделать свой видеоплеер но не получается как в известных видеоплеерах скрыть и показать панель управления, если при воспроизведении видео двинулась мышь в области плеера то панель управления показывается и запускается 3-х секундный отсчет через который панель управления снова скрывается, но если таймер уже идет и видео остановлено то отсчет почему то не останавливается.
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. document.getElementById('player').addEventListener('click',function(){
  3. var time;
  4. glplayer.onmousemove = function (e){
  5. if(videoPlayer.paused===false){
  6. //панель управления видна
  7. let target =e.target.closest('#control');
  8. if(!target){
  9.     time = setTimeout(function () {
  10. //панель управления скрыта
  11.     }, 3000)
  12. }else{clearTimeout(time);
  13. }
  14. }
  15. }
  16. if(videoPlayer.paused) {
  17. //панель управления скрыта
  18. videoPlayer.play();
  19. } else {
  20. //clearTimeout(time); почему то не работает
  21. videoPlayer.pause();
  22. //панель управления видна
  23. }
  24. },false);
  25.  
 
 Top
LIME
Отправлено: 06 Июня, 2020 - 21:56:28
Post Id


Активный участник


Покинул форум
Сообщений всего: 10732
Дата рег-ции: Нояб. 2010  


Помог: 322 раз(а)




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

отказ от ответственности: код не запускал и даже внимательно не смотрел
сразу офигел от логики
 
 Top
Vladimir Kheifets
Отправлено: 07 Июня, 2020 - 08:09:12
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 37 раз(а)




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

Код тоже не запускал, а только посмотрел.
Спойлер (Отобразить)
Увидел, что по первому клику по элементу 'player',
если плеер на паузе,
то начинает играть,
по следующему клику по элементу 'player',
если на паузе то отменить паузу.

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

(Отредактировано автором: 07 Июня, 2020 - 08:28:16)

 
 Top
leshiy
Отправлено: 07 Июня, 2020 - 11:39:38
Post Id


Частый гость


Покинул форум
Сообщений всего: 188
Дата рег-ции: Июнь 2008  


Помог: 0 раз(а)




let target =e.target.closest('#control');//#cntrol это и есть панель управления.
CODE (html):
скопировать код в буфер обмена
  1. <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 уже запущен то у меня не выходит его остановить при остановке плеера.
 
 Top
leshiy
Отправлено: 07 Июня, 2020 - 14:06:36
Post Id


Частый гость


Покинул форум
Сообщений всего: 188
Дата рег-ции: Июнь 2008  


Помог: 0 раз(а)




Вот код.Обнаружилось еще и то что setTimeout походу не отключается и во время движения мыши.
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <!doctype html>
  3. <html lang="ru">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1" />
  8. <style>
  9.     #glplayer{position:relative}
  10.     #player{width:100%}
  11. .controls{position:absolute;height:50px;width:100%;bottom:0;background-color:red}
  12.     .none{display:none}
  13.    </style>
  14.     </head>
  15. <body>
  16. <br>
  17. <div id="glplayer">
  18.     <div id="control" class="controls"></div>
  19. <video id="player" src="https://atuin.ru/demo/plyr/854.mp4"></video>
  20. </div>
  21.  
  22.  
  23.  
  24. <script>
  25. var videoPlayer=document.getElementById('player'),
  26. control=document.getElementById('control');
  27. document.getElementById('player').addEventListener('click',function(){
  28. control.setAttribute('class','none');
  29. var time;
  30. document.getElementById('glplayer').onmousemove = function (e){
  31. if(videoPlayer.paused===false){
  32. control.setAttribute('class','controls');
  33. let target =e.target.closest('#control');
  34. if(!target){
  35.     time = setTimeout(function () {
  36. control.setAttribute('class','none');
  37.     }, 3000)
  38. }else{clearTimeout(time);
  39. }
  40. }
  41. }
  42. if(videoPlayer.paused) {
  43. control.setAttribute('class','none');
  44. videoPlayer.play();
  45. } else {
  46. //clearTimeout(time); почему то не работает
  47. videoPlayer.pause();
  48. control.setAttribute('class','controls');
  49. }
  50. },false);</script>
  51.  
  52.  
  53.  
  54.  
  55. </body>
  56. </html>

(Добавление)
LIME пишет:
ничего не смущает в логике?

В коде логика такая:
если плеер на паузе то play()
если нет то pause()
нормальная логика!!!
 
 Top
Vladimir Kheifets
Отправлено: 08 Июня, 2020 - 11:58:39
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 37 раз(а)




leshiy пишет:
Вот код.Обнаружилось еще и то что setTimeout походу не отключается и во время движения мыши.
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <!doctype html>
  3. <html lang="ru">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7. <meta name="viewport" content="width=device-width, initial-scale=1" />
  8. <style>
  9.     #glplayer{position:relative}
  10.     #player{width:100%}
  11. .controls{position:absolute;height:50px;width:100%;bottom:0;background-color:red}
  12.     .none{display:none}
  13.    </style>
  14.     </head>
  15. <body>
  16. <br>
  17. <div id="glplayer">
  18.     <div id="control" class="controls"></div>
  19. <video id="player" src="https://atuin.ru/demo/plyr/854.mp4"></video>
  20. </div>
  21.  
  22.  
  23.  
  24. <script>
  25. var videoPlayer=document.getElementById('player'),
  26. control=document.getElementById('control');
  27. document.getElementById('player').addEventListener('click',function(){
  28. control.setAttribute('class','none');
  29. var time;
  30. document.getElementById('glplayer').onmousemove = function (e){
  31. if(videoPlayer.paused===false){
  32. control.setAttribute('class','controls');
  33. let target =e.target.closest('#control');
  34. if(!target){
  35.     time = setTimeout(function () {
  36. control.setAttribute('class','none');
  37.     }, 3000)
  38. }else{clearTimeout(time);
  39. }
  40. }
  41. }
  42. if(videoPlayer.paused) {
  43. control.setAttribute('class','none');
  44. videoPlayer.play();
  45. } else {
  46. //clearTimeout(time); почему то не работает
  47. videoPlayer.pause();
  48. control.setAttribute('class','controls');
  49. }
  50. },false);</script>
  51. </body>
  52. </html>

(Добавление)
LIME пишет:
ничего не смущает в логике?

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

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

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

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

Удачи!
 
 Top
leshiy
Отправлено: 08 Июня, 2020 - 16:56:21
Post Id


Частый гость


Покинул форум
Сообщений всего: 188
Дата рег-ции: Июнь 2008  


Помог: 0 раз(а)




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

(Отредактировано автором: 08 Июня, 2020 - 17:05:48)

 
 Top
leshiy
Отправлено: 08 Июня, 2020 - 20:06:08
Post Id


Частый гость


Покинул форум
Сообщений всего: 188
Дата рег-ции: Июнь 2008  


Помог: 0 раз(а)




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

но проблему с паузой так и не решил.Помоему таймер не отключается в 36 строке.
 
 Top
Vladimir Kheifets
Отправлено: 08 Июня, 2020 - 21:09:37
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 37 раз(а)




leshiy пишет:
Сделал рабочий пример со style и плеером, но только с Play и Pause.
Спойлер (Отобразить)

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

Исправьте, пожалуйста, спойлер. Код не возможно читать.
Про стили. У меня ноутбук с экраном 15". С Вашим стилем я не вижу контольной панели в видимой область плайера. Необходимо прописывать в css @media screen ... для разных типов устройств и орентаций экранов. Иначе Ваш плейер сможете увидеть только Вы на своём компьютере .
 
 Top
leshiy
Отправлено: 09 Июня, 2020 - 11:06:45
Post Id


Частый гость


Покинул форум
Сообщений всего: 188
Дата рег-ции: Июнь 2008  


Помог: 0 раз(а)




1.А что с кодом то не так?
2.Попробуйте на другом браузере.Хром прекрасно отображает плеер и на компе и на мобиле.
 
 Top
Vladimir Kheifets
Отправлено: 09 Июня, 2020 - 17:27:15
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 37 раз(а)




leshiy пишет:
1.А что с кодом то не так?

Вы вставили код в спойлер , но вместо html поствили quote.
Получилось нечитаемо
См, скриншот ниже
Прикреплено изображение (Нажмите для увеличения)
Anmerkung 2020-06-09 162003.jpg

(Отредактировано автором: 09 Июня, 2020 - 17:28:38)

 
 Top
leshiy
Отправлено: 09 Июня, 2020 - 19:28:46
Post Id


Частый гость


Покинул форум
Сообщений всего: 188
Дата рег-ции: Июнь 2008  


Помог: 0 раз(а)




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

(Отредактировано автором: 09 Июня, 2020 - 20:07:53)

 
 Top
Vladimir Kheifets
Отправлено: 11 Июня, 2020 - 18:04:56
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 37 раз(а)




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

Добрый день!
Цитата:
Да все там читаемо

Ну прям, как в Алисе в стране, читать на лету, что на банках написано Не понял
Очень хотелось, разобраться..., вставил, посмотрел в Хроме, увидел см. скриншот.
Прикреплено изображение (Нажмите для увеличения)
Anmerkung 2020-06-11 164937.jpg

(Отредактировано автором: 11 Июня, 2020 - 18:06:26)

 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« JavaScript & VBScript »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB