निम्नलिखित परिदृश्यों में <div> टैग amp-story के साथ कैसे इंटरैक्ट करते हैं? एएमपी-स्टोरी के तेजी से लोडिंग के साथ, एएमपी त्रुटियों के बिना, आदि के काम करने के तरीके के अनुसार कौन सा परिदृश्य काम करता है और क्यों?

परिदृश्य 1: एम्प-स्टोरी के बाहर div टैग

<div>
  <div class="amp-video-container">
    <amp-story-page id="page-1">
      <amp-story-grid-layer template="fill">
            <amp-video autoplay
                loop
                width="720"
                height="960"
                poster="https://ampbyexample.com/img/story_video_dog_cover.jpg"
                layout="responsive">
                <source src="https://ampbyexample.com/video/story_video_dog.mp4"
                type="video/mp4">
            </amp-video>
      </amp-story-grid-layer>
    </amp-story-page>  
  </div>
</div>

परिदृश्य 2: amp-story-page के अंदर div टैग्स

<amp-story-page id="page-1">
    <div>
        <div class="amp-video-container">
            <amp-story-grid-layer template="fill">
                <amp-video autoplay
                loop
                width="720"
                height="960"
                poster="https://ampbyexample.com/img/story_video_dog_cover.jpg"
                layout="responsive">
                <source src="https://ampbyexample.com/video/story_video_dog.mp4"
                type="video/mp4">
                </amp-video>
            </amp-story-grid-layer>
        </div>
    </div>
</amp-story-page> 

परिदृश्य 3: amp-story-grid-layer के अंदर div टैग

<amp-story-page id="page-1">
    <amp-story-grid-layer template="fill">
        <div>
            <div class="amp-video-container">
                <amp-video autoplay
                loop
                width="720"
                height="960"
                poster="https://ampbyexample.com/img/story_video_dog_cover.jpg"
                layout="responsive">
                <source src="https://ampbyexample.com/video/story_video_dog.mp4"
                type="video/mp4">
                </amp-video>
            </div>
        </div>
    </amp-story-grid-layer>
</amp-story-page>  

संदर्भ https://xbyexample.appspot.com/advanced/video_carousels_with_amp-carousel/

0
MobiCycle Ltd 13 अक्टूबर 2018, 16:12

1 उत्तर

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

परिदृश्य 1 और 2 मान्य नहीं हैं। कहानियों में सभी सामग्री एक परत के भीतर होनी चाहिए, इसलिए केवल परिदृश्य 3 ही इस मानदंड को पूरा करता है।

यह जाँचने के लिए कि आपका दस्तावेज़ मान्य AMP है या नहीं, http://validator.ampproject.org/ देखें। एएमपी कहानी की संरचना के बारे में अधिक जानकारी के लिए, एएमपी कहानी के हिस्सों को समझना देखें। ए>।

1
Jon Newmuis 13 अक्टूबर 2018, 16:20