代码之家 › 专栏 › 技术社区 › Frank
为什么我的代码可以在除Safari之外的所有浏览器中播放视频?

iframe video css html javascript
Frank · 技术社区 · 6 年前
我正在开发一个需要在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>
1 回复 | 直到 6 年前
night-gold 6 年前