Видео HTML5 не будет работать с плагином jquery bxSlider на iPad

Я использую плагин Jquery bxSlider для создания слайдер-галереи изображений и видео для iPad. Я использую HTML-тег видео для реализации видео:

<video width="400" height="260" controls>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
</video>

Видео исходный код отлично работает на iPad, когда он сам по себе, однако при объединении с разметкой слайдера видео не воспроизводится.

Тестовая ссылка: http://www.ekimmedia.com/totem/TIC/MG/

Если я удалю этот script:

<script src="js/jquery.bxSlider.js" type="text/javascript"></script>

из исходного кода, видео затем работает на iPad.

Исправлена тестовая ссылка с bxSlider script: http://www.ekimmedia.com/totem/TIC/MG/index10.html

Не уверен, что вызывает конфликт.

Спасибо,

Ответ 1

Единственный способ, которым я получаю этот слайдер, - это загрузить его локально с официального сайта bxslider. И попробуйте следовать учебник о том, как сделать отзывчивый слайдер видео. Они нигде не упоминают об этих изображениях стрелок, поскольку они не входят в css. Поэтому не забудьте захватить папку с изображениями из загруженного zip файла bxslider и вставить его в папку js вашего проекта.

В моей окончательной настройке у меня было 4 локальных файла в папке js: jquery-2.2.2.min.js, jquery.bxslider.css, jquery.bxslider.js и jquery.fitvids.js. В папке js также содержалась подпапка images, где были controls.png и bx_loader.gif.

Затем все это было указано в файле HTML следующим образом:

<head>
  <link rel="stylesheet" href="js/jquery.bxslider.css">
  <script src="js/jquery-2.2.2.min.js"></script>
  <script src="js/jquery.fitvids.js"></script>
  <script src="js/jquery.bxslider.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
    $('.bxslider').bxSlider({
      video: true,
      useCSS: false
    });
  });
  </script>
</head>
<body>
    <ul class="bxslider">
        <li>
            <iframe src="YOUR_LINK_TO_VIDEO" width="400" height="260" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        </li>
        <li>
            <iframe src="YOUR_LINK_TO_VIDEO" width="400" height="260" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        </li>
    </ul>
</body>

Я тестировал свое решение на устройстве iOS, и все работает нормально. Аналогичная решение по этой проблеме вы также можете изучить.

Ответ 2

Попробуйте изменить положение

 `<script src="js/jquery.bxSlider.js" type="text/javascript"></script>`

my be из-за конфликации библиотек, поставьте его в середине всех скриптов или внизу или в любом месте elc, я уверен, что он работает.

Ответ 3

Попробуйте просмотреть элемент видео с помощью инструмента отладки, такого как инструменты разработчика firebug или Safari. Для этого вам, возможно, придется использовать браузер ПК /Mac. Посмотрите, не потеряет ли элемент видео какие-либо атрибуты или добавит дополнительные вещи после запуска jquery script. Сделав некоторую мобильную разработку с участием видео, я могу сказать вам, что это очень обидно, тем более, что на мобильных устройствах около 82 миллиардов различных браузеров и версий ОС. Если вы видите, что элемент видео изменился, вам нужно будет добавить script, который вернет его к чему-то, видимому на вашем iPad.

Вы также можете убедиться, что ваши видео обернуты правильно. Похоже, этот слайдер script требует следующего формата:

<div id="slideshowcontainer">
 <div>slide1 content</div>
 <div>slide2 content</div>
 <div>etc...</div>
</div>

OR

<ul id="slideshowcontainer">
 <li>slide1 content</li>
 <li>slide2 content</li>
 <li>etc...</li>
</ul>