Выход из полноэкранного HTML5-видео Разрывает изображения постеров на Android

Question

У меня есть сценарий, где у меня есть результаты поиска, которые содержат видео контент. Каждый элемент видео в результатах имеет видеоплеер размером с миниатюру, поэтому в каждом наборе результатов может быть до 10 html 5 видеоплееров. Когда пользователь нажимает на миниатюру, видео переходит в полноэкранный режим и автоматически воспроизводит видео. Когда пользователь выходит из полноэкранного режима, видео останавливается.

Все это прекрасно работает на устройствах с iOS, но на Android у меня значительно больше проблем с обработкой. Вот логика, как у меня сейчас:

    goFullScreen: function (ev) {
      var el                = ev.target,
          isVideoFullscreen = el.webkitDisplayingFullscreen;

      el.webkitEnterFullScreen();
      // the approach below is the only way I could get reliable fullscreen detection on android
      $(window).bind("resize", function (e) {
        if (isVideoFullscreen != el.webkitDisplayingFullscreen) {
          isVideoFullscreen = el.webkitDisplayingFullscreen;

          if (isVideoFullscreen) {
            el.load();
            el.play();
          } else {
            el.pause();
          }
        }
      });
    }

Несмотря на то, что iOS не требует всего этого, даже обработки, она все равно работает отлично. Проблема с Android заключается в том, что когда я выхожу из полноэкранного режима, видео приостанавливается, но изображение плаката заменяется на видео, которое я только что приостановил, на кадре из видео (как и следовало ожидать), но все последующие видео в наборе результатов имеют свой плакат изображение заменено уродливым значком видео. В результате миниатюры просто выглядят как битые видео. Но если вы нажмете на них, они все равно будут работать в полноэкранном режиме и играть просто отлично

Я тестирую на Galaxy Nexus и Galaxy SII. Я могу сказать, что el.pause() не несет ответственности, в случае удаления видео продолжит воспроизведение в виде миниатюры, и все теги видео под ним все равно будут иметь значок разбитого плаката.

Это работает, как и ожидалось, в настольном браузере webkit и на устройствах iOS. Эта проблема возникает только на устройствах Android 4+. Также помните, что запрос EnterFullscreen должен выполняться в той области, в которой он находится. Вызов из этой области будет препятствовать его работе из-за ограничений безопасности на мобильных устройствах. Я в значительной степени исчерпал все идеи, поэтому я надеюсь найти здесь еще немного.

Любые предложения будут ценны.

Answer 1

Я отказался от попыток решить все ошибки и причуды в Android. Вместо этого я просто ссылаюсь прямо на видео mpeg4 из эскизов. Так что больше нет видео тегов, больше нет обработки событий.

Единственным побочным эффектом является то, что некоторые версии Android отображают диалог о том, как вы хотите воспроизвести видео, что не идеально, но лучше, чем любая другая альтернатива, которую я смог найти. К счастью, опыт iOS остается неизменным независимо от того, какой подход я выберу.