Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.50/40: Рейтинг темы: голосов - 40, средняя оценка - 4.50
0 / 0 / 0
Регистрация: 01.06.2015
Сообщений: 18

Пауза видео Youtube при нажатии на кнопку

04.05.2017, 16:53. Показов 8533. Ответов 7
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
На сайте скрипт iframe видео youtube. Как сделать так, что при нажатии на кнопку (class="button") видео ставилось на паузу?
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
04.05.2017, 16:53
Ответы с готовыми решениями:

Как остановить видео в MediaElement при нажатии на кнопку?
например в формах перетащил элемент и он автоматом стал типа button1 а тут то обычый тип MediaElement.делал MediaElement n = new...

Как отлючить видео при нажатии на кнопку закрыть в модальном окне?
Здраствуйте! Модальное оконо на CSS. В него встроено видео. Но при закрытии видео оно продолжает проигрывать. Как отлючить видео при...

При нажатии на первую кнопку открывать проигрыватель музыки, а на вторую - проигрыватель видео
Как сделать что бы при нажатии на первую кнопку открывался проигрыватель музыки а на вторую открывался проигрыватель видео. Help.

7
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
04.05.2017, 16:56
Вам нужно использовать YouTube IFrame Player API: https://developers.google.com/... _reference
Методы управления воспроизведением: https://developers.google.com/... k_controls
0
0 / 0 / 0
Регистрация: 01.06.2015
Сообщений: 18
04.05.2017, 17:21  [ТС]
вариант не подходит, мне нужна реализация через маленький отдельный код js

Добавлено через 34 секунды
чтобы код самого видео не трогать
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
04.05.2017, 17:30
Не понятно, что вы имеете в виду. Какой именно код вы не хотите трогать? Покажите.
0
0 / 0 / 0
Регистрация: 01.06.2015
Сообщений: 18
04.05.2017, 17:39  [ТС]
<iframe id="iframe" src="http://www.youtube.com/embed/*****?autoplay=1&autohide=1&rel=0" frameborder="0" allowfullscreen=""></iframe>

Добавлено через 3 минуты
у меня видео (размер окна - автоплей/без автоплей) адаптировано под 20 шт @media. Все сносить в js, переделывать не вариант.

Вот к примеру у меня вкл выкл автоплей видео сделано в отдельном маленьком коде js

JavaScript
1
2
3
4
5
6
  <script type="text/javascript">var el = document.getElementsByTagName('iframe');
var elattr = el[0].getAttribute('src');
 
if (window.innerWidth < 800) {
  el[0].setAttribute('src', elattr.split('=')[0] + '=' + '0' + '&autohide=1&rel=0');
}</script>
Нужно что то подобное, не меняя стили и не переделывая код видео. Чтобы при на нажатии на кнопку видео ставилось на паузу
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
04.05.2017, 17:44
Losapwild, у вас так не получится.
Согласно политике безопасности кроссдоменных iFrame вы никак не можете программно влиять на работу iFrame, загруженного со стороннего домена. Вы можете использовать только способы выше.
То, что вы делаете - это обыкновенная подмена src фрейма, которая решает вашу задачу, но не подходит под текущую.
1
0 / 0 / 0
Регистрация: 01.06.2015
Сообщений: 18
04.05.2017, 18:13  [ТС]
Сделал как вы сказали. Но как сделать так, чтобы в -800px по ширине не был включен автоплей?

сейчас вот такой код

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
 <script>
      // 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
 
      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
      // 3. This function creates an <iframe> (and YouTube player)
      //    after the API code downloads.
      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('iframe', {
          height: '360',
          width: '640',
          videoId: '****',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
      }
 
      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) {
        event.target.playVideo();
      }
 
      // 5. The API calls this function when the player's state changes.
      //    The function indicates that when playing a video (state=1),
      //    the player should play for six seconds and then stop.
      var done = false;
      function onPlayerStateChange(event) {
        if (event.data == YT.PlayerState.PLAYING && !done) {
          setTimeout(stopVideo, 6000);
          done = true;
        }
      }
      function stopVideo() {
        player.stopVideo();
      }
    </script>
0
 Аватар для evikza
968 / 530 / 244
Регистрация: 20.05.2015
Сообщений: 776
05.05.2017, 17:27
Losapwild, здесь ничего сложно, сначала убираем действие в функции onPlayerReady(). А дальше работаем с объектом playerVars. И через тернарное условие задаем параметр для значения autoplay.

Все доступные параметры можно посмотреть в документации

Кликните здесь для просмотра всего текста
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<html>
 
<body>
  <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
  <div id="player"></div>
 
  <script>
    // 2. This code loads the IFrame Player API code asynchronously.
    var tag = document.createElement("script");
    
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName("script")[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    
    // 3. This function creates an <iframe> (and YouTube player)
    //    after the API code downloads.
    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player("player", {
        height: "360",
        width: "640",
        videoId: "k5pjOraSvYw",
        playerVars: {'controls': 1, 
                     'autoplay': (window.innerWidth < 800) ? 0 : 1, 
                     'rel': 0  },
        events: {
          onReady: onPlayerReady,
          onStateChange: onPlayerStateChange
        }
      });
    }
    
    // 4. The API will call this function when the video player is ready.
    function onPlayerReady(event) {
      //event.target.playVideo();
    }
    
    // 5. The API calls this function when the player's state changes.
    //    The function indicates that when playing a video (state=1),
    //    the player should play for six seconds and then stop.
    var done = false;
    function onPlayerStateChange(event) {
      if (event.data == YT.PlayerState.PLAYING && !done) {
        setTimeout(stopVideo, 6000);
        done = true;
      }
    }
    function stopVideo() {
      player.stopVideo();
    }
  </script>
</body>
 
</html>


Рабочий пример кода

А насчет:
На сайте скрипт iframe видео youtube. Как сделать так, что при нажатии на кнопку (class="button") видео ставилось на паузу?
Это уже работайте с функцией:

JavaScript
1
2
3
function stopVideo() {
  player.stopVideo();
}
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
05.05.2017, 17:27
Помогаю со студенческими работами здесь

JQuery табы и видео с youtube, как остановить видео при переключении?
Дорогие друзья, нужна очень ваша помощь, ума не приложу как реализовать следующую задачу, есть JQUERY табы, список переключает табы, в...

Пауза в плеере при нажатии на пробел
Помогите сделать так чтобы при нажатии пробел в плеере работала пауза то ни как не могу придумать как это сделать(((

Пауза/рывок при нажатии клавиши
Добрый день! Пишу обработчик событий для клавиатуры (left, right ,up и down) и заметил одну неприятную вещь. После первого нажатия клавиши...

Как сделать, чтобы при первом нажатии на кнопку TButton появлялось одно сообщение, а при втором нажатии - другое?
помогите как сделать в чтобы в кнопке button при первом нажатий вылазило сообщение ShowMessage('Вы ввели неверные данные, повторите...

Необходимо, чтобы при нажатии на одну из кнопок меню, фрейм с рекламой сворачивался, и разворачивался снова при нажатии на другую кнопку
Задача такая: Есть три фрейма (расположены друг под другом) - это реклама (вверху), меню (посередке) и главная страница (внизу)....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Новые блоги и статьи
Как я обхитрил таблицу Word
Alexander-7 21.03.2026
Когда мигает курсор у внешнего края таблицы, и нам надо перейти на новую строку, а при нажатии Enter создается новый ряд таблицы с ячейками, то мы вместо нервных нажатий Энтеров мы пишем любые буквы. . .
Krabik - рыболовный бот для WoW 3.3.5a
AmbA 21.03.2026
без регистрации и смс. Это не торговля, приложение не содержит рекламы. Выполняет свою непосредственную задачу - автоматизацию рыбалки в WoW - и ничего более. Однако если админы будут против -. . .
Программный отбор значений справочника
Maks 21.03.2026
Установка программного отбора значений справочника "Сотрудники" из модуля формы документа. В качестве фильтра для отбора служит предопределенное значение перечислений. Процедура. . .
Переходник USB-CAN-GPIO
Eddy_Em 20.03.2026
Достаточно давно на работе возникла необходимость в переходнике CAN-USB с гальваноразвязкой, оный и был разработан. Однако, все меня терзала совесть, что аж 48-ногий МК используется так тупо: просто. . .
Оттенки серого
Argus19 18.03.2026
Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++
8Observer8 17.03.2026
Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip
Символические и жёсткие ссылки в Linux.
algri14 15.03.2026
Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .
[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора
ФедосеевПавел 14.03.2026
Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru