Youtube Iframe отключить паузу видео

Мне нужно воспроизвести видео на моей веб-странице. Но мне нужно отказать в контроле. Я положил "controls = 0", но игрок имеет действие паузы, когда я нажимаю на него. Могу ли я отключить действие "пауза" в проигрывателе YouTube?

Ответ 1

Невозможно полностью отключить паузу.

Вы можете прослушивать события YT.PlayerState.PAUSED в обработчике onStateChange и сразу же вызвать playVideo(), когда вы его обнаружите, но.. Я не знаю, похоже, это было бы не очень удобно.

Ответ 2

Вы можете попробовать разместить контейнер div над видео без ничего. Другими словами, пустой контейнер имеет тот же размер, что и сам видео. Это должно сделать, когда кто-то пытается щелкнуть по нему, они на самом деле будут нажимать на прозрачный контейнер над ним и не смогут приостановить работу. Это должно сработать. Вам также может потребоваться изменить z-index, чтобы убедиться, что пустой контейнер div действительно по видео. (Сначала проверьте контейнер контейнера с цветом фона, и если цветная коробка закрывает видео, вы можете вернуться и удалить цвет, и он будет работать одинаково.) Удачи.

Кроме того, установите для параметра disablekb значение 1, чтобы пользователь не мог сделать паузу даже с помощью пробела.

Ответ 3

Используйте следующий CSS для элемента DOM:

.ytplayer {pointer-events: none;}

Ответ 4

Если вы показываете свое видео через HTML и получаете доступ к классу CSS, используемому для показа вашего видео, вы можете сделать следующее.

Ваш HTML будет выглядеть примерно так:

<iframe id="ytplayer" type="text/html" width="720" height="405"
src="https://www.youtube.com/watch?v=z4O-5eV4LiA"
frameborder="0" allowfullscreen>

добавьте имя класса по вашему выбору, я выбираю ytplayer

class="ytplayer"

он будет выглядеть следующим образом с моим примером

<iframe class="ytplayer" id="ytplayer" type="text/html" width="720" height="405"
src="https://www.youtube.com/watch?v=z4O-5eV4LiA"
frameborder="0" allowfullscreen>

Затем в вашем файле CSS добавьте правила для изменения вашего класса. Я использовал ytplayer, но вы можете выбрать другое имя класса, убедитесь, что оно соответствует тому, которое вы использовали выше.

.ytplayer {
pointer-events: none;
position: absolute;
}

Это должно сделать это.

Ответ 5

"? controls = 0" только скрыть нижнюю панель управления в проигрывателе, но при нажатии на экран воспроизведение/пауза будет работать как обычно

Вот значения параметров управления:

  • controls = 0 - Элементы управления проигрывателем не отображаются в проигрывателе. Для AS3 игроков, Flash Player загружается сразу.
  • controls = 1 - Элементы управления проигрывателя отображаются в проигрывателе. Для игроков AS3, Flash Player загружается немедленно.
  • controls = 2 - Элементы управления проигрывателем в проигрывателе. Для игроков AS3, Flash Player загружает пользователя, когда пользователь начинает воспроизведение видео.

проверьте эту статью, это действительно полезно https://developers.google.com/youtube/player_parameters

Ответ 6

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

// block screen so user cant click
var blockDiv = $(document.createElement('div'))
        .attr('id', 'blockDiv')
        .height('100%').width('100%')
        .css({'z-index':'3333', 'position' : 'absolute', 'top': '0', 'left':'0'});
$('body').append(blockDiv);

Ответ 7

Это мое кодовое решение, позволяющее автоматически воспроизводить видео без возможности приостановки на рабочем столе, но разрешить на мобильном устройстве

  <style>
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    /* knock out nasty borders */
    outline: 2px solid white !important;
    outline-offset: -1px;
    pointer-events: none;
  }

  .wrapper-with-intrinsic-ratio {
    position: relative;
    padding-bottom: 56.25%;
  }

  .element-to-stretch iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffff;
  }

  .wrapper-with-intrinsic-ratio .element-to-stretch {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  @media only screen and (max-width: 900px) {
    .noclick {
      display: none;
    }
  }

  .noclick {
    z-index: 2000;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>
<div class="target2">
<div class="noclick"></div>
<div class="wrapper-with-intrinsic-ratio">
<div class="element-to-stretch">
<div class="overlay"><iframe title="YouTube video player" src="https://www.youtube.com/embed/tgbNymZ7vqY?rel=0&amp;autoplay=1&amp;controls=0&amp;disablekb=1&amp;loop=1&amp;playlist=tgbNymZ7vqY&amp;playsinline=1&amp;iv_load_policy=3&amp;mute=1&amp;widgetid=1&amp;widget_referrer" width="100%" height="100%" frameborder="0" allowfullscreen=""></iframe></div>
</div>
</div>
</div>

Обратите внимание, чтобы видео повторялось, а не воспроизводилось автоматически, следующий элемент в списке воспроизведения устанавливает для списка воспроизведения идентификатор видео (youtube), который не дает рекомендации по видео для мобильных устройств в видео браузера