影片旋轉至全螢幕並帶有提示

簡介

這是使用 AMP 實作旋轉至全螢幕並帶有使用者提示的範例範本。

設定

我們 AMP 元件的所有指令碼都必須匯入至標頭中。我們將使用兩個元件

amp-video 以呈現影片本身。

<script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>

amp-animation 以描述要觸發的動畫。

<script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>

樣式

設定一些樣式以定位提示並定義其外觀。

<style amp-custom>
.video-container {
  height: 100%;
  width: 100vw;
  max-width: 700px;
  /* Absolute-positioned children will be positioned relative to this container: */
  position: relative;
  /* Cut off all elements based on container's rectangle: */
  overflow: hidden;
}
#video-hint {
  /* Position relative to its container: */
  position: absolute;
  right: 0;
  bottom: 25%;
  /* Typography: */
  line-height: 1;
  font-size: 13px;
  /* Borders, colors and sizing */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  border-radius: 16px 0 0 16px;
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 10px 16px;
  /* Position on top of the video: */
  z-index: 100;
  /* Translate-x by 100% to displace out of view: */
  transform: translateX(100%);
  pointer-events: none;
  display: none;
}
/* Display hint only on touch devices */
.amp-mode-touch #video-hint {
  display: block;
}
</style>

新增影片和提示

在影片元素上設定 rotate-to-fullscreen，以便在使用者將裝置旋轉為橫向模式時實際進入全螢幕。

當 firstPlay 事件發生時，amp-video 將觸發其 on 屬性中描述的動畫。此事件會在使用者開始播放影片時立即觸發。在像這樣的自動播放影片中，事件會在使用者點擊影片時立即觸發。

旋轉以全螢幕顯示

您的瀏覽器不支援 HTML5 影片。

<div class="video-container">
  <div id="video-hint">Rotate for fullscreen</div>
  <amp-video width="480" height="270" src="/static/samples/video/tokyo.mp4" poster="/static/samples/img/tokyo.jpg" layout="responsive" controls on="firstPlay:hint-animation.start" rotate-to-fullscreen autoplay>
    <div fallback>
      <p>Your browser doesn't support HTML5 video.</p>
    </div>
    <source type="video/webm" src="/static/samples/video/tokyo.webm">
  </amp-video>
</div>

定義動畫

描述一個動畫，該動畫會將使用者提示滑入檢視畫面，然後再滑出。

重要的是，動畫元素具有 hint-animation ID，因為這是影片元件用來啟動動畫的名稱。

<amp-animation layout="nodisplay" id="hint-animation">
  <script type="application/json">
  {
    "selector": "#video-hint",
    "duration": "4.5s",
    "delay": "300ms",
    "fill": "both",
    "keyframes": [
      {"offset": 0, "transform": "translateX(100%)"},
      {"offset": 0.15, "transform": "translateX(0)"},
      {"offset": 0.8, "transform": "translateX(0)"},
      {"offset": 1, "transform": "translateX(100%)"}
    ]
  }
  </script>
</amp-animation>

需要更多說明嗎？

如果本頁上的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯絡，討論您的確切使用案例。

前往 Stack Overflow

未說明的特色？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，但我們也歡迎您針對您特別熱衷的問題做出一次性的貢獻。

在 GitHub 上編輯範例

由 @alanorozco 撰寫