Jquery код не работает в ma c os chrome, но работает в windows 10 chrome

Question

Когда я нажимаю на изображение, затем скрывается изображение, и видео YouTube автоматически воспроизводится, работает нормально в windows 10, но не работает в ma c os / ios.

Так что нужна помощь, как решить это проблема.

У меня нет ma c book, есть у моего клиента, так что проверьте мой друг ma c book, есть ли ошибка журнала консоли, но нет ошибки.

Html

<div class="video_youtube">
              <div class="play_btn"><img src="images/video_bg.png" alt=""></div>
              <iframe id="ytplayer" type="text/html" width="100%" height="420"
                src="https://www.youtube.com/embed/O3sKoVfpzFI?fs=0&modestbranding=1&color=white&iv_load_policy=3&showinfo=0&rel=0"
                frameborder="0" allowfullscreen></iframe>
            </div>

Jquery

$(document).ready(function () {
     $(".play_btn").click(function () {
        $(".play_btn").hide();
        var symbol = $("#ytplayer")[0].src.indexOf("?") > -1 ? "&" : "?";
        $("#ytplayer")[0].src += symbol + "autoplay=1";
    });
});

Answer 1

Из-за того, что запросы Cross-Origin заблокированы, этот пример не будет полностью работать. Обратите внимание на следующее.

$(function() {
  $.fn.framePlay = function(u) {
    if ($(this).prop("nodeName") == "IFRAME") {
      console.log("Play Triggered", u);
      $(this).attr("src", u);
    }
  };

  $(".play_btn").click(function() {
    $(this).hide();
    var plyr = $(this).next("iframe");
    var src = plyr.attr("src");
    plyr.framePlay(src + (src.indexOf("?") > -1 ? "&" : "?") + "autoplay=1");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video_youtube">
  <div class="play_btn"><img src="images/video_bg.png" alt="Play"></div>
  <iframe id="ytplayer" type="text/html" width="100%" height="420" src="https://www.youtube.com/embed/O3sKoVfpzFI?fs=0&modestbranding=1&color=white&iv_load_policy=3&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>
</div>

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

Answer 2

1 Вариант: См. Документ Apple

https://developer.apple.com/library/mac/documentation/quicktime/conceptual/qtscripting_html/QTScripting_HTML_Document/ScriptingHTML.html# // apple_ref / doc / uid / TP40001525-2-GettingaBrowsertoLoadQuickTime

SO Вопрос: Как воспроизводить загруженные видео в iframe в системе Ma c

2 Вариант: попробуйте использовать тег объекта Embed для воспроизведения видео

SO Вопрос:

Создание URL-адресов youtube.com/embed для работы на iOS

встроенное видео youtube не работает с Safari

3 Вариант: используйте javascript вместо Jquery

Не тестировалось!

Я бы предложил javascript вместо JQuery, здесь я преобразовал ваш код в javascript:

var elements = document.getElementsByClassName("play_btn");

var play = function() {
    this.style.display = 'none';
    var symbol = document.getElementById("ytplayer").src.indexOf("?") > -1 ? "&" : "?";
    document.getElementById("ytplayer").src += symbol + "autoplay=1";
};

for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', play, false);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="video_youtube">
    <div class="play_btn"><img src="images/video_bg.png" alt="Play"></div>
    <iframe id="ytplayer" type="text/html" width="100%" height="420"
    src="https://www.youtube.com/embed/O3sKoVfpzFI?fs=0&modestbranding=1&color=white&iv_load_policy=3&showinfo=0&rel=0"
    frameborder="0" allowfullscreen></iframe>
</div>