时间戳

首页 > 解决方案 > Jquery 代码不能在 mac os chrome 中工作，但在 windows 10 chrome 中工作

javascript - Jquery 代码不能在 mac os chrome 中工作，但在 windows 10 chrome 中工作

问题描述

当我单击图像时，图像隐藏和 YouTube 视频自动播放它在 Windows 10 中工作正常，但在 mac os / ios 中不工作。

所以需要帮助如何解决这个问题。

我的客户没有 mac book，所以检查我的朋友 mac 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";
    });
});

标签： javascriptjquery

解决方案

由于跨域请求被阻止，此示例将无法完全运行。考虑以下。

$(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 元素的 Source。它有一个 URL 参数。

推荐阅读