2

我有一种奇怪的行为amp-video...

场景是这样的：

我有一个包含三张幻灯片的故事，每张幻灯片都有视频（amp-video），其中两个被静音（添加了“ noaudio”属性），当导出该故事并在浏览器中打开时，我可以取消静音所有故事（包括静音的）...如果我将它们全部静音，则均衡器图标将被隐藏。似乎如果我有一个unmuted（例如 10 个）静音视频，那么这种行为就被打破了。

这是生成的 HTML 代码：

<amp-story id="story" standalone="" publisher=""
  publisher-logo-src="https://www.google.com.ua/url?sa=i&amp;rct=j&amp;q=&amp;esrc=s&amp;source=images&amp;cd=&amp;cad=rja&amp;uact=8&amp;ved=2ahUKEwiU4L6X2YfcAhWMkiwKHTnLCzAQjRx6BAgBEAU&amp;url=https%3A%2F%2Fthemodernentrepreneur.com%2Fproducts%2Famp-for-wordpress%2F&amp;psig=AOvVaw0nM5DdfxSmpyBJp3lSlUi-&amp;ust=1530871040243265"
  poster-portrait-src="https://www.google.com.ua/url?sa=i&amp;rct=j&amp;q=&amp;esrc=s&amp;source=images&amp;cd=&amp;cad=rja&amp;uact=8&amp;ved=2ahUKEwiU4L6X2YfcAhWMkiwKHTnLCzAQjRx6BAgBEAU&amp;url=https%3A%2F%2Fthemodernentrepreneur.com%2Fproducts%2Famp-for-wordpress%2F&amp;psig=AOvVaw0nM5DdfxSmpyBJp3lSlUi-&amp;ust=1530871040243265"
  class="i-amphtml-element i-amphtml-layout-container i-amphtml-built i-amphtml-layout i-amphtml-story-loaded i-amphtml-story-bookend-active"
  i-amphtml-layout="container" muted="" orientation="portrait">
  <amp-story-page auto-advance-after="10s" id="0" style="background: #eeeeee"
    class="i-amphtml-element i-amphtml-layout-container i-amphtml-built i-amphtml-layout i-amphtml-story-page-loaded"
    i-amphtml-layout="container" role="region" distance="1" aria-hidden="true">
    <amp-story-grid-layer template="fill"
      class="i-amphtml-element i-amphtml-layout-container i-amphtml-story-layer i-amphtml-story-grid-template-fill i-amphtml-built i-amphtml-layout"
      i-amphtml-layout="container">
      <div class="bg-wrapper" style="background: ;"></div>
    </amp-story-grid-layer>
    <amp-story-grid-layer template="horizontal"
      class="i-amphtml-element i-amphtml-layout-container i-amphtml-story-layer i-amphtml-story-grid-template-horizontal i-amphtml-built i-amphtml-layout"
      i-amphtml-layout="container">
      <div class="fullscreen drag-item animate small-image"
        style="position: absolute;            width: 315.94%;       height: 100.00%;                 bottom: 0;       top: initial;            left: -107.94%;">
        <div draggable="true" id="layer0"
          style="        position: absolute;        width: 100.04%;        height: 100.13%;        transform: rotate(0deg);        ">
          <amp-video
            class="full-screen-video i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-disable-mediasession i-amphtml-poolbound i-amphtml-media-component i-amphtml-video-interface i-amphtml-built i-amphtml-layout"
            autoplay="" noaudio="" layout="responsive" width="1103.4314878574003" height="620.7794413701345"
            poster="/media/3518cdb1-2c1b-4d9b-9bc4-47a286ac3ddb.png"
            style="        border-radius: 0px;        width:100%;height: inherit;opacity: 1;"
            i-amphtml-layout="responsive" preload="auto">
            <i-amphtml-sizer slot="i-amphtml-svc" style="padding-top: 56.259%;"></i-amphtml-sizer>
            <div fallback="">
              <p>This browser does not support the video element.</p>
            </div> <video
              class="i-amphtml-pool-media i-amphtml-pool-video i-amphtml-fill-content i-amphtml-replaced-content"
              id="i-amphtml-pool-media-5" playsinline="" webkit-playsinline=""
              poster="/media/3518cdb1-2c1b-4d9b-9bc4-47a286ac3ddb.png" muted="">
              <source
                src="http://localhost:3978/media/schnuffelnd-zur-coronadiagnose (1) (1) (online-video-cutter.com) (1).mp4#t=0,10">
              </video>
          </amp-video>
        </div>
      </div>
    </amp-story-grid-layer>
    <div class="i-amphtml-story-spinner" aria-hidden="true" aria-label="Loading video">
      <div class="i-amphtml-story-spinner-container">
        <div class="i-amphtml-story-spinner-layer">
          <div class="i-amphtml-story-spinner-circle-clipper left"></div>
          <div class="i-amphtml-story-spinner-circle-clipper right"></div>
        </div>
      </div>
    </div>
  </amp-story-page>
  <amp-story-page auto-advance-after="10s" id="1" style="background: #eeeeee"
    class="i-amphtml-element i-amphtml-layout-container i-amphtml-built i-amphtml-layout i-amphtml-story-page-loaded"
    i-amphtml-layout="container" role="region" distance="1" aria-hidden="true">
    <amp-story-grid-layer template="fill"
      class="i-amphtml-element i-amphtml-layout-container i-amphtml-story-layer i-amphtml-story-grid-template-fill i-amphtml-built i-amphtml-layout"
      i-amphtml-layout="container">
      <div class="bg-wrapper" style="background: ;"></div>
    </amp-story-grid-layer>
    <amp-story-grid-layer template="horizontal"
      class="i-amphtml-element i-amphtml-layout-container i-amphtml-story-layer i-amphtml-story-grid-template-horizontal i-amphtml-built i-amphtml-layout"
      i-amphtml-layout="container">
      <div class="fullscreen drag-item animate small-image"
        style="position: absolute;            width: 315.94%;       height: 100.00%;                 bottom: 0;       top: initial;            left: -107.94%;">
        <div draggable="true" id="layer0"
          style="        position: absolute;        width: 100.04%;        height: 100.13%;        transform: rotate(0deg);        ">
          <amp-video
            class="full-screen-video i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-disable-mediasession i-amphtml-poolbound i-amphtml-media-component i-amphtml-video-interface i-amphtml-built i-amphtml-layout"
            autoplay="" layout="responsive" width="1103.4314878574003" height="620.7794413701345"
            poster="/media/9d836e49-f347-48c7-8eb3-55312e134b59.png"
            style="        border-radius: 0px;        width:100%;height: inherit;opacity: 1;"
            i-amphtml-layout="responsive" preload="auto">
            <i-amphtml-sizer slot="i-amphtml-svc" style="padding-top: 56.259%;"></i-amphtml-sizer>
            <div fallback="">
              <p>This browser does not support the video element.</p>
            </div> <video
              class="i-amphtml-pool-media i-amphtml-pool-video i-amphtml-fill-content i-amphtml-replaced-content"
              id="i-amphtml-pool-media-4" playsinline="" webkit-playsinline="" preload="auto"
              poster="/media/9d836e49-f347-48c7-8eb3-55312e134b59.png" muted="">
              <source
                src="http://localhost:3978/media/schnuffelnd-zur-coronadiagnose (1) (1) (online-video-cutter.com) (2).mp4#t=0,10">
              </video>
            <i-amphtml-video-icon class="amp-video-eq">
              <div class="amp-video-eq-col">
                <div class="amp-video-eq-filler amp-video-eq-1-1"></div>
                <div class="amp-video-eq-filler amp-video-eq-1-2"></div>
              </div>
              <div class="amp-video-eq-col">
                <div class="amp-video-eq-filler amp-video-eq-2-1"></div>
                <div class="amp-video-eq-filler amp-video-eq-2-2"></div>
              </div>
              <div class="amp-video-eq-col">
                <div class="amp-video-eq-filler amp-video-eq-3-1"></div>
                <div class="amp-video-eq-filler amp-video-eq-3-2"></div>
              </div>
              <div class="amp-video-eq-col">
                <div class="amp-video-eq-filler amp-video-eq-4-1"></div>
                <div class="amp-video-eq-filler amp-video-eq-4-2"></div>
              </div>
            </i-amphtml-video-icon>
          </amp-video>
        </div>
      </div>
    </amp-story-grid-layer>
    <div class="i-amphtml-story-spinner" aria-hidden="true" aria-label="Loading video">
      <div class="i-amphtml-story-spinner-container">
        <div class="i-amphtml-story-spinner-layer">
          <div class="i-amphtml-story-spinner-circle-clipper left"></div>
          <div class="i-amphtml-story-spinner-circle-clipper right"></div>
        </div>
      </div>
    </div>
  </amp-story-page>
  <amp-story-page auto-advance-after="10s" id="2" style="background: #eeeeee"
    class="i-amphtml-element i-amphtml-layout-container i-amphtml-built i-amphtml-layout i-amphtml-story-page-loaded"
    i-amphtml-layout="container" role="region" active="" distance="0" aria-hidden="false">
    <amp-story-grid-layer template="fill"
      class="i-amphtml-element i-amphtml-layout-container i-amphtml-story-layer i-amphtml-story-grid-template-fill i-amphtml-built i-amphtml-layout"
      i-amphtml-layout="container">
      <div class="bg-wrapper" style="background: ;"></div>
    </amp-story-grid-layer>
    <amp-story-grid-layer template="horizontal"
      class="i-amphtml-element i-amphtml-layout-container i-amphtml-story-layer i-amphtml-story-grid-template-horizontal i-amphtml-built i-amphtml-layout"
      i-amphtml-layout="container">
      <div class="fullscreen drag-item animate small-image"
        style="position: absolute;            width: 315.94%;       height: 100.00%;                 bottom: 0;       top: initial;            left: -107.94%;">
        <div draggable="true" id="layer0"
          style="        position: absolute;        width: 100.04%;        height: 100.13%;        transform: rotate(0deg);        ">
          <amp-video
            class="full-screen-video i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-disable-mediasession i-amphtml-poolbound i-amphtml-media-component i-amphtml-video-interface i-amphtml-built i-amphtml-layout"
            autoplay="" noaudio="" layout="responsive" width="1103.4314878574003" height="620.7794413701345"
            poster="/media/66a8bf07-2f4f-476a-bb43-b94161a9940f.png"
            style="        border-radius: 0px;        width:100%;height: inherit;opacity: 1;"
            i-amphtml-layout="responsive" preload="auto">
            <i-amphtml-sizer slot="i-amphtml-svc" style="padding-top: 56.259%;"></i-amphtml-sizer>
            <div fallback="">
              <p>This browser does not support the video element.</p>
            </div> <video
              class="i-amphtml-pool-media i-amphtml-pool-video i-amphtml-fill-content i-amphtml-replaced-content"
              id="i-amphtml-pool-media-6" playsinline="" webkit-playsinline="" preload="auto"
              poster="/media/66a8bf07-2f4f-476a-bb43-b94161a9940f.png" muted="">
              <source
                src="http://localhost:3978/media/schnuffelnd-zur-coronadiagnose (1) (1) (online-video-cutter.com) (3).mp4#t=0,10">
              </video>
          </amp-video>
        </div>
      </div>
    </amp-story-grid-layer>
    <div class="i-amphtml-story-spinner" aria-hidden="true" aria-label="Loading video">
      <div class="i-amphtml-story-spinner-container">
        <div class="i-amphtml-story-spinner-layer">
          <div class="i-amphtml-story-spinner-circle-clipper left"></div>
          <div class="i-amphtml-story-spinner-circle-clipper right"></div>
        </div>
      </div>
    </div>
  </amp-story-page>
  <div class="i-amphtml-system-layer-host"></div>
  <div class="i-amphtml-story-button-container next-container i-amphtml-story-fwd-replay" role="button"
    aria-label="Replay"><button class="i-amphtml-story-button-move"></button></div>
  <div class="i-amphtml-story-button-container prev-container i-amphtml-story-back-close-bookend" role="button"
    aria-label="Close bookend"><button class="i-amphtml-story-button-move"></button></div>
  <amp-story-bookend layout="nodisplay"
    class="i-amphtml-element i-amphtml-layout-nodisplay amp-story-draggable-drawer-root i-amphtml-story-draggable-drawer-bookend i-amphtml-built i-amphtml-layout i-amphtml-story-draggable-drawer-open"
    i-amphtml-layout="nodisplay" aria-hidden="false">
    <div class="i-amphtml-story-draggable-drawer">
      <div></div>
      <div class="i-amphtml-story-draggable-drawer-container">
        <div class="i-amphtml-story-draggable-drawer-content">
          <div></div>
        </div>
      </div>
    </div>
  </amp-story-bookend>
  <div class="i-amphtml-story-share-menu-host"></div>
</amp-story>
4

1 回答 1

1

noaudio只是隐藏均衡器图标的注释，它不会使视频静音。

故事音频按钮静音/取消静音包含的所有视频。如果您希望始终将特定视频静音，请使用众多可用工具之一删除其音轨。

于 2020-12-11T19:07:31.173 回答