Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 02.12.2023, 13:12
Аватар для Gena
Новичок на форуме
Отправить личное сообщение для Gena Посмотреть профиль Найти все сообщения от Gena
 
Регистрация: 02.12.2023
Сообщений: 4

Объединение нескольких сценариев управления видео плеером
Здравствуйте.
У меня такой вопрос. Есть небольшой скрипт помогающий осуществлять управление HTML5 видео плеером.
<center>
  <video id="movie" width="100%" height="auto" controls="controls" poster="">
   <source src="video.mp4" type="video/mp4">
  </video>
</center>
<script>var a=document.getElementById("movie");a.onclick=function(){if(a.paused){a.play();}else{a.pause();}};</script>

Он отлично справляется со своей задачей. Но если на странице будет добавленно еще несколько видео роликов, с ключевым элементом
Код:
id="movie"
то скрипт перестает работать. Конечно можно применить такой вариант:
<center>
  <video id="movie1" width="100%" height="auto" controls="controls" poster="">
   <source src="video1.mp4" type="video/mp4">
  </video>
</center>
<br>
  <video id="movie2" width="100%" height="auto" controls="controls" poster="">
   <source src="video2.mp4" type="video/mp4">
  </video>
<script>var a=document.getElementById("movie1");a.onclick=function(){if(a.paused){a.play();}else{a.pause();}};
var b=document.getElementById("movie2");b.onclick=function(){if(b.paused){b.play();}else{b.pause();}};
</script>
но если видео роликов будет еще больше, то придется еще раз увеличивать практически повторяющийся код.
Возможно есть способ какого то объединения нескольких скриптов, что бы работал унивестальный поиск по элементу
Код:
id="movie\d+"
и тогда скрипт управления можно будет сделать более компактным? Спасибо
Ответить с цитированием
  #2 (permalink)  
Старый 02.12.2023, 13:25
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,682

Сообщение от Gena
но если видео роликов будет еще больше, то придется еще раз увеличивать практически повторяющийся код.
Так сделайте
<center>
  <video id="movie1" width="100%" height="auto" controls="controls" poster="">
   <source src="video1.mp4" type="video/mp4">
  </video>
</center>
<br>
  <video id="movie2" width="100%" height="auto" controls="controls" poster="">
   <source src="video2.mp4" type="video/mp4">
  </video>
  
<script>
const videos = document.querySelectorAll('video');

function playpause () {
    if (this.paused) {
        this.play();
    } else {
        this.pause();
    }  

videos.forEach (video => video.addEventListener('clic', playpause));
</script>

Последний раз редактировалось voraa, 02.12.2023 в 13:28.
Ответить с цитированием
  #3 (permalink)  
Старый 02.12.2023, 14:48
Аватар для Gena
Новичок на форуме
Отправить личное сообщение для Gena Посмотреть профиль Найти все сообщения от Gena
 
Регистрация: 02.12.2023
Сообщений: 4

Спасибо за совет, но это несрабатывает, как с одним, так и с двумя видео.. Вот html файл и 2 мини видео ролика, что бы было проще это увидеть. К сожалению я сам не особо разбираясь в javascript что бы найти в чем причина.. Я проверил в раузерах Google hrome и IE 11.
Похоже что это работает только для Firefox, но исходный скрипт, почему то работает во всех браузерах.

Последний раз редактировалось Gena, 02.12.2023 в 14:59.
Ответить с цитированием
  #4 (permalink)  
Старый 02.12.2023, 22:46
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,682

Сообщение от Gena
К сожалению я сам не особо разбираясь в javascript
В этом то и причина. Когда пишешь код, который невозможно проверить самому, могут возникать и нелепые ошибки, которые разбирающийся заметил бы в своем браузере. Просто скобку пропустил. И это не должно работать нигде.
Так пробуйте
<center>
  <video id="movie1" width="100%" height="auto" controls="controls" poster="">
   <source src="video1.mp4" type="video/mp4">
  </video>
</center>
<br>
  <video id="movie2" width="100%" height="auto" controls="controls" poster="">
   <source src="video2.mp4" type="video/mp4">
  </video>
   
<script>
const videos = document.querySelectorAll('video');
 
function playpause () {
    if (this.paused) {
        this.play();
    } else {
        this.pause();
    } 
}
 
videos.forEach (video => video.addEventListener('clic', playpause));
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 03.12.2023, 01:26
Аватар для Gena
Новичок на форуме
Отправить личное сообщение для Gena Посмотреть профиль Найти все сообщения от Gena
 
Регистрация: 02.12.2023
Сообщений: 4

В Firefox, запуск срабатывал, поскольку там видимо, есть своя система управлением плеером с помощью кликов, (проверил это убрав полностью весь javascript код). Исправление со скобкой ничего не поменяло. Видимо метод вызова, какой то нестандартный. В любом случае, Спасибо за попытку помочь.
Ответить с цитированием
  #6 (permalink)  
Старый 03.12.2023, 11:35
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,660

voraa,
Опять

Gena,
Да всё работает, будь внимательней, не как voraa 'click'

Последний раз редактировалось Rise, 03.12.2023 в 11:42.
Ответить с цитированием
  #7 (permalink)  
Старый 03.12.2023, 12:39
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,682

Сообщение от Rise
voraa,
Опять
Ну опять. Без VSC трудновато стало писать без ошибок

<center>
  <video id="movie1" width="100%" height="auto" controls="controls" poster="">
   <source src="video1.mp4" type="video/mp4">
  </video>
</center>
<br>
  <video id="movie2" width="100%" height="auto" controls="controls" poster="">
   <source src="video2.mp4" type="video/mp4">
  </video>
    
<script>
const videos = document.querySelectorAll('video');
  
function playpause () {
    if (this.paused) {
        this.play();
    } else {
        this.pause();
    }
}
  
videos.forEach (video => video.addEventListener('click', playpause));
</script>


ну так то уж точно должно сработать.
Ответить с цитированием
  #8 (permalink)  
Старый 03.12.2023, 23:26
Аватар для Gena
Новичок на форуме
Отправить личное сообщение для Gena Посмотреть профиль Найти все сообщения от Gena
 
Регистрация: 02.12.2023
Сообщений: 4

Цитата:
ну так то уж точно должно сработать.
Спасибо за помощь, это действительно работает.
Ответить с цитированием
  #9 (permalink)  
Старый 05.12.2023, 12:34
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,660

voraa,
VSC приводит к отуплению получается?
Ответить с цитированием
  #10 (permalink)  
Старый 05.12.2023, 12:58
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,682

Сообщение от Rise
VSC приводит к отуплению получается?
Да практически любая автоматизация приводит к отуплению. Меньше необходимости проверять себя. Ну и когда пишешь без него уже отвыкаешь проверять все ли скобки поставил, так ли написал идентификатор....
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Кнопки управления плеером Vimeo ethereal Элементы интерфейса 3 04.09.2021 03:49
Убрать элементы управления видео под IOS ethereal Элементы интерфейса 0 04.07.2021 21:30
объединение данных из нескольких html документов kokika Элементы интерфейса 11 07.12.2017 18:35
Видео без <VIDEO> и FLASH DIGIUS Общие вопросы Javascript 1 25.10.2016 04:34
панель управления при воспроизведении видео с youtube zlodiak Библиотеки/Тулкиты/Фреймворки 2 12.04.2013 11:22