谷歌 AMP amp-3q-player

简介： 3Q Player是一个用 JavaScript 编写的视频播放器。该播放器实现了流媒体视频内容的媒体源扩展。在AMP HTML中嵌入 3Q 播放器，我们使用amp-3q-player 组件。 3q-player 具有云录制、视频流、网络广播等多种功能

官方网站： https://3q.video/en/

所需脚本：将 amp-3q-player 导入标头。

属性：

• data-id： 3Q播放器的视频ID，需要在AMP页面中嵌入3Q播放器。
• 自动播放：如果存在自动播放属性，则视频将在视频加载后立即开始播放。

示例：要嵌入 3q-player，应将视频的数据 id 取为数据 id。

• 转到视频

  

• 右击视频

  

• 单击 Show Debug info 并复制突出显示的代码

  

• 将 id 粘贴到 amp-3q-player 标签的视频 id 中

    
  
      
      geeksforgeeks amp-3q-player
    
      
      
    
      
      
    
      
      
      
    
      
    
      
    
      
          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;
              }
          
      
  
    
  
      
      
  
    

  输出：