Google AMP amp-video-iframe

简介： iframe 视频是嵌入在 HTML 页面中的内嵌框架视频，但在 AMP HTML 中，我们使用一个名为amp-iframe-video的组件将视频嵌入到带有 amp-iframe-video 的页面中，我们可以使用 JavaScript 嵌入定制的视频播放器.

所需脚本：将 amp-video-iframe 组件导入标头。

属性：

• src：指定要嵌入的 iframe 视频的 URL 或路径。
• 海报：在视频加载时指向图像 URL。这是必需的属性。
• implements-media-session：如果 iframe 应实现 MediaSession API，则应指定此属性。
• implements-rotate-to-fullscreen：当 iframe 内的文档独立实现旋转到全屏时，该属性为 True。
• 自动播放：如果设置了此属性，则视频将在视频加载后立即开始播放。

例子：

  

    
    GeeksforGeeks amp-video-iframe
    
    
  
    
    
    
  
    
        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;
            }
        }
    
  
    
        
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none;
            }
        
    
  
    
    

  

    
  
        
        
    

  

输出：