Видеоплеер Brightcove не работает в Jquery Mobile

Question

Я не могу заставить видеопроигрыватель Brightcove работать с веб-страницами с помощью платформы Jquery Mobile. Я настроил несколько простых тестовых страниц, чтобы проиллюстрировать проблему:

http://www.lawruk.com/test/brightcove-jquery-mobile.htm

При нажатии на ссылки «Видео 1» и «Видео 2» видеопроигрыватель не отображается БОЛЬШЕ времени. Иногда видео загружается, что заставляет меня думать, что это проблема с синхронизацией JavaScript.

Видеопроигрыватель работает с видео страницами индивидуально.

http://www.lawruk.com/test/1.htm

http://www.lawruk.com/test/2.htm

В Firebug я заметил, что тег, представляющий видео, присутствует в DOM, но выделен серым цветом. Я использую Firefox, чтобы проверить это.

Когда я проверяю это с помощью Safari из ITouch, появляется видеопроигрыватель, но отображается сообщение об ошибке. «Видео, которое вы пытаетесь просмотреть, в настоящее время недоступно. Пожалуйста, зайдите позже».

Я не совсем уверен, является ли это ограничением Jquery Mobile или JavaScript Brightcove плохо работает с Jquery Mobile.

Какие-нибудь умные обходные пути?

Answer 1

Как упомянул naugtur, скрипт BrightCove прослушивает событие «load» или «DOMContentLoaded», которое затем вызывает метод createExperiencesPostLoad (). Jquery Mobile загружает новые страницы через Ajax, поэтому подобное событие загрузки не будет запускаться при переходе на другую страницу. К счастью, Jquery Mobile предоставляет нам событие «pageshow», которое срабатывает после завершения перехода страницы, поэтому мы можем вызвать метод createExperiencesPostLoad () после события «pageshow».

<script language="JavaScript" type="text/javascript">
    $('div').live('pageshow', function(event) {
        if ($('#my-video-player-container').is(':visible')) {
            brightcove.createExperiencesPostLoad();
        }
    }); 
</script>

Обратите внимание, что в этом примере проигрыватель содержится в элементе div с идентификатором «my-video-player-container». Я проверяю, что это видно перед вызовом метода. Вам придется изменить это в соответствии с вашим кодом. Этот метод может быть вызван дважды, но лучше дважды, чем никогда.

Ссылка на рабочую версию: http://www.lawruk.com/test/brightcove-jquery-mobile-fix.htm

Answer 2

Ничего нового.

перейдите непосредственно к http://www.lawruk.com/test/1.htm и посмотрите, как оно работает

Проблема в том, что код проигрывателя зависит от события DOMready, пока jQueryMobile извлекает страницу черезAJAX и дисплеи.Вот почему:

• ничего, кроме div страницы, не загружается, поэтому нет js-файлов из головной работы
• нет DOMready

Я вижу, вы получилиПервое, что решается путем помещения <script src=... в тело, но все же - DOMready нет.Вам придется изменить внешний сценарий или найти способ вызвать его самостоятельно.Затем вы запускаете его с обработчиком pageshow event

Или вы можете просто использовать rel="external" в ссылках на страницы с фильмами

Answer 3

Вам не хватает некоторого кода. Перейдите на эту страницу и посмотрите, как BC установил свой видеоплеер:

http://link.brightcove.com/services/player/bcpid1756040682001?bckey=AQ~~,AAABmA9XpXk~,-Kp7jNgisreGYAiU1ViDA175Evu7Kw9s&bctid=1754261492001

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

<div style="display:none">
</div>

Вот родительская страница для приведенного выше примера на тот случай, если вы этого хотите: http://support.brightcove.com/en/video-cloud/docs/player-templates#mobileVideoPlayer