Блог

Я настроил проигрыватель HTML5 (используя video.js ), который воспроизводит рекламное видео перед самим видео.

Проблема возникает на устройствах iPhone, когда Safari вызывает встроенный проигрыватель iOS для воспроизведения видео с помощью элементов управления поиском, которые позволяют пользователю легко пропускать рекламу.

Я применил атрибуты «playisinline» и «webkit-playisinline» к тегу, и это работает ТОЛЬКО на iOS 10 (кстати, вы можете применить это изначально при следующем обновлении), но на iOS 9 он по-прежнему показывает встроенное воспроизведение с возможностями поиска.

Я пытался использовать это, как предложено здесь, в другом месте, но это очень глючно и приводит к конфликтам в моей реализации проигрывателя.

Мне просто нужно управлять полноэкранным встроенным проигрывателем и избегать поиска, сбрасывая текущее время воспроизведения в него, но я не могу найти, как это сделать.

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

Вы пробовали приведенный ниже фрагмент? Это предотвратит поиск вперед.

Идея довольно проста: использовать интервал для захвата текущей позиции каждую секунду. Если позиция поиска больше текущей позиции, установите ее обратно. Это всего лишь обходной путь 🙂

 if (document.getElementById("vid1")) {
  videojs("vid1").ready(function() {
    
    var myPlayer = this;

    //Set initial time to 0
    var currentTime = 0;
    
    //This example allows users to seek backwards but not forwards.
    //To disable all seeking replace the if statements from the next
    //two functions with myPlayer.currentTime(currentTime);

    myPlayer.on("seeking", function(event) {
      if (currentTime < myPlayer.currentTime()) {
        myPlayer.currentTime(currentTime);
      }
    });

    myPlayer.on("seeked", function(event) {
      if (currentTime < myPlayer.currentTime()) {
        myPlayer.currentTime(currentTime);
      }
    });

    setInterval(function() {
      if (!myPlayer.paused()) {
        currentTime = myPlayer.currentTime();
      }
    }, 1000);

  });
}  

 <link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet"/>
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<video id="vid1" src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" controls class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="360" preload="auto"></video>