मैं एएमपी विकास के लिए नौसिखिया हूं और लेआउट के चारों ओर अपना सिर लपेट नहीं सकता। मैं फुल पेज कवर बैकग्राउंड वीडियो बनाने की कोशिश कर रहा हूं।

मैंने layout='responsive' के वेरिएंट की कोशिश की है, लेकिन मुझे पेज लोड होने से पहले पेज की ऊंचाई का पता नहीं चलेगा और AFAIK मैं पेज लोड के बाद width या height प्रोप को डायनामिक रूप से अपडेट नहीं कर सकता। मैं अनिवार्य रूप से object-fit CSS प्रोप का अनुकरण कर रहा हूं। object-fit: cover स्पष्ट रूप से AMP CSS द्वारा समर्थित है।

मैंने नीचे दिए गए स्निपेट में object-fit का उपयोग करने की कोशिश की लेकिन कोई फायदा नहीं हुआ। स्निपेट में अपेक्षित व्यवहार expected div में सामान्य HTML5 video टैग का उपयोग करके प्रदर्शित किया जाता है।

<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <title>My AMP Page</title>
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
  <style amp-custom>
    * {
      box-sizing: border-box;
    }
     .container {
      height: 100vh;
      width: 100vw;
      border: 1px solid red;
      position: relative;
    }
    .video {
        object-fit: cover;
        height: 100vh; 
        position: absolute; 
    } 
    h1 {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
    }
    .expected {
      display: block;
    }
  </style>
</head>
<body>
    <div class='container'>
        <amp-video layout="fill"
            autoplay="autoplay" muted loop preload="auto"
            class="video">
            <source src='https://davidalbertoadler.com/assets/img/Fish-Tank/MP4/Fish-Tank.mp4'>
      </amp-video>
    </div>

    <div class="container expected">
        <h1>Expected</h1>
        <video layout='fill'
            autoplay="autoplay" muted loop preload="auto"
            class="video">
            <source src='https://davidalbertoadler.com/assets/img/Fish-Tank/MP4/Fish-Tank.mp4'>
        </video>
     </div>
</body>
</html>
5
david_adler 21 मई 2018, 19:51

1 उत्तर

सबसे बढ़िया उत्तर

मुझे लगता है कि आप यही खोज रहे हैं।

यदि वांछित हो तो वीडियो अग्रभूमि में सामग्री के साथ निश्चित स्थिति के साथ पृष्ठभूमि में है।

<!doctype html>
<html ⚡>

<head>
  <meta charset="utf-8">
  <title>My AMP Page</title>
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>
    body {
      -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
      animation: -amp-start 8s steps(1, end) 0s 1 normal both
    }
    
    @-webkit-keyframes -amp-start {
      from {
        visibility: hidden
      }
      to {
        visibility: visible
      }
    }
    
    @-moz-keyframes -amp-start {
      from {
        visibility: hidden
      }
      to {
        visibility: visible
      }
    }
    
    @-ms-keyframes -amp-start {
      from {
        visibility: hidden
      }
      to {
        visibility: visible
      }
    }
    
    @-o-keyframes -amp-start {
      from {
        visibility: hidden
      }
      to {
        visibility: visible
      }
    }
    
    @keyframes -amp-start {
      from {
        visibility: hidden
      }
      to {
        visibility: visible
      }
    }
  </style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
  <style amp-custom>
    * {
      box-sizing: border-box;
    }
    
    .background {
      height: 100vh;
      width: 100vw;
      border: 1px solid red;
      position: fixed;
    }
    
    .content-holder {
      position: relative;
      background-color: #fff;
      max-width: 250px;
      margin: auto;
      min-height: 2000px;
      padding: 10px;
    }
    
    .content {
      position: relative;
    }
  </style>
</head>

<body>
  <div class='background'>
    <amp-video width="480" height="270" src='https://davidalbertoadler.com/assets/img/Fish-Tank/MP4/Fish-Tank.mp4' autoplay="autoplay" layout="responsive">
      <source src='https://davidalbertoadler.com/assets/img/Fish-Tank/MP4/Fish-Tank.mp4'>
    </amp-video>
  </div>
  <div class="content-holder">
    <div class="content">
      <h1>This is content</h1>
    </div>
  </div>
</body>

</html>

3
david_adler 22 मई 2018, 15:02