个人中心
gpt4 book ai didi

javascript - 为什么我的代码可以在除 Safari 之外的所有浏览器中播放视频？

转载 作者：太空宇宙 更新时间：2023-11-04 06:59:55 25 4
gpt4 key购买 nike

我正在开发一个需要在 iFrame 中播放视频的网站，除了 Safari 之外，它大部分都能正常工作，如果我在 Safari 中点击一个视频，它不会播放，但如果我点击它几次，它开始播放但没有图像，我只能听到声音，为什么？如何解决？

我的最小代码如下所示:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link media="all" type="text/css" rel="stylesheet" href="https://cdn.ahrefs.com/assets/css/bootstrap.min.css">
    <link media="all" type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,300,100italic,100,300italic,400italic,700,700italic,900,900italic">
    <link media="screen" type="text/css" rel="stylesheet" href="https://cdn.ahrefs.com/assets/css/home-responsive.css?20180815-001">

    <style>

      div.Table
      {
        font-size: 218%;
        text-align: center;
      }

      tr a{ font-size: 18px;color:#aabbcc; }
      tr a:hover { color:#ddeeff; }

      #modal
      {
        display: none;
        position: fixed;
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        top: 0;
        left: 0;
        background: rgba(24, 24, 24, .6);
        z-index: 999;
      }
      #modal .content
      {
        position: relative;
        width: 55%;
        height: 65vh;
        margin: auto; /* allows horyzontal and vertical alignment as .content is in flex container */
      }
      #modal .content .yt-video
      {
        display: block;
        width: 100%;
        height: calc(100% - 45px);
      }
      #modal .content .title
      {
        box-sizing: border-box;
        height: 45px;
        line-height: 23px;
        padding: 12px 4px;
        margin: 0;
        background: #007bff;
        color: #fff;
        text-align: center;
        font-size: 26px;
        max-width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      #modal .close
      {
        position: absolute;
        top: 0;
        right: 0;
        width: 45px;
        height: 45px;
        line-height: 36px;
        text-align: center;
        border: 0;
        font-weight: bold;
        font-size: 38px;
        color: #fff;
        background: #366;
        cursor: pointer;
        transition: background .2s;
      }
      #modal .content .close .a { font-size:38px;color: #ffffff; }
      #modal .close:hover, #modal .close:active { background: #ff0000; }
      #modal.is-visible { display: flex; }

    </style>
  </head>

  <body class="page__guest ahrefs page-home">
    <div id="localizejs">
      <div class="content">

        <a id="Videos"></a>
        <div class="tools">
          <div class="container center">

                  <div class="tools-icon">
                    <a href="https://www.youtube.com/embed/IgBIaZgoAQc?autoplay=1" target=_blank data-target="modal" data-video-title="Keypad Pins Easily Stolen"><img src="https://i.ytimg.com/vi/IgBIaZgoAQc/hqdefault.jpg?sqp=-oaymwEXCPYBEIoBSFryq4qpAwkIARUAAIhCGAE=&rs=AOn4CLDW3KcjXsTR5utmlvhFfibLe-bvRg" width=170 height=110 alt="Keypad Pins Easily Stolen"></a>
                    <p class="tools-icon__text">Keypad Pins Easily Stolen</p>
                  </div>

          </div>
        </div>

      <script src="js/jquery.min.js"></script>
      <script defer src="js/home.js"></script>

    </div>

    <!-- the modal div that will open when an anchor link is clicked to show the related video in an iframe. -->

    <div id="modal">
      <div class="content">
        <div class="close"><a onclick = "return close_iFrame();">&times;</a></div>
        <h4 class="title">.</h4>
        <iframe class="yt-video" allowfullscreen></iframe>
      </div>
    </div>

    <script>
      var modal = document.getElementById('modal'),
          closeBtn = modal.querySelector('close'),
          ytVideo = modal.querySelector('.content .yt-video'),
          title = modal.querySelector('.content .title'),
          anchors = document.querySelectorAll('a[data-target="modal"]'),
          l = anchors.length;

      for (var i = 0; i < l; i++)
      {
        anchors[i].addEventListener("click", function (e)
        {
          e.preventDefault();
          title.textContent = this.dataset.videoTitle || 'No title';
          ytVideo.src = this.href;
          modal.classList.toggle('is-visible');
          modal.focus();
        });
      }

      modal.addEventListener("keydown", function (e)
      {
        if (e.keyCode == 27)
        {
          title.textContent = '';
          ytVideo.src = '';
          this.classList.toggle('is-visible');
        }
      });

      function close_iFrame()
      {
        var modal = document.getElementById('modal'),
            ytVideo = modal.querySelector('.content .yt-video');

        ytVideo.src = '';
        modal.classList.toggle('is-visible');
      }

    </script>
  </body>
</html>

最佳答案

您是否检查过 Safari 是否与您函数中的每一位代码都兼容？它的大多数问题是因为它不是最新的很多东西。 IE (Edge) 也是如此。

关于javascript - 为什么我的代码可以在除 Safari 之外的所有浏览器中播放视频？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52105310/

25 4 0
文章推荐： javascript - 如何使用 JavaScript 更改 CreateTextNode 的样式
文章推荐： python - 以普通用户身份运行时，docker-compose 给出错误 "ImportError: No module named ssl_match_hostname"
文章推荐： python - 如何计算多个csv文件中的行数
文章推荐： python - 尝试使用 python 2.7 执行 python 3 代码的语法错误
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com