Как я могу предотвратить ускоренную перемотку вперед / очистку / пропуск вперед во встроенном видео YouTube? - PullRequest
Новая
       19

Как я могу предотвратить ускоренную перемотку вперед / очистку / пропуск вперед во встроенном видео YouTube?

0 голосов
/ 30 января 2019

Я бы хотел представить пользователю встроенное HTML-видео YouTube и запретить ему быструю перемотку вперед или переход к концу видео.Я могу пройти большую часть пути, используя API YouTube для удаления элементов управления проигрывателя (см. Фрагмент кода), однако на iOS все еще можно запустить видео в собственном проигрывателе (вместе с элементами управления scrub), нажав на-zoom.Есть ли простой способ сделать это?

Должен заметить, что я также попытался использовать видео в формате .m4v вместо файла, что дает больше возможностей в HTML5, но сейчас это не идеальное решение для меня (пропускная способность и проблемы с загрузкой). 

var tag = document.createElement('script');

      tag.src = "https://www.youtube.com/iframe_api";
      var firstScriptTag = document.getElementsByTagName('script')[0];
      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

      var player;
      function onYouTubeIframeAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'KjLYjf4B7xQ',
          events: {
            'onReady': onPlayerReady
          },
         playerVars: {rel: 0, 
                      showinfo: 0, 
                      controls: 0, 
                      disablekb: 1,
                      modestbranding: 1,
                      cc_load_policy: 1,
                      playsinline: 1}
        });
      }

      function onPlayerReady(event) {
        event.target.playVideo();
      }

<div id="player"></div>

(я пытался заставить его работать как фрагмент кода, но были перекрестные ошибки.)

Любая помощь приветствуется.Спасибо!

Редактировать: в дополнение к ответу Маурисио мне также пришлось добавить кнопку, чтобы запустить видео, потому что пользователь не может щелкнуть внутри видео, чтобы запустить его.Примерно так: 

  function onPlayerReady(event) {
    event.target.playVideo();

    var playButton = document.getElementById("play-button");
    playButton.addEventListener("click", function() {
       player.playVideo();
    });
  }

А для кнопки: 

<button id="play-button">Play Video</button>

1 Ответ

0 голосов
/ 30 января 2019

Если вам нужно отключить взаимодействие пользователя с видео, вы можете добавить стиль css в div, содержащий iframe.

В этом случае добавьте следующий стиль css: 

pointer-events: none

Итак, CSS будет выглядеть следующим образом: 

#player {
  pointer-events: none;
}
...