重要事項:本文件不適用於您目前選取的格式 電子郵件!
amp-dailymotion
說明
顯示 Dailymotion 影片。
必要指令碼
<script async custom-element="amp-dailymotion" src="https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js"></script>
<script async custom-element="amp-dailymotion" src="https://cdn.ampproject.org/v0/amp-dailymotion-0.1.js"></script> <link rel="stylesheet" href="https://cdn.ampproject.org/v0/amp-dailymotion-0.1.css">
支援版面配置
用法
顯示 Dailymotion 影片。
使用 responsive 版面配置時,範例中的寬度和高度應能為 16:9 長寬比的影片產生正確的版面配置。
<amp-dailymotion data-videoid="x2m8jpp" layout="responsive" width="480" height="270" ></amp-dailymotion>
自動播放
如果存在此屬性,且瀏覽器支援自動播放
- 影片會在自動播放開始前自動設為靜音
- 當影片捲動到視窗外時,影片會暫停
- 當影片捲動到視窗內時,影片會繼續播放
- 當使用者輕觸影片時,影片會取消靜音
- 如果使用者曾與影片互動 (例如靜音/取消靜音、暫停/繼續等),且影片捲動到視窗內外,影片的狀態仍會維持使用者離開時的狀態。例如,如果使用者暫停影片,然後將影片捲動到視窗外,再返回影片,影片仍會處於暫停狀態。
data-videoid
Dailymotion 影片 ID 位於每個影片頁面網址中。例如,https://www.dailymotion.com/video/x2m8jpp_dailymotion-spirit-movie_creation
的影片 ID 為 "x2m8jpp"
。
data-mute
(選填)
指出是否將影片設為靜音。
- 值:
"true"
或"false"
- 預設值:
"false"
data-endscreen-enable
(選填)
指出是否啟用片尾畫面。
- 值:
"true"
或"false"
- 預設值:
"true"
data-sharing-enable
(選填)
指出是否顯示分享按鈕。
- 值:
"true"
或"false"
- 預設值:
"true"
data-start
(選填)
指定影片應從哪個時間點 (以秒為單位) 開始播放。
- 值:整數 (秒數)。例如,
data-start=45
。 - 預設值:
0
data-ui-highlight
(選填)
變更控制項中使用的預設醒目提示顏色。
- 值:十六進位色彩值 (不含開頭的 #)。例如,
data-ui-highlight="e540ff"
。
data-ui-logo
(選填)
指出是否顯示 Dailymotion 標誌。
- 值:
"true"
或"false"
- 預設值:
"true"
data-info
(選填)
指出是否在開始畫面顯示影片資訊 (標題和擁有者)。
- 值:
"true"
或"false"
- 預設值:
"true"
data-param-*
(選填)
所有 data-param-*
屬性都會以查詢參數的形式新增至嵌入式 Dailymotion iframe 的 src
值。您可以使用這個屬性傳遞未明確宣告的自訂值。
鍵和值將會經過 URI 編碼。
data-param-origin="example.com"
請參閱 Dailymotion 的影片播放器文件,進一步瞭解參數和選項。
停駐
需要 amp-video-docking
擴充功能。 如果存在此屬性且影片為手動播放,則當使用者將影片捲動到影片元件的可視區域外時,影片將會「最小化」並固定在角落或元素上。
如需更多詳細資訊,請參閱 關於停駐擴充功能本身的說明文件。
通用屬性
這個元素包含擴充至 AMP 元件的通用屬性。
動作
播放
播放影片。
暫停
暫停影片。
靜音
將影片設為靜音。
取消靜音
取消影片靜音。
全螢幕
將影片設為全螢幕。
驗證
請參閱 AMP 驗證器規格中的 amp-dailymotion 規則。
您已經讀過這份文件好幾次,但內容似乎沒有涵蓋您的所有問題嗎?或許其他人也有同樣的感受:請在 Stack Overflow 上與他們交流。
前往 Stack Overflow 發現錯誤或缺少功能?AMP 專案大力鼓勵您的參與和貢獻!我們希望您能成為我們開放原始碼社群的長期參與者,同時也歡迎您針對您特別關注的問題提供一次性的貢獻。
前往 GitHub