360° 圖片庫
gwd-360gallery
可顯示旋轉物件的圖片庫物件。
屬性
名稱 |
說明 |
images:string |
圖片庫中使用的圖片路徑字串 (以半形逗號分隔)。 |
autoplay:boolean |
讓圖片庫載入後自動播放所有圖片。 |
wrap:boolean |
圖片庫可讓使用者在第一幅到最後一幅畫格之間隨意滑動切換,而非停在首尾兩幅畫格上。 |
事件
名稱 |
說明 |
firstinteraction |
在使用者首次與圖片庫互動時傳送。 |
allframesviewed |
在圖片庫中所有畫格均已顯示過至少一次後傳送。 |
allframesloaded |
在圖片庫中的所有畫格均已載入後傳送。 |
frameshown |
在顯示新畫格時傳送。 |
frameactivated |
在新畫格開始啟動時 (包括尚未顯示的情況) 傳送。 |
frametap |
在使用者輕觸畫格時傳送。 |
方法
名稱 |
說明 |
goToFrame(frame:number, opt_animate:string, opt_direction:string) |
為指定的畫格建立動畫。 |
rotateOnce(opt_duration:number, opt_direction:string) |
讓圖片庫中的物件旋轉一次。 |
goForwards() |
讓圖片庫往前移動一幅畫格。 |
goBackwards() |
讓圖片庫往後移動一幅畫格。 |
3D 互動區
gwd-3d-hotspot
這個元素用於顯示 3D 模型上的註解。
屬性
名稱 |
說明 |
data-position:string |
互動區的位置。 |
data-normal:string |
互動區的標準。 |
hotspot-name:string |
互動區名稱。 |
hotspot-title:string |
顯示於資訊卡中的標題文字。 |
hotspot-description:string |
顯示於資訊卡中的說明文字。 |
hide-infocard:boolean |
是否要隱藏資訊卡。 |
3D 互動區容器
gwd-3d-hotspot-container
這是 3D 模型上註解的容器元素。
屬性
名稱 |
說明 |
up-image:file |
3D 互動區在未按下狀態時所顯示圖片的網址。 |
over-image:file |
3D 互動區在滑鼠游標懸停或懸停狀態時所顯示圖片的網址。 |
down-image:file |
3D 互動區在按下狀態時所顯示圖片的網址。 |
3D 模型
gwd-3d-model
這是 3D 檢視器元件。
屬性
名稱 |
說明 |
id-url:download |
3D 模型的 ID 或網址。 |
data-gwd-refresh-assets:string |
Google Web Designer 所用的屬性,可判斷是否必須重新整理 3D 素材資源。 |
glass:boolean |
為 3D 模型啟用玻璃素材。 |
src:string |
要顯示的模型。 |
transparent:boolean |
在 3D 模型上啟用透明背景。 |
gesture-cue-icon:file |
手勢提示圖示。 |
gesture-cue-text:string |
手勢提示圖示下方顯示的文字。 |
gesture-cue-duration:number |
手勢提示顯示的持續時間 (以秒為單位)。如果值為 -1,則表示沒有時間限制。 |
事件
名稱 |
說明 |
scene-rendered |
在首次算繪 3D 模型場景後傳送。 |
camera-changed |
在任何 3D 相機屬性變更時傳送。event.detail 物件包含相機目前的所有屬性。 |
hotspot-clicked |
在點選互動區時傳送。event.detail 物件包含點選的互動區名稱。 |
interaction-start |
在使用者開始與 3D 模型互動時傳送。 |
interaction-end |
在使用者停止與 3D 模型互動時傳送。 |
方法
名稱 |
說明 |
setYaw(yaw:number) |
設定在不使用任何動畫下的偏轉角度 (以度為單位,將相機限制納入考量)。 |
setTargetYaw(targetYaw:number) |
根據相機限制或在 -360 度和 360 度間旋轉的下限,設定目標偏轉角度 (以度為單位)。 |
setTargetPitch(targetPitch:number) |
設定目標俯仰角度 (以度為單位)。 |
incrementTargetPitch(pitchDelta:number) |
逐漸增加差異角度的目標俯仰角度 (以度為單位)。 |
setTargetZoom(targetZoom:number) |
設定目標縮放等級 (以公尺為單位)。 |
incrementTargetZoom(zoomDelta:number) |
逐漸增加目標縮放等級 (以公尺為單位)。 |
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number) |
設定目標支點 (以公尺為單位)。 |
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number) |
設定目標區域平移距離 (以公尺為單位)。 |
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number) |
設定素材的顏色。 |
playAnimation(animationName:string) |
播放動畫。 |
pauseAnimation(animationName:string) |
暫停播放動畫。 |
setAnimationTime(animationName:string, animationTime:number) |
設定動畫時間 (以秒為單位)。 |
lookAtHotspot(hotspotName:string) |
移動並旋轉相機,聚焦在互動區上。 |
3D 模型檢視器
gwd-3d-model-viewer
這個元件會納入 3D 模型檢視器元件。
屬性
名稱 |
說明 |
src:file |
3D 模型的來源檔案。 |
gesture-cue-icon:file |
手勢提示圖示。 |
gesture-cue-text:string |
手勢提示圖示下方顯示的文字。 |
gesture-cue-duration:number |
手勢提示顯示的持續時間 (以秒為單位)。如果值為 -1,則表示沒有時間限制。 |
skybox-image:file |
3D 模型場景的背景圖片。 |
environment-image:file |
控制 3D 模型的環境倒影。 |
事件
名稱 |
說明 |
scene-rendered |
在首次算繪 3D 模型場景後傳送。 |
camera-changed |
在任何 3D 相機屬性變更時傳送。event.detail 物件包含相機目前的所有屬性。 |
hotspot-clicked |
在點選互動區時傳送。event.detail 物件包含點選的互動區名稱。 |
interaction-start |
在使用者開始與 3D 模型互動時傳送。 |
interaction-end |
在使用者停止與 3D 模型互動時傳送。 |
方法
名稱 |
說明 |
setYaw(yaw:number) |
設定在不使用任何動畫下的偏轉角度 (以度為單位,將相機限制納入考量)。 |
setTargetYaw(targetYaw:number) |
根據相機限制或在 -360 度和 360 度間旋轉的下限,設定目標偏轉角度 (以度為單位)。 |
setTargetPitch(targetPitch:number) |
設定目標俯仰角度 (以度為單位)。 |
incrementTargetPitch(pitchDelta:number) |
逐漸增加差異角度的目標俯仰角度 (以度為單位)。 |
setTargetZoom(targetZoom:number) |
設定目標縮放等級 (以公尺為單位)。 |
incrementTargetZoom(zoomDelta:number) |
逐漸增加目標縮放等級 (以公尺為單位)。 |
setTargetPivot(targetPivotX:number, targetPivotY:number, targetPivotZ:number) |
設定目標支點 (以公尺為單位)。 |
setTargetLocalPan(targetLocalPanX:number, targetLocalPanY:number) |
設定目標區域平移距離 (以公尺為單位)。 |
setMaterialColor(materialName:string, colorR:number, colorG:number, colorB:number) |
設定素材的顏色。 |
playAnimation(animationName:string) |
播放動畫。 |
pauseAnimation(animationName:string) |
暫停播放動畫。 |
setAnimationTime(animationName:string, animationTime:number) |
設定動畫時間 (以秒為單位)。 |
新增至日曆
gwd-addtocalendar
將活動新增至日曆。
屬性
名稱 |
說明 |
event-title:string |
顯示在使用者日曆中的活動名稱。 |
start-date:string |
活動開始的日期。 |
start-time:string |
活動開始的時間 (24 小時制)。 |
end-date:string |
活動結束的日期。 |
end-time:string |
活動結束的時間 (24 小時制)。 |
timezone:string |
活動所屬的時區。設定時區後,系統會為位在其他時區的使用者調整正確的時間。 |
location:string |
活動的位置。 |
description:string |
活動的說明。 |
icalendar:boolean |
是否使用 iCalendar 檔案。 |
google:boolean |
是否應使用 Google 日曆。 |
windows-live:boolean |
是否應使用 Windows Live 行事曆。 |
yahoo:boolean |
是否應使用 Yahoo! 行事曆。 |
bg-color:string |
下拉式選單背景色彩的十六進位值。 |
font-color:string |
下拉式選單字型色彩的十六進位值。 |
font-family:string |
下拉式選單的字型名稱。 |
font-size:string |
下拉式選單的字型大小。 |
font-weight:string |
下拉式選單的字型粗細。 |
highlight-color:string |
下拉式選單醒目顯示顏色的十六進位值。 |
音訊
gwd-audio
這是納入 HTMLAudioElement
的元件。
屬性
名稱 |
說明 |
autoplay:boolean |
是否要在載入音訊後自動播放音訊。 |
loop:boolean |
是否要在音訊播放完畢後循環播放。 |
muted:boolean |
音訊一開始是否設為靜音狀態。 |
controls:boolean |
是否啟用預設的原生播放器控制項。 |
sources:file |
使用各種格式的音訊來源字串 (以半形逗號分隔)。 |
事件
名稱 |
說明 |
play |
在前一個暫停事件之後,於繼續播放媒體內容時傳送。 |
pause |
在暫停播放時傳送。 |
playing |
在開始播放媒體 (包括首次播放、在暫停之後播放以及結束後重新開始播放) 時傳送。 |
ended |
在結束播放時傳送。 |
volumechange |
在變更音訊音量 (包括設定音量及變更靜音屬性) 時傳送。 |
seeked |
在完成搜尋作業後傳送。 |
waiting |
在因為其他操作尚未結束 (例如搜尋) 而無法完成所要求的操作 (例如播放) 時傳送。 |
方法
名稱 |
說明 |
mute() |
將音訊切換為靜音/取消靜音。 |
pause() |
暫停播放音訊。 |
play() |
播放音訊。 |
replay() |
重播音訊。 |
seek(time:number) |
跳到音訊中的指定時間。 |
輪轉式圖片庫
gwd-carouselgallery
這是可在輪轉式的版面配置中顯示畫格的圖片庫物件。
屬性
名稱 |
說明 |
images:string |
圖片庫中使用的圖片路徑字串 (以半形逗號分隔)。 |
groups:string |
群組 ID 字串 (以半形逗號分隔)。 |
transition-duration:number |
圖片庫動畫速度 (單位為毫秒)。 |
start-frame:number |
一開始顯示的圖片數量。 |
autoplay:boolean |
指定讓畫格自動播放一次或不自動播放。 |
has-navigation:boolean |
是否自動加入圖片庫瀏覽控制項。 |
navigation-thumbnails:boolean |
是否使用縮圖代替圓點讓使用者瀏覽操作。 |
navigation-highlight:color |
CSS 顏色代碼,用來醒目顯示當前瀏覽的畫格。 |
scaling:string |
指定以何種方式將圖片內容調整為符合畫格大小。 |
frame-width:number |
單一內容面板的寬度。 |
frame-height:number |
單一內容面板的高度。 |
neighbor-rotation-y:number |
讓畫面中央面板的鄰近面板沿著 Y 軸旋轉,可用來使鄰近面板傾斜。 |
neighbor-translation-x:number |
讓畫面中央面板的鄰近面板沿著 X 軸轉譯,可用來調整鄰近面板的顯示位置。 |
neighbor-translation-y:number |
讓畫面中央面板的鄰近面板沿著 Y 軸轉譯。 |
neighbor-translation-z:number |
讓畫面中央面板的鄰近面板沿著 Z 軸平移。 |
exit-urls:string |
與圖片庫中的圖片對應的結束網址字串 (以半形逗號分隔)。 |
show-reflection:boolean |
是否顯示採用 CSS3 技術的倒影。 |
pause-front-media:boolean |
是否在目前的畫格轉換時,暫停播放前一幅畫格中的媒體元素 (例如視訊或音訊)。 |
resume-next-media:boolean |
是否在目前的畫格轉換時,繼續播放下一幅畫格中的媒體元素 (例如視訊或音訊)。 |
事件
名稱 |
說明 |
firstinteraction |
在使用者首次與圖片庫互動時傳送。 |
allframesviewed |
在圖片庫中的所有畫格均已顯示過至少一次後傳送。 |
allframesloaded |
在圖片庫中的所有畫格均已載入後傳送。 |
autoplayended |
自動播放結束 (不限原因) 後傳送。如果自動播放在到達預計的時間長度時自然結束,則 event.detail.completed 的值為 true,其他情況則為 false。 |
frameshown |
在顯示新畫格時傳送。 |
frameactivated |
在新畫格開始啟動時 (包括尚未顯示的情況) 傳送。 |
frameautoplayed |
在畫格因自動播放而啟動時傳送。這可能會比 frameshown 更容易觸發,因為在一次顯示的多幅畫格中,此事件會針對每一幅畫格個別啟動。 |
frametap |
在使用者輕觸畫格時傳送。 |
reachleftend |
在圖片庫到達最左端時傳送。 |
reachrightend |
在圖片庫到達最右端時傳送。 |
trackstart |
在滑鼠游標或輕觸拖曳點開始移動時傳送。 |
track |
此元件會記錄滑鼠游標或輕觸拖曳點的 X 和 Y 座標位置資料。 |
trackend |
在滑鼠游標或輕觸拖曳點結束移動時傳送。 |
方法
名稱 |
說明 |
goToFrame(index:number, opt_animate:string) |
前往指定的畫格。 |
goForwards(opt_animate:string) |
前往下一幅畫格 (如適用)。 |
goBackwards(opt_animate:string) |
前往上一幅畫格。 |
rotateOnce(opt_duration:number, opt_direction:string) |
將圖片庫中的所有畫格顯示一次。 |
stopRotation() |
暫停目前的自動旋轉動作。 |
提示點
gwd-cuepoint
Google Web Designer 影片元件的附加元件,會在影片播放至特定時間點時觸發事件。
屬性
名稱 |
說明 |
time:number |
事件觸發時間 (以秒為單位)。 |
事件
名稱 |
說明 |
cuepoint |
一旦媒體播放至提示點中定義的時間,系統就會傳送事件。 |
方法
名稱 |
說明 |
seek() |
將影片時間設為提示點時間。 |
setTime(time:number) |
設定提示點時間。 |
日期替換
gwd-dateswap
日期替換元件會根據當前日期與指定日期範圍的比對結果,變更元素的顯示方式。
屬性
事件
名稱 |
說明 |
before |
在當前日期早於 from_date 時傳送 (排除)。 |
during |
在當前日期介於 from_date 和 to_date 之間時傳送 (包含)。 |
after |
在當前日期晚於 to_date 時傳送 (排除)。 |
方法
名稱 |
說明 |
checkDate() |
將當前日期與指定日期範圍進行比對。 |
圖片庫導覽
gwd-gallerynavigation
這是 Google Web Designer 圖片庫元件的瀏覽控制項。
屬性
名稱 |
說明 |
for:string |
圖片庫中使用的圖片路徑字串 (以半形逗號分隔)。 |
highlight:color |
CSS 顏色代碼,用來醒目顯示當前瀏覽的畫格。 |
use-thumbnails:boolean |
是否使用縮圖代替圓點讓使用者瀏覽操作。 |
一般廣告
gwd-genericad
實作一般廣告容器。
事件
名稱 |
說明 |
adinitialized |
在一般元素轉譯廣告內容之前傳送。 |
方法
名稱 |
說明 |
initAd() |
在接收到啟用器傳送的適當事件時啟動廣告。 |
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) |
前往廣告的展開尺寸。如果尚未指定頁面 ID,廣告會導向預設頁面。 |
exit(url:string, opt_collapseOnExit:boolean, opt_pageId:string) |
結束廣告並 (選擇性) 收合廣告。 |
手勢
gwd-gesture
各種手勢事件的抽象概念。
屬性
名稱 |
說明 |
touch-action:string |
指定系統如何解讀輕觸動作,有效值為 auto 、none 、pan-x 和 pan-y 。預設行為與設定為 none 的效果相同。 |
事件
名稱 |
說明 |
hover |
在滑鼠游標或輕觸點座標進入元件邊界時傳送。 |
hoverend |
在滑鼠游標或輕觸點座標離開元件邊界時傳送。 |
trackstart |
在滑鼠游標或輕觸拖曳點開始移動時傳送。 |
track |
此元件會記錄滑鼠游標或輕觸拖曳點的 X 和 Y 座標位置資料。 |
trackend |
在滑鼠游標或輕觸拖曳點結束移動時傳送。 |
tap |
在記錄到使用者的輕觸或點擊滑鼠動作時傳送。 |
swipeleft |
在使用者往左滑動時傳送。 |
swiperight |
在使用者往右滑動時傳送。 |
swipeup |
在使用者往上滑動時傳送。 |
swipedown |
在使用者往下滑動時傳送。 |
Google 廣告
gwd-google-ad
實作 Google 廣告容器。
屬性
名稱 |
說明 |
polite-load:boolean |
廣告是否必須遵循預載語意。 |
fullscreen:boolean |
廣告是否應嘗試展開至全螢幕大小。 |
事件
名稱 |
說明 |
adinitialized |
在元素轉譯廣告內容之前傳送。 |
expandstart |
在啟用器觸發開始展開事件時傳送。 |
expandfinish |
在啟用器觸發結束展開事件時傳送。 |
collapsestart |
在啟用器觸發開始收合事件時傳送。 |
collapsefinish |
在啟用器觸發結束收合事件時傳送。 |
fullscreensupport |
在系統可支援全螢幕展開時傳送。 |
dynamicelementsready |
對廣告內容套用動態資料後傳送。 |
hostpagescroll |
在啟用器觸發主機頁面捲動事件時傳送。 |
方法
名稱 |
說明 |
initAd() |
在接收到啟用器傳送的適當事件時啟動廣告。 |
goToPage(opt_pageId:string, opt_transition:string, opt_duration:number, opt_easing:string, opt_direction:string) |
前往廣告的展開尺寸。如果尚未指定頁面 ID,廣告會導向預設頁面。 |
exit(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) |
結束廣告並 (選擇性) 收合廣告。 |
exitOverride(exitId:string, url:string, opt_collapseOnExit:boolean, opt_pauseMedia:boolean, opt_pageId:string) |
無論 Studio 中設定的值為何,一律結束廣告並前往指定網址。如果 opt_collapseOnExit 的值為 true,則收合廣告。 |
incrementCounter(metric:string, opt_isCumulative:boolean) |
追蹤計數器事件。 |
startTimer(timerId:string) |
啟動事件計時器。 |
stopTimer(timerId:string) |
停止事件計時器。 |
reportManualClose() |
記錄手動關閉浮動廣告、彈出式廣告、可展開式廣告、網頁內彈出式廣告或網頁內浮動廣告的操作。這種方法可以替代 Enabler.reportManualClose 。 |
互動區
gwd-hotspot
這個元件可在影片特定時間顯示和隱藏互動區。
屬性
名稱 |
說明 |
show-time:number |
互動區開始出現的時間 (以秒為單位)。 |
hide-time:number |
互動區停止顯示的時間 (以秒為單位)。 |
left:string |
互動區的左側在影片畫面上的相對位置,以影片畫面寬度百分比表示 (例如「5%」)。 |
top:string |
互動區的頂端在影片畫面上的相對位置,以影片畫面高度百分比表示 (例如「5%」)。 |
width:string |
互動區在影片畫面上的相對寬度百分比。 |
height:string |
互動區在影片畫面上的相對高度百分比。 |
事件
名稱 |
說明 |
hotspotshown |
在互動區顯示時傳送事件。 |
hotspothidden |
在互動區隱藏時傳送事件。 |
方法
名稱 |
說明 |
show(showHide:boolean) |
切換互動區的顯示狀態。 |
seek(showHide:boolean) |
設定互動區出現或隱藏的影片時間。 |
setTimes(showTime:number, hideTime:number) |
設定互動區的出現和隱藏時間。 |
iframe
gwd-iframe
這是納入 HTMLIframeElement
的元件。
屬性
名稱 |
說明 |
source:string |
iframe 的來源;這會取代原生圖片元素中的 src 屬性。 |
scrolling:string |
指定 iframe 是否應顯示捲軸。 |
事件
名稱 |
說明 |
iframeload |
在 iframe 載入後傳送。 |
方法
名稱 |
說明 |
setUrl(url:string) |
變更 iframe 的網址並立即載入 iframe。 |
圖片
gwd-image
納入 HTMLImageElement
的元件,可延遲載入圖片來源。
屬性
名稱 |
說明 |
source:file |
圖片來源;這會取代原生圖片元素中的 src 屬性。 |
alt:string |
圖片的替代文字。 |
scaling:string |
定義以何種方式將圖片調整為符合畫格大小。 |
alignment:string |
圖片在檢視區域中的對齊方式。 |
focalpoint:string |
將圖片焦點編碼為 X/Y 像素座標。 |
disablefocalpoint:boolean |
停用 focalpoint 屬性所設定的焦點 (由 Google Web Designer 內部使用)。 |
圖片按鈕
gwd-imagebutton
呈現游標點選前後與懸停時三種狀態的圖片按鈕。
屬性
名稱 |
說明 |
up-image:file |
按鈕在未按下狀態時所顯示圖片的網址。 |
over-image:file |
按鈕在滑鼠游標懸停或懸停狀態時所顯示圖片的網址。 |
down-image:file |
按鈕在已按下狀態時所顯示圖片的網址。 |
bgcolor:string |
按鈕的背景色彩。 |
alignment:string |
圖片在檢視區域中的對齊方式 |
scaling:string |
圖片配合父項容器大小調整的方式 |
disabled:boolean |
是否停用按鈕 |
事件
名稱 |
說明 |
imagebuttonloaded |
在載入所有圖片後傳送。 |
方法
名稱 |
說明 |
toggleEnable() |
切換停用/啟用狀態。 |
setImages(upSrc:string, opt_overSrc:string, opt_downSrc:string) |
設定所有按鈕狀態的圖片來源。 |
圖片效果
gwd-image-effect
這是圖片效果元件。
屬性
名稱 |
說明 |
scaling:string |
定義以何種方式將圖片調整為符合畫格大小。 |
time-limit:number |
動畫時間限制。如果值為 -1,則表示沒有時間限制。 |
settings:string |
啟動元件設定對話方塊。 |
images:string |
圖片效果中使用的圖片路徑字串 (以半形逗號分隔)。 |
事件
名稱 |
說明 |
autoplayended |
在自動播放因達到時間限制而結束時傳送。 |
方法
名稱 |
說明 |
play() |
播放動畫。 |
pause() |
暫停播放動畫。 |
「前後對照」圖片效果
gwd-before-and-after
這個圖片效果會將兩張類似的圖片合併成「前後對照」圖片。
「呼吸」圖片效果
gwd-breathe
這個圖片效果可將圖片變成伸縮自如的動畫。
「揭露」圖片效果
gwd-reveal
這個圖片效果會以橢圓的焦點區域掃描圖片,進而顯示第二張圖片。
「波浪」圖片效果
gwd-wave
這個圖片效果會為圖片套用動畫波浪轉換特效,使圖片按照波浪圖案擺動。
地圖
gwd-map
擴充 HTMLElement
,以便納入 Google Maps API 呼叫。
屬性
名稱 |
說明 |
api-key:string |
Google API 金鑰。請參閱:https://developers.google.com/maps/documentation/javascript/get-api-key。 |
query:string |
用以從 Google Places API 傳回位置資訊的搜尋查詢名稱。 |
start-latitude:decimal |
起始中心緯度座標。值應介於 -90 到 90 之間 (以度為單位)。 |
start-longitude:decimal |
起始中心經度座標。值應介於 -180 到 180 之間 (單位為度)。 |
request-user-location:boolean |
是否必須要求取得使用者的位置資訊。如果設為 true,系統會提示使用者分享位置資訊。 |
client-id:string |
Google Maps Premier 使用者的用戶端 ID。 |
search-radius:number |
進行位置搜尋的最小半徑 (單位為公尺)。 |
result-limit:number |
單一查詢傳回的結果數量上限。 |
start-zoom:number |
起始縮放等級 (依 Google Maps API 所用單位計算)。預設值為 16,也就是附近地區等級。 |
marker-src:string |
地標圖片檔案名稱,必須是包含開啟、關閉和陰影元件的精靈。 |
gps-src:string |
GPS 位置藍點圖片檔案名稱。 |
msg-start-position-prompt:string |
在選取起始位置的對話方塊中,做為提示文字的本地化字串。 |
msg-gps-button-label:string |
按鈕標籤所用的本地化字串 (該按鈕可讓地理位置 API 擷取使用者位置)。 |
msg-manual-position-button-label:string |
顯示地點搜尋欄位的按鈕標籤所用的本地化字串。 |
msg-manual-position-prompt:string |
在搜尋起始地圖位置的對話方塊中,做為提示文字的本地化字串。 |
msg-manual-position-placeholder:string |
在搜尋起始地圖位置的搜尋框中,做為預留位置文字的本地化字串。 |
msg-geocode-failure:string |
嘗試使用地理位置 API 失敗時,做為對話方塊中提示文字的本地化字串。 |
msg-no-results-found:string |
所選位置找不到任何地圖搜尋結果時,做為對話方塊中提示文字的本地化字串。 |
事件
名稱 |
說明 |
pinclick |
當使用者選取地圖上的圖釘時。 |
方法
名稱 |
說明 |
setCenter(latitude:number, longitude:number, opt_accuracy:number) |
將地圖中心設定在指定的經緯度座標位置。 |
頁面
gwd-page
頁面是指頁面堆疊中的單一卡片。
屬性
名稱 |
說明 |
expanded:boolean |
是否應將這個頁面視為展開式頁面 (廣告專用)。 |
centered:boolean |
是否應將這個頁面的內容置中。 |
alt-orientation-page:string |
適合以不同螢幕方向來呈現內容的頁面所用的頁面 ID。 |
事件
名稱 |
說明 |
attached |
在頁面連結到 DOM 後立即傳送。 |
detached |
在頁面從 DOM 移除後立即傳送。 |
pageactivated |
在頁面開始顯示後傳送。 |
pagedeactivated |
在頁面不再顯示後傳送。 |
pageload |
在頁面內容成功載入後傳送。 |
pagepresenting |
在頁面開始播放介紹動畫之前傳送。 |
shake |
在偵測到裝置搖動手勢時傳送。 |
tilt |
在偵測到裝置傾斜時傳送。 |
rotatetoportrait |
在裝置的螢幕方向轉為直向時傳送。 |
rotatetolandscape |
在裝置的螢幕方向轉為橫向時傳送。 |
頁面堆疊
gwd-pagedeck
PageDeck 是一種頁面容器,會依指定順序循環顯示不同頁面 (一次一個),並使用任何支援的頁面轉換方式。
屬性
名稱 |
說明 |
default-page:string |
預設頁面的 ID。 |
事件
名稱 |
說明 |
pagetransitionstart |
在頁面開始轉換之前傳送。 |
pagetransitionend |
在頁面轉換完成之後傳送。 |
方法
名稱 |
說明 |
goToNextPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) |
前往頁面堆疊中的下一頁。 |
goToPreviousPage(opt_loop:boolean, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) |
前往頁面堆疊中的上一頁。 |
goToPage(pageId:string, opt_type:string, opt_duration:number, opt_easing:string, opt_direction:string) |
前往頁面堆疊中的指定頁面。 |
getCurrentPage() |
傳回目前頁面,如未顯示頁面則傳回 null。 |
getDefaultPage() |
傳回指定的預設頁面,如未指定則傳回第一頁。 |
getPage(pageId:string) |
傳回含有指定 ID 的頁面。 |
findPageIndexByAttributeValue(attributeName:string, value:string|number|boolean) |
傳回屬性值與指定的值相等的頁面元素,如找不到頁面則傳回 -1。 |
getOrientationSpecificPage(orientation:string, pageId:string) |
傳回螢幕方向與指定方向相符的頁面。 |
getElementById(id:string) |
在這個頁面堆疊的所有頁面中找出含有指定 ID 的元素。由於 gwd-pagedeck 只會將正在使用的頁面保存在 DOM 中,因此標準 document.getElementById(id) 不會傳回停用頁面中的元素。不過,將停用頁面中的元素設為參照項目是很常見的用途,尤其是動態廣告。在這種情況下,可以使用這種方法根據元素 ID 將元素解除參照。 |
視差
gwd-parallax
視差元件。
屬性
名稱 |
說明 |
settings:string |
啟動元件設定對話方塊。 |
yscroll:decimal |
在中心區域算繪視差動畫時可使用的捲動係數。 |
事件
名稱 |
說明 |
ready |
在載入視差元件中的所有素材資源後傳送。 |
粒子效果
gwd-particleeffects
這是構成多種粒子效果和圖片的元件。
屬性
名稱 |
說明 |
autoplay:boolean |
是否在載入元件後讓動畫自動播放。 |
time-limit:number |
動畫時間限制。如果值為 -1,則表示沒有時間限制。 |
settings:string |
啟動元件設定對話方塊。 |
事件
名稱 |
說明 |
timelimitreached |
在動畫播放至指定時間上限時傳送。 |
方法
名稱 |
說明 |
play() |
播放動畫。 |
pause() |
暫停播放動畫。 |
stop() |
停止播放動畫。 |
粒子
gwd-particles
粒子系統元件。
屬性
名稱 |
說明 |
acceleration-x:number |
加速的 X 元件 (以每幅畫格顯示的像素為單位)。 |
acceleration-y:number |
加速的 Y 元件 (以每幅畫格顯示的像素為單位)。 |
angle-max:number |
粒子速度方向的最大角度。 |
angle-min:number |
粒子速度方向的最小角度。 |
autoplay:boolean |
是否在父項 gwd-particleeffects 開始播放後,讓動畫自動播放。 |
color1:color |
第一個顏色。 |
color2:color |
第二個顏色。 |
color-rate:number |
這是每幅畫格顏色變化 (從顏色 1 變成顏色 2) 的速率,粒子目前的顏色會據此增加,範圍為 [0, 1]。 |
emit-interval:number |
到放射下一個粒子之前的畫格數。 |
emit-x-max:string |
粒子放射範圍的最大 X 坐標。 |
emit-x-min:string |
粒子放射範圍的最小 X 坐標。 |
emit-y-max:string |
粒子放射範圍的最大 Y 坐標。 |
emit-y-min:string |
粒子放射範圍的最小 Y 坐標。 |
loop:boolean |
是否循環播放動畫。 |
number:number |
粒子數量。 |
opacity-min:number |
粒子的不透明度下限。 |
opacity-max:number |
粒子的不透明度上限。 |
opacity-rate:number |
這是每幅畫格不透明度變化的速率,粒子目前的不透明度會據此增加。 |
random-colors:boolean |
粒子是否使用介於顏色 1 和顏色 2 間的隨機顏色。設為 false 時,所有粒子的起始顏色都會為顏色 1。 |
shape:string |
Sprite 的形狀。 |
size-max:number |
粒子的大小上限 (以像素為單位)。 |
size-min:number |
粒子的大小下限 (以像素為單位)。 |
size-rate:number |
這是每幅畫格大小變化的速率,粒子目前的大小會據此增加。 |
skip-forward:number |
在特定百分比的粒子放射到粒子系統後,跳到指定的時間。 |
speed-max:number |
粒子的最大速度 (以每幅畫格顯示的像素為單位)。 |
speed-min:number |
粒子的最小速度 (以每幅畫格顯示的像素為單位)。 |
sprite-image-src:file |
用做 Sprite 的圖片來源。 |
turbulence-frequency:number |
擾亂出現的頻率。設定值較大時,出現不規則動作的頻率就會增加。值必須為正數。 |
turbulence-rate:number |
強度隨時間變化的速率。 |
turbulence-strength:number |
施加在粒子上的擾亂強度。值必須為正數。 |
turbulence-trail:number |
要顯示的粒子的先前狀態和目前狀態數量。 |
方法
名稱 |
說明 |
play() |
播放動畫。 |
pause() |
暫停播放動畫。 |
stop() |
停止播放動畫。 |
Sprite 工作表
gwd-spritesheet
顯示 Sprite 工作表的單一主要畫面格或動畫。
屬性
名稱 |
說明 |
imagesource:file |
Sprite 工作表圖片的網址。 |
offsetx:number |
從 Sprite 工作表左側到下列其中一個項目的偏移 (以像素為單位):
- 您想要從 Sprite 工作表中使用的特定圖片的左側邊緣
- 您用來建立動畫的第一個 Sprite 圖片的左側邊緣
|
offsety:number |
從 Sprite 工作表頂端到下列其中一個項目的偏移 (以像素為單位):
- 您想要從 Sprite 工作表中使用的特定圖片的上方邊緣
- 您用來建立動畫的第一個 Sprite 圖片的上方邊緣
|
clipwidth:number |
下列其中一個項目的寬度 (以像素為單位):
- 您想要從 Sprite 工作表中使用的特定圖片
- 您用來建立動畫的第一個 Sprite 圖片
|
clipheight:number |
下列其中一個項目的高度 (以像素為單位):
- 您想要從 Sprite 工作表中使用的特定圖片
- 您用來建立動畫的第一個 Sprite 圖片
|
alignment:string |
決定圖片在容器中的位置。 |
scaling:string |
指定元件中各種不同尺寸圖片的顯示方式。 |
totalframecount:number |
組成動畫的畫格數量。 |
duration:number |
每幅畫格的時間長度 (以毫秒為單位)。 |
loopcount:number |
動畫重複播放的次數。設為 0 可使動畫無限次重播。 |
autoplay:boolean |
是否讓動畫自動播放。 |
endonstartframe:boolean |
是否讓動畫結束於起始畫格。 |
reverseplay:boolean |
是否讓動畫反向播放。 |
事件
名稱 |
說明 |
animationend |
動畫結束時傳送。 |
animationpause |
動畫暫停時傳送。 |
animationplay |
動畫開始播放時傳送。 |
animationrestart |
在動畫暫停後又重新開始播放時傳送。 |
方法
名稱 |
說明 |
newAnimation(offsetx:number, offsety:number, clipwidth:number, clipheight:number, totalframecount:number, duration:number, loopcount:number, autoplay:boolean, reverseplay:boolean) |
定義新動畫。 |
play() |
播放動畫。 |
pause() |
暫停播放動畫。 |
togglePlay() |
在播放與暫停播放動畫之間進行切換。 |
restart() |
重新播放動畫。 |
previousFrame() |
顯示前一幅畫格。 |
nextFrame() |
顯示下一幅畫格。 |
goToFrame(id:number) |
顯示畫格編號所指定的畫格。 |
星級評等
gwd-starratings
轉譯表示評等星號的元件。
屬性
名稱 |
說明 |
ratingvalue:decimal |
評等值。 |
iconsize:number |
星號圖示大小。 |
isemptyshown:boolean |
是否顯示沒有星級的星號圖示。 |
isemptycolored:boolean |
是否將沒有星級的星號圖示上色。 |
colorprimary:color |
主要填滿色彩。 |
colorsecondary:color |
次要漸層色彩。 |
gradienttype:string |
漸層類型。 |
ratingmax:number |
最高星級評等。 |
ratingmin:decimal |
最低星級評等。 |
事件
名稱 |
說明 |
complete |
建立星級評等圖示時。 |
validationerror |
星級評等的評分值小於最低評分。 |
街景服務
gwd-streetview
Google 街景服務元件。
屬性
名稱 |
說明 |
key:string |
如需取得應用程式個別金鑰的相關資訊,請造訪:https://developers.google.com/maps/documentation/javascript/get-api-key。 |
latitude:decimal |
位置緯度值。 |
longitude:decimal |
位置經度值。 |
interaction:boolean |
決定視圖是否可以平移/旋轉。 |
heading:decimal |
指出相機的指南針方向。可接受的值為 0 到 360 (這兩個值均指向北方,而 90 指向東方,180 則指向南方)。如果沒有指定方向,則系統會計算出一個值,將相機指向某個指定位置,而該位置會從最接近的一張相片拍攝地點開始指定 |
pitch:decimal |
指定相機相對於街景車輛的向上或向下角度。這個角度通常是扁平的水平畫面。正值角度使相機向上 (90 度表示直線向上);負值角度使相機向下(-90 度表示直線向下) |
zoom:number |
指定相機相對於街景服務車輛的縮放程度。 |
滑動式圖片庫
gwd-swipegallery
可在滑動式內容區域中顯示畫格的圖片庫物件
屬性
名稱 |
說明 |
images:string |
圖片庫中使用的圖片路徑字串 (以半形逗號分隔)。 |
groups:string |
群組 ID 字串 (以半形逗號分隔)。 |
transition-duration:number |
圖片庫動畫速度 (以毫秒為單位)。 |
start-frame:number |
啟動時的畫格 (從 1 開始)。 |
num-frames-to-display:number |
同時顯示的畫格數。 |
frame-snap-interval:number |
每次滑動時前進的畫格數。 |
autoplay:boolean |
是否讓圖片庫自動旋轉一次。 |
has-navigation:boolean |
是否加入圖片庫瀏覽控制項。 |
navigation-thumbnails:boolean |
是否使用縮圖代替圓點讓使用者瀏覽操作。 |
navigation-highlight:color |
CSS 顏色代碼,用來醒目顯示當前瀏覽的畫格。 |
scaling:string |
指定以何種方式將圖片內容調整為符合畫格大小。 |
swipe-axis:string |
偵測到滑動操作的軸線。 |
offset:number |
相鄰內容畫格之間的空白空間大小。 |
frame-width:number |
單一內容畫格的寬度;這會覆寫 num-frames-to-display 。 |
frame-height:number |
單一內容畫格的高度。 |
autoplay-duration:number |
自動播放畫格的時間總長度。 |
autoplay-step-interval:number |
自動播放過程中每一幅畫格步驟之間的間隔。 |
exit-urls:string |
與圖片庫中的圖片對應的結束網址字串 (以半形逗號分隔)。 |
disable-gesture:boolean |
隱藏/停用可為圖片庫開啟觸控瀏覽功能的手勢元件。 |
pause-front-media:boolean |
是否在目前的畫格轉換時,暫停播放前一幅畫格中的媒體元素 (例如視訊或音訊)。 |
resume-next-media:boolean |
是否在目前的畫格轉換時,繼續播放下一幅畫格中的媒體元素 (例如視訊或音訊)。 |
事件
名稱 |
說明 |
firstinteraction |
在使用者首次與圖片庫互動時傳送。 |
allframesviewed |
在圖片庫中的所有畫格均已至少顯示一次時傳送。 |
allframesloaded |
在圖片庫中的所有畫格均已載入後傳送。 |
autoplayended |
自動播放結束 (不限原因) 後傳送。如果自動播放在到達預計的時間長度時自然結束,則 event.detail.completed 的值為 true,其他情況則為 false。 |
frameshown |
在任何必要動畫播放完畢之後,於顯示新畫格時傳送。 |
frameactivated |
在新畫格開始啟動時 (包括尚未顯示的情況) 傳送。 |
frameautoplayed |
在畫格因自動播放而啟動時傳送。這可能會比 frameshown 更容易觸發,因為在一次顯示的多幅畫格中,此事件會針對每一幅畫格個別啟動。 |
frametap |
在使用者輕觸畫格時傳送。 |
reachleftend |
在圖片庫到達最左端時傳送。 |
reachrightend |
在圖片庫到達最右端時傳送。 |
framemouseover |
在使用者將滑鼠游標移至畫格上時傳送。 |
framemouseout |
在使用者將滑鼠游標從畫格上移走時傳送。 |
trackstart |
在滑鼠游標或輕觸拖曳點開始移動時傳送。 |
track |
此元件會記錄滑鼠游標或輕觸拖曳點的 X 和 Y 座標位置資料。 |
trackend |
在滑鼠游標或輕觸拖曳點結束移動時傳送。 |
方法
名稱 |
說明 |
goToFrame(frame:number, opt_animate:string) |
前往指定畫格。 |
rotateOnce(opt_duration:number, opt_direction:string) |
將圖片庫中的所有畫格顯示一次。 |
stopRotation() |
暫停目前的自動旋轉動作。 |
goForwards() |
讓圖片庫往前移動一幅畫格。 |
goBackwards() |
讓圖片庫往後移動一幅畫格。 |
漩渦
gwd-swirl
漩渦元件。
屬性
名稱 |
說明 |
yscroll:decimal |
在中心區域算繪漩渦動畫時可使用的捲動係數。 |
settings:string |
啟動元件設定對話方塊。 |
事件
名稱 |
說明 |
ready |
在載入所有子項素材資源後傳送。 |
輕按區域
gwd-taparea
點擊/輕觸事件的抽象概念。
屬性
名稱 |
說明 |
exit-override-url:string |
使用者輕觸「輕按區域」時結束並前往的網址。 |
事件
名稱 |
說明 |
action |
在使用者輕觸 (行動裝置) 或點選 (電腦) 按鈕時傳送。 |
輕觸通話/傳簡訊
gwd-taptocall
這種元件可在點擊或輕觸後呼叫或傳送簡訊給已設定的電話號碼。
屬性
名稱 |
說明 |
number:string |
要撥打或傳送簡訊的電話號碼。 |
action:string |
選擇要傳送簡訊或撥打電話。 |
事件
名稱 |
說明 |
action |
在使用者輕觸 (行動裝置) 或點選 (電腦) 按鈕時傳送。 |
taptocall |
在準備撥打電話或發簡訊時傳送。 |
方法
名稱 |
說明 |
dial() |
撥打或傳送簡訊給已設定的電話號碼。 |
轉換式圖片庫
gwd-transitiongallery
轉換式圖片庫元件。
屬性
名稱 |
說明 |
settings:string |
啟動元件設定對話方塊。 |
images:string |
圖片庫中使用的圖片路徑字串 (以半形逗號分隔)。 |
scaling:string |
定義以何種方式將圖片調整為符合畫格大小。 |
exit-urls:string |
與圖片庫中的圖片對應的結束網址字串 (以半形逗號分隔)。 |
事件
名稱 |
說明 |
autoplayended |
自動播放結束 (不限原因) 後傳送。如果自動播放在到達預計的循環次數時自然結束,則 event.detail.completed 的值為 true,其他情況則為 false。 |
frameactivated |
在新畫格開始啟動時 (包括尚未顯示的情況) 傳送。 |
frameshown |
在顯示新畫格時傳送。 |
frametap |
在使用者輕觸畫格時傳送。 |
rotateonceended |
輪播結束 (不限原因) 後傳送。如果是自然結束,則 event.detail.completed 的值為 true,其他情況則為 False。 |
reachleftend |
在圖片庫到達最左端時傳送。 |
reachrightend |
在圖片庫到達最右端時傳送。 |
方法
名稱 |
說明 |
goToFrame(frame:number, with_animation:boolean) |
前往指定畫格。 |
rotateOnce(startFromCurrentFrame:boolean) |
顯示圖片庫中的畫格。如果 startFromCurrentFrame 為 false 或尚未指定,就會從起始畫格開始顯示;其他情況則從當前畫格開始。輪播會在播至起始畫格前停止。 |
startAutoplay(startFromCurrentFrame:boolean) |
開始在圖片庫中自動播放。如果 startFromCurrentFrame 為 false 或尚未指定,就會從起始畫格開始自動播放;其他情況則從當前畫格開始。自動播放達特定循環次數後就會停止播放。 |
stop() |
取消正在播放的動畫。 |
goForwards() |
讓圖片庫往前移動一幅畫格。 |
goBackwards() |
讓圖片庫往後移動一幅畫格。 |
百葉窗轉場效果
gwd-blinds
百葉窗效果元件會從某一側開始朝另一側逐一展開百頁板,以彷彿隔著百葉窗的形式顯示新圖片。
屬性
名稱 |
說明 |
direction:dropdown |
轉場效果的方向。 |
blinds:number |
百葉窗的數量。 |
transparentbackground:boolean |
是否要先顯示透明背景,之後再以百葉窗效果顯示新圖片。設為 false 時,百葉窗效果就會重疊在原本的圖片上。 |
門式轉場效果
gwd-door-wipe
門式效果元件是抹除效果的變化形式,根據抹除效果的方向可分為兩種類型:開門式抹除效果會從原本圖片的中央開始顯示新圖片,就像開啟兩扇門一樣;關門式抹除效果顯示新圖片的方向,則是從原本圖片的兩側到中央,彷彿關上兩扇門。
屬性
名稱 |
說明 |
orientation:dropdown |
動畫的方向。 |
direction:dropdown |
門式抹除效果的方向。 |
淡出轉場效果
圓形放大轉場效果
gwd-iris-wipe
根據預設,圓形放大轉場效果元件會從畫格中央開始,在不斷放大的圓形內顯示新圖片。
屬性
名稱 |
說明 |
originpercentx:number |
放大的圓形在 X 軸上的起點 (相對於畫格寬度)。 |
originpercenty:number |
放大的圓形在 Y 軸上的起點 (相對於畫格高度)。 |
推入轉場效果
gwd-push
使用推入轉換效果元件時,新圖片會滑入檢視畫面中,並將原本的圖片推出畫面。
屬性
名稱 |
說明 |
direction:dropdown |
推入效果的方向。 |
時鐘效果轉場
gwd-radial-wipe
時鐘效果轉場元件是抹除效果的變化形式,會以類似時鐘指針旋轉的方式 (以某個定點為中心,旋轉顯示半徑範圍) 顯示新圖片。
屬性
名稱 |
說明 |
direction:dropdown |
轉場效果的方向。 |
originpercentx:number |
旋轉半徑在 X 軸的起點 (相對於畫格寬度),系統會從這裡開始顯示新圖片。 |
originpercenty:number |
旋轉半徑在 Y 軸的起點 (相對於畫格高度),系統會從這裡開始顯示新圖片。 |
旋轉轉場效果
gwd-rotate
使用旋轉效果元件時,原本的圖片會開始旋轉並放大,然後在旋轉結束後縮小成新圖片。
屬性
名稱 |
說明 |
direction:dropdown |
轉場效果的方向。 |
片段轉場效果
gwd-slice
新圖片以片段效果元件顯示時會分成數個片段或長條,並依序滑入檢視畫面中。
屬性
名稱 |
說明 |
direction:dropdown |
片段效果的方向。 |
slices:number |
分割檢視畫面的片段或長條數量。 |
transparentbackground:boolean |
是否要先顯示透明背景,之後再以片段滑入的效果顯示新圖片。設為 false 時,片段效果就會重疊在原本的圖片上。 |
分割推入轉場效果
gwd-split-push
分割推入效果元件是推入效果的變化形式,會先將原本的圖片直向/橫向分為兩部分,而新圖片也會以相應的方式分割,進而將舊圖片分別沿相反的方向推出檢視畫面。
屬性
名稱 |
說明 |
orientation:dropdown |
動畫的方向。 |
條紋轉場效果
gwd-stripe-wipe
條紋轉場效果元件是抹除效果的變化形式,會讓兩種單色條紋同時交錯在畫面上,條紋覆蓋原本的圖片後就會縮小,最後顯示新圖片。
屬性
名稱 |
說明 |
direction:dropdown |
轉場效果的方向。 |
stripes:number |
各種顏色的條紋數量。 |
color1:color |
交錯條紋的其中一種顏色,以十六進位值表示。 |
color2:color |
交錯條紋的另一種顏色,以十六進位值表示。 |
威尼斯百葉窗轉場效果
gwd-venetian-blinds
威尼斯百葉窗效果元件會同時或逐一展開百頁板,以彷彿隔著威尼斯百葉窗的形式顯示新圖片。
屬性
名稱 |
說明 |
orientation:dropdown |
動畫的方向。 |
blinds:number |
百葉窗的數量。 |
staggered:boolean |
是否讓百葉板延遲轉換。設為 false 時,所有百葉板都會同時轉換。 |
抹除轉場效果
gwd-wipe
這是轉場效果的抹除元件。在一般的抹除效果中,新圖片會沿著從特定邊緣抹除到另一邊的線,逐漸取代原本的圖片。
屬性
名稱 |
說明 |
direction:dropdown |
轉場效果的方向。 |
angle:number |
以新圖片取代原本圖片的抹除線角度。 |
鋸齒形轉場效果
gwd-zigzag
鋸齒形效果元件會沿著方格蜿蜒行進的軌跡逐漸顯示新圖片。橫向的鋸齒形效果會在接續的列上以交錯的方向 (由左到右和由左到右) 顯示新圖片圖塊;直向的鋸齒形效果則會在接續的欄上以交錯的方向 (由上到下和由下到上) 顯示新圖片圖塊。
屬性
名稱 |
說明 |
orientation:dropdown |
動畫的方向。 |
rows:number |
鋸齒形效果的列數。 |
columns:number |
鋸齒形效果的欄數。 |
影片
gwd-video
這是納入 HTMLVideoElement
的元件。
屬性
名稱 |
說明 |
autoplay:boolean |
是否要在載入影片時自動播放影片。 |
loop:boolean |
是否要在影片播放完畢後循環播放。 |
muted:boolean |
影片一開始是否設為靜音狀態。 |
controls:boolean |
是否啟用預設的原生播放器控制項。 |
sources:file |
使用各種格式的影片字串 (以半形逗號分隔)。 |
poster:string |
在使用者播放或跳轉之前持續顯示的網址 (用來指明海報畫格)。 |
事件
名稱 |
說明 |
play |
在已暫停播放的媒體開始繼續播放時傳送;也就是在前一個暫停事件之後,於繼續播放內容時傳送。 |
pause |
在暫停播放時傳送。 |
playing |
在開始播放媒體 (包括首次播放、在暫停之後播放以及結束後重新開始播放) 時傳送。 |
ended |
在結束播放時傳送。 |
volumechange |
在變更音訊音量 (包括設定音量及變更靜音屬性) 時傳送。 |
seeked |
在完成搜尋作業後傳送。 |
waiting |
在因為其他操作尚未結束 (例如搜尋) 而無法完成所要求的操作 (例如播放) 時傳送。 |
方法
名稱 |
說明 |
mute() |
將影片切換為靜音/取消靜音。 |
pause() |
暫停播放影片。 |
play() |
播放影片。 |
replay() |
重播影片。 |
seek(time:number) |
跳到影片中的指定時間。 |
setVolume(volume:number) |
設定影片的音量。 |
setSources(sources:string) |
設定影片的來源。 |
YouTube
gwd-youtube
擴充 HTMLElement
,以便納入 YouTube API 呼叫。
屬性
名稱 |
說明 |
video-url:string |
影片的 YouTube 網址。 |
autoplay:string |
在支援的環境中,系統會在載入過程自動播放 YouTube 影片。 |
preview-duration:number |
設定預覽時間長度;僅適用於自動播放屬性設定為 preview 時。 |
controls:string |
顯示影片控制項 (none 、autohide )。 |
color:string |
影片進度條的顏色主題 (紅色或白色)。 |
muted:boolean |
影片一開始是否設為靜音狀態。 |
loop:boolean |
是否要在影片播放完畢後循環播放。 |
pause-on-end:boolean |
在影片剩下 1 秒時暫停播放影片。 |
start-position:number |
從指定時間 (秒數) 開始播放影片。 |
allowfullscreen:boolean |
允許在電腦上進入全螢幕模式。 |
extra-player-args:string |
其他 YouTube 播放器參數,相關說明請參閱 https://developers.google.com/youtube/player_parameters?playerVersion=HTML5#Parameters。 |
事件
名稱 |
說明 |
buffering |
YouTube 播放器正在緩衝處理中。 |
ended |
YouTube 影片已播放到結尾。 |
paused |
YouTube 影片已暫停。 |
playing |
YouTube 影片開始播放。 |
replayed |
YouTube 影片已重播。 |
viewed0percent |
在使用者尚未觀看任何影片內容時傳送。 |
viewed25percent |
在使用者觀看到影片內容的 25% 時傳送。 |
viewed50percent |
在使用者觀看到影片內容的 50% 時傳送。 |
viewed75percent |
在使用者觀看到影片內容的 75% 時傳送。 |
viewed100percent |
在使用者完全看完影片時傳送。 |
previewed0percent |
在使用者尚未觀看任何預覽內容時傳送。 |
previewed25percent |
在使用者觀看到預覽內容的 25% 時傳送。 |
previewed50percent |
在使用者觀看到預覽內容的 50% 時傳送。 |
previewed75percent |
在使用者觀看到預覽內容的 75% 時傳送。 |
previewed100percent |
在使用者完全看完預覽內容時傳送。 |
方法
名稱 |
說明 |
toggleMute() |
將影片切換為靜音/取消靜音。 |
pause() |
暫停播放影片。 |
play() |
播放影片。 |
replay() |
重播影片。 |
seek(time:number) |
跳到影片中的指定時間。 |
setYouTubeId(id:string, cueOnly:boolean) |
將 YouTube 影片的來源變更為指定 ID。 |