@harutoqsuzyan

Вертикальная видео не работает на ipad?

Html code:
------------
<div class="video-component">
    <div class="video-block">
        <div class="video-wrap">
            <video controls preload="none" muted playsinline poster=""
                   {% if component.image %}
                        {% for min_width, video_size in versions_params.resolutions.items %}
                            data-poster-{{min_width}}="{% version_url component.image.name video_size extension='jpg' %}"
                        {% endfor %}
                   {% endif %}
            >
                {% for extension in versions_params.extensions %}
                    {% for min_width, video_size in versions_params.resolutions.items %}
                        <source data-src="{% version_url component.video.name video_size extension=extension %}" type="video/{{ extension }}" data-min-width={{min_width}}>
                    {% endfor %}
                {% endfor %}
            </video>

            <div class="video-play">
                <span class="icon-play"></span>
            </div>
        </div>
    </div>

  <div class="video-caption">{{ component.caption }}</div>
</div>


javascript code:
------------------
const videos = $('.video-component video');

function addSourceToVideo(element, screen) {
  element.find(`[data-min-width=${screen}]`).each(function() {
    $(this).attr('src', $(this).data('src'));
  });
  element[0].load();
  element.attr('poster', element.data(`poster-${screen}`));
}

function videoSize() {
  if (videos.get(0)) {
    videos.each(function() {
      const windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
      const screen = windowWidth < 768 ? '320' : windowWidth > 767 && windowWidth < 1220 ? '768' : '1220';
      addSourceToVideo($(this), screen);
    });
  }
}

function handlePlay() {
  videos.on('play', function (){
    $(this).next().hide();
  });
}

function playVideo() {
  $('.video-play').on('click', function (){
    $(this).prev().get(0).play();
  });
}

$(function() {
  videoSize();
  playVideo();
  handlePlay();
});


----------------------------------------------------
не работает только на ipad, и только тогда , когда у мнея вертикальная видео.

638f50fc072eb478600291.png
638f510ac9b31578225177.png
  • Вопрос задан
  • 38 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы