UI框架是瀏覽器TVSDK上的UI層,它提供與視頻播放器相關的各種UI結構。 通過進行適合您環境的點更改,可以建立高度可定製的播放器。
可自定義視覺(外觀)和UI行為。
您可以重寫自己的行為或覆蓋某些預設行為的功能。 您還可以通過從頭開始編寫行為來重新使用SDK提供的行為。
primetimevisualapi.min.js
是UI框架庫,其所有功能都通過全局對象ptp公開。 在以下示例中, videoPlayer
方法建立基礎播放器:
<script src="scripts/primetimevisualapi.min.js"></script>
<script>
(function(){
var player = ptp.videoPlayer('#video1');
})();
</script>
可以通過以下方式之一配置播放器:
要生成JSON對象,Browser TVSDK提供了UI配置器工具。 在工具中,可以選擇各種設定,按一下 Test Configuration 驗證設定,然後按一下 Download Configuration 下載設定。 下載檔案的內容將用作要傳遞到 ptp.videoPlayer
API。
如何運行UI配置器工具:
frameworks
資料夾,可在本地Web伺服器上的瀏覽器TVSDK中使用。< path-to-hosted-frameworks-folder>/ui-framework/ui-configurator/
。配置播放器的行為
可以使用以下方法之一配置播放器行為:
對於某些設定,這兩個選項都可用。
使用videoBehavior API ptp.videoPlayer
返回 ptp.videoBehavior
,允許您配置基礎視頻播放器。 如果需要配置某些與回放相關的設定,則可以使用此選項。
player.setAbrControlParameters ({object})
將配置對象傳遞到videoPlayer函式 使用此對象時,除了上面討論的回放設定外,還可以配置UI的行為。 調用方需要指定必須更改的參數,並且播放器將繼續為未指定的參數使用預設值。
var player = ptp.videoPlayer('#video1', {
player: {
abrControlParameters : {object}
},
controlBar : {object}
});
在上例中,ABR控制參數是使用配置對象配置的。 還傳遞了一個對象以配置控制欄行為。
有關配置對象的結構,請參閱下面的「查看配置對象結構」部分。
訪問AdobePSDK.MediaPlayer 您可以使用 videoPlayer.getMediaPlayer
在某些高級使用情況下,您需要訪問瀏覽器TVSDK的MediaPlayer。
配置播放器的外觀 有關使播放器外觀的詳細資訊,請參閱 剝皮玩家。
在UI框架術語中,行為是定義特定元件的可視部分和交互部分的構造。 通過使用下面概述的對象結構,可以修改要更改的行為。
例如,在顯示卷滑塊後,如果不想隱藏它,請使用以下示例:
var customVolumeSliderBehavior = function (element, configuration, player) {
function neverHide() {
// do nothing
}
var api = ptp.volumeSliderBehavior(element, configuration, player)
.compose({
hide: neverHide
});
return api;
};
var player = ptp.videoPlayer('.videoHolder', {
controlBar : {
volume: {
slider: {
behavior: customVolumeSliderBehavior
}
}
}
}
根據您需要的自定義,您可以覆蓋行為中的某些功能或編寫您自己的行為。 有關可以覆蓋哪些功能的詳細資訊,請參閱 UI框架 API文檔。
以下是一些其他參考資訊:
查看配置對象結構 這是完整的對象結構,它以分層方式將所有預設行為與行為的預設元素一起提到。 在示例配置中,使用UI工廠建立元素。 可以使用相同的元素或首選方法來構建元素。
您只需指定要更改的部件,其餘功能將從預設值中選取。 要開始,根據使用案例,您需要提供 SingleViewConfigurationObject
或 MultiViewConfigurationObject
結構。
var DEFAULT_CONTROL_BAR_CONFIG = {
behavior: ptp.controlBarBehavior,
element: ptp.factories.simpleDivFactory(null, ptp.elementGetter(selector), 'ptp-control-bar'),
audioTrack: {
behavior: ptp.audioTrackButtonBehavior,
element: ptp.factories.simpleButtonFactory('audioTrackBtn', ptp.elementGetter('.ptp-control-bar'),
'ptp-control ptp-btn-control ptp-button-background ptp-btn-audio-track ptp-control-bar-btn')
},
closedCaption: {
behavior: ptp.closedCaptionButtonBehavior,
element: ptp.factories.simpleButtonFactory('cc', ptp.elementGetter('.ptp-control-bar'),
'ptp-control ptp-btn-control ptp-button-background ' +
'ptp-btn-closed-caption ptp-control-bar-btn hidden',
'CC')
},
displayTime: {
behavior: ptp.timeRemainingBehavior,
element: ptp.factories.simpleDivFactory('displayTime', ptp.elementGetter('.ptp-control-bar'),
'ptp-control ptp-txt-control ptp-txt-display-time')
},
fastForward: {
behavior: ptp.fastForwardButtonBehavior,
element: ptp.factories.simpleButtonFactory('fastForward', ptp.elementGetter('.ptp-control-bar'),
'ptp-control ptp-btn-control ptp-button-background ptp-btn-fastforward ptp-control-bar-btn',
'Fast Forward')
},
fastRewind: {
behavior: ptp.fastRewindButtonBehavior,
element: ptp.factories.simpleButtonFactory('fastRewind', ptp.elementGetter('.ptp-control-bar'),
'ptp-control ptp-btn-control ptp-button-background ptp-btn-fastrewind ptp-control-bar-btn',
'Fast Rewind')
},
fullScreen: {
behavior: ptp.fullScreenButtonBehavior,
element: ptp.factories.simpleButtonFactory('fullScreen', ptp.elementGetter('.ptp-control-bar'),
'ptp-control ptp-btn-control ptp-button-background ptp-btn-fullscreen ptp-control-bar-btn',
'Full Screen')
},
moreOptions: {
behavior: ptp.moreOptionsButtonBehavior,
element: ptp.factories.simpleButtonFactory('moreOptions', ptp.elementGetter('.ptp-control-bar'),
'ptp-control ptp-btn-control ptp-button-background ptp-btn-more-options ptp-control-bar-btn',
'More Options')
},
multiView: {
behavior: ptp.multiViewButtonBehavior,
element: ptp.factories.simpleButtonFactory('multiView', ptp.elementGetter('.ptp-control-bar'),
'ptp-control ptp-btn-control ptp-button-background ptp-btn-multiview ptp-control-bar-btn',
'Multi View')
},
socialButton: {
behavior: ptp.shareVideoButtonBehavior,
element: ptp.factories.simpleButtonFactory('shareVideo', ptp.elementGetter('.ptp-control-bar'),
'ptp-control ptp-btn-control ptp-button-background ptp-btn-share-video ptp-control-bar-btn',
'Share Video')
},
volume: {
behavior: ptp.volumeBehavior,
element: ptp.factories.simpleDivFactory('volume', ptp.elementGetter('.ptp-control-bar'),
'ptp-control ptp-volume-control ptp-control-bar-btn'),
mute: {
behavior: ptp.muteButtonBehavior,
element: ptp.factories.simpleButtonFactory('mute', ptp.elementGetter('.ptp-volume-control'),
'ptp-control ptp-button-background ptp-btn-volume', 'Mute')
},
slider: {
behavior: ptp.volumeSliderBehavior,
element: ptp.factories.simpleSliderFactory('volumeSlider', ptp.elementGetter('.ptp-volume-control'),
'ptp-control ptp-volume-slider ptp-volume-hidden', 'Volume')
}
},
pip: {
behavior: ptp.pipButtonBehavior,
element: ptp.factories.simpleButtonFactory('pip', ptp.elementGetter('.ptp-control-bar'),
'ptp-control ptp-btn-control ptp-button-background ptp-btn-pip ptp-control-bar-btn', 'PIP')
},
playPause: {
behavior: ptp.playPauseButtonBehavior,
element: ptp.factories.simpleButtonFactory('play', ptp.elementGetter('.ptp-control-bar'),
'ptp-control ptp-btn-control ptp-button-background ptp-btn-playpause ptp-control-bar-btn',
'Play')
},
rewind: {
behavior: ptp.rewindButtonBehavior,
element: ptp.factories.simpleButtonFactory('rewind', ptp.elementGetter('.ptp-control-bar'),
'ptp-control ptp-btn-control ptp-button-background ptp-btn-rewind ptp-control-bar-btn',
'Rewind')
},
scrubBar: {
element: ptp.factories.simpleDivFactory('scrubBar', ptp.elementGetter('.ptp-control-bar'), 'ptp-scrub-bar'),
behavior: ptp.scrubBarBehavior,
},
bufferProgressBar: {
element: ptp.factories.simpleDivFactory('bufferProgressBar', ptp.elementGetter('.ptp-scrub-bar'),
'ptp-buffer-progress-bar'),
behavior: ptp.bufferProgressBarBehavior
},
seekToBar: {
element: ptp.factories.simpleDivFactory('seekToBar', ptp.elementGetter('.ptp-scrub-bar'), 'ptp-seek-to-bar'),
behavior: ptp.seekToBarBehavior
},
playbackProgressBar: {
element: ptp.factories.simpleDivFactory('playbackProgressBar', ptp.elementGetter('.ptp-scrub-bar'),
'ptp-playback-progress-bar'),
behavior: ptp.playProgressBarBehavior
},
playHead: {
element: ptp.factories.simpleDivFactory('playHead', ptp.elementGetter('.ptp-scrub-bar'), 'ptp-progress-bar-play-head'),
behavior: ptp.playHeadBehavior
}
},
slowRewind: {
behavior: ptp.slowRewindButtonBehavior,
element: ptp.factories.simpleButtonFactory('slowRewind', ptp.elementGetter('.ptp-control-bar'),
'ptp-control ptp-btn-control ptp-button-background ptp-btn-slowrewind ptp-control-bar-btn',
'Slow Rewind'),
enabled: true
},
slowForward: {
behavior: ptp.slowForwardButtonBehavior,
element: ptp.factories.simpleButtonFactory('slowForward', ptp.elementGetter('.ptp-control-bar'),
'ptp-control ptp-btn-control ptp-button-background ptp-btn-slowforward ptp-control-bar-btn',
'Slow Forward')
},
spacer: {
element: ptp.factories.simpleDivFactory('spacer', ptp.elementGetter('.ptp-control-bar'), 'ptp-fill-spacer')
},
trickPlayRateDisplay: {
behavior: ptp.trickPlayRateDisplayBehavior,
element: ptp.factories.simpleDivFactory('trickPlayDisplay',
ptp.elementGetter('.ptp-control-bar'),
'ptp-control ptp-btn-control ptp-control-bar-trick-play-rate hidden')
}
};
var DEFAULT_LOCALIZATION_CONFIG = {
locale: 'en-US',
behavior: mapLocalizer,
localizationMap: {
'en-US': {
OK: 'Okay',
CANCEL: 'Cancel',
DEFAULT: 'Default',
NONE: 'None',
FONT_MONO_W_SERIF: 'Monospaced With Serifs',
FONT_PROP_W_SERIF: 'Proportional with Serifs',
FONT_MONO_WO_SERIF: 'Monospaced without Serifs',
FONT_CASUAL: 'Casual',
FONT_CURSIVE: 'Cursive',
FONT_SMALL_CAPS: 'Small Capitals',
FONT_EDGE_DEFAULT: 'Default',
FONT_EDGE_NONE: 'None',
FONT_EDGE_RAISED: 'Raised',
FONT_EDGE_DEPRESSED: 'Depressed',
FONT_EDGE_UNIFORM: 'Uniform',
FONT_EDGE_DROP_SHADOW_LEFT: 'Drop Shadow Left',
FONT_EDGE_DROP_SHADOW_RIGHT: 'Drop Shadow Right',
SIZE_SMALL: 'Small',
SIZE_MEDIUM: 'Medium',
SIZE_LARGE: 'Large',
COLOR_BLACK: 'Black',
COLOR_GREY: 'Grey',
COLOR_WHITE: 'White',
COLOR_BRIGHT_WHITE: 'Bright White',
COLOR_DARK_RED: 'Dark Red',
COLOR_RED: 'Red',
COLOR_BRIGHT_RED: 'Bright Red',
COLOR_DARK_GREEN: 'Dark Green',
COLOR_GREEN: 'Green',
COLOR_BRIGHT_GREEN: 'Bright Green',
COLOR_DARK_BLUE: 'Dark Blue',
COLOR_BLUE: 'Blue',
COLOR_BRIGHT_BLUE: 'Bright Blue',
COLOR_DARK_YELLOW: 'Dark Yellow',
COLOR_YELLOW: 'Yellow',
COLOR_BRIGHT_YELLOW: 'Bright Yellow',
COLOR_DARK_MAGENTA: 'Dark Magenta',
COLOR_MAGENTA: 'Magenta',
COLOR_BRIGHT_MAGENTA: 'Bright Magenta',
COLOR_DARK_CYAN: 'Dark Cyan',
COLOR_CYAN: 'Cyan',
COLOR_BRIGHT_CYAN: 'Bright Cyan',
REPLAY: 'Replay',
PLAY: 'Play',
PAUSE: 'Pause',
STOP: 'Stop'
}
}
};
var DEFAULT_AUDIO_TRACK_SELECTION_CONFIG = {
behavior: ptp.audioTrackSelectionPanelBehavior,
element: ptp.factories.simpleDivFactory('audioTrackSelectionPanel', ptp.elementGetter(selector),
'ptp-audio-track-selection-panel hidden'),
audioTrackSelectionPanelHeader: {
behavior: ptp.audioTrackSelectionPanelHeader,
element: ptp.factories.simpleDivFactory('header', ptp.elementGetter('.ptp-audio-track-selection-panel'),
'ptp-panel-header ptp-audio-track-selection-header'),
audioTrackSelectionPanelCloseButton: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('closeButton', ptp.elementGetter('.ptp-audio-track-selection-header'),
'ptp-control ptp-btn-control ptp-panel-close-btn', 'X')
},
audioTrackSelectionPanelTitle: {
element: ptp.factories.simpleDivFactory('title', ptp.elementGetter('.ptp-audio-track-selection-header'),
'ptp-panel-title', 'Audio Track')
}
},
audioTrackSelectionPanelSeparator: {
element: ptp.factories.simpleHRFactory('audioTrackSelectionPanelSeparator',
ptp.elementGetter('.ptp-audio-track-selection-panel'), 'ptp-hr-separator')
},
audioTrackSelectionMenu: {
behavior: ptp.audioTrackSelectionMenu,
element: ptp.factories.simpleDivFactory('audioTrackSelectionMenu', ptp.elementGetter('.ptp-audio-track-selection-panel'),
'ptp-audio-track-selection-menu', 'Menu TBD')
}
};
var DEFAULT_CLOSED_CAPTION_LANGUAGE_PANEL_CONFIG = {
behavior: ptp.closedCaptionLanguagePanelBehavior,
element: ptp.factories.simpleDivFactory('closedCaptionLanguagePanel', ptp.elementGetter(selector),
'ptp-closed-caption-panel hidden ptp-closed-caption-language-panel'),
closedCaptionLanguagePanelHeader: {
behavior: ptp.closedCaptionLanguagePanelHeader,
element: ptp.factories.simpleDivFactory('header', ptp.elementGetter('.ptp-closed-caption-language-panel'),
'ptp-panel-header ptp-closed-caption-language-header'),
closedCaptionLanguageCloseButton: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('closeButton', ptp.elementGetter('.ptp-closed-caption-language-header'),
'ptp-control ptp-btn-control ptp-panel-close-btn', 'X')
},
closedCaptionLanguageTitle: {
element: ptp.factories.simpleDivFactory('title', ptp.elementGetter('.ptp-closed-caption-language-header'),
'ptp-panel-title', 'Closed Captions')
},
closedCaptionLanguageOptionsButton: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('title', ptp.elementGetter('.ptp-closed-caption-language-header'),
'ptp-closed-caption-options-btn', 'Options')
}
},
closedCaptionLanguageSeparator: {
element: ptp.factories.simpleHRFactory('closedCaptionLanguageSeparator', ptp.elementGetter('.ptp-closed-caption-panel'),
'ptp-hr-separator')
},
closedCaptionOptions: {
behavior: ptp.closedCaptionLanguageMenu,
element: ptp.factories.simpleDivFactory('captionLanguageMenu', ptp.elementGetter('.ptp-closed-caption-panel'),
'ptp-scroll-bar ptp-closed-caption-language-menu')
}
};
var DEFAULT_CLOSED_CAPTION_OPTIONS_PANEL_CONFIG = {
behavior: ptp.closedCaptionOptionsPanelBehavior,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsPanel', ptp.elementGetter(selector),
'ptp-closed-caption-panel hidden ptp-closed-caption-options-panel'),
closedCaptionOptionsHeader: {
behavior: ptp.closedCaptionOptionsPanelHeader,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsHeader', ptp.elementGetter('.ptp-closed-caption-options-panel'),
'ptp-panel-header ptp-closed-caption-options-header'),
closedCaptionOptionsCloseButton: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsCloseButton',
ptp.elementGetter('.ptp-closed-caption-options-header'),
'ptp-control ptp-btn-control ptp-panel-close-btn', '<')
},
closedCaptionOptionsTitle: {
element: ptp.factories.simpleDivFactory('closedCaptionOptionsTitle',
ptp.elementGetter('.ptp-closed-caption-options-header'), 'ptp-panel-title', 'Closed Captions')
},
closedCaptionLanguageDoneButton: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('closedCaptionLanguageDoneButton',
ptp.elementGetter('.ptp-closed-caption-options-header'), 'ptp-closed-caption-done-btn', 'Done')
}
},
closedCaptionOptionsHeaderSeparator: {
element: ptp.factories.simpleHRFactory('closedCaptionOptionsHeaderSeparator',
ptp.elementGetter('.ptp-closed-caption-options-panel'), 'ptp-hr-separator')
},
closedCaptionOptionsMenu: {
behavior: ptp.closedCaptionOptionsMenu,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsMenu', ptp.elementGetter('.ptp-closed-caption-options-panel'),
'ptp-closed-caption-options-menu'),
closedCaptionOptionsMainMenu: {
behavior: ptp.closedCaptionOptionsMainMenu,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsMainMenu',
ptp.elementGetter('.ptp-closed-caption-options-menu'),
'ptp-scroll-bar ptp-closed-caption-options-main-menu'),
closedCaptionOptionsFontStyle: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsFontStyle',
ptp.elementGetter('.ptp-closed-caption-options-main-menu'),
'ptp-closed-caption-options-menu-item', 'Font Style')
},
closedCaptionOptionsFontSize: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsFontSize',
ptp.elementGetter('.ptp-closed-caption-options-main-menu'),
'ptp-closed-caption-options-menu-item', 'Font Size')
},
closedCaptionOptionsFontColor: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsFontColor',
ptp.elementGetter('.ptp-closed-caption-options-main-menu'),
'ptp-closed-caption-options-menu-item', 'Font Color')
},
closedCaptionOptionsFontOpacity: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsFontOpacity',
ptp.elementGetter('.ptp-closed-caption-options-main-menu'),
'ptp-closed-caption-options-menu-item', 'Font Opacity')
},
closedCaptionOptionsBackgroundColor: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsBackgroundColor',
ptp.elementGetter('.ptp-closed-caption-options-main-menu'),
'ptp-closed-caption-options-menu-item', 'Background Color')
},
closedCaptionOptionsBackgroundOpacity: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsBackgroundOpacity',
ptp.elementGetter('.ptp-closed-caption-options-main-menu'),
'ptp-closed-caption-options-menu-item', 'Background Opacity')
},
closedCaptionOptionsFillColor: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsFillColor',
ptp.elementGetter('.ptp-closed-caption-options-main-menu'),
'ptp-closed-caption-options-menu-item', 'Fill Color')
},
closedCaptionOptionsFillOpacity: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsFillOpacity',
ptp.elementGetter('.ptp-closed-caption-options-main-menu'),
'ptp-closed-caption-options-menu-item', 'Fill Opacity')
},
closedCaptionOptionsFontEdge: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsFontEdge',
ptp.elementGetter('.ptp-closed-caption-options-main-menu'),
'ptp-closed-caption-options-menu-item', 'Stroke Weight')
},
closedCaptionOptionsFontEdgeColor: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsFontEdgeColor',
ptp.elementGetter('.ptp-closed-caption-options-main-menu'),
'ptp-closed-caption-options-menu-item', 'Stroke Color')
}
},
closedCaptionOptionsMenuSeparator: {
element: ptp.factories.simpleHRFactory('closedCaptionOptionsMenuSeparator',
ptp.elementGetter('.ptp-closed-caption-options-menu'),
'ptp-closed-caption-options-menu-separator')
},
closedCaptionOptionsSubMenu: {
behavior: ptp.closedCaptionOptionsSubMenu,
closedCaptionOptionsFontStyleSubMenu: {
behavior: ptp.verticalListMenu,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsFontStyleSubMenu',
ptp.elementGetter('.ptp-closed-caption-options-menu'),
'ptp-scroll-bar ptp-closed-caption-options-sub-menu hidden')
},
closedCaptionOptionsFontEdgeSubMenu: {
behavior: ptp.verticalListMenu,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsFontEdgeSubMenu',
ptp.elementGetter('.ptp-closed-caption-options-menu'),
'ptp-scroll-bar ptp-closed-caption-options-sub-menu hidden')
},
closedCaptionOptionsFontEdgeColorSubMenu: {
behavior: ptp.verticalListMenu,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsFontEdgeColorSubMenu',
ptp.elementGetter('.ptp-closed-caption-options-menu'),
'ptp-scroll-bar ptp-closed-caption-options-sub-menu hidden')
},
closedCaptionOptionsFontSizeSubMenu: {
behavior: ptp.verticalListMenu,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsFontSizeSubMenu',
ptp.elementGetter('.ptp-closed-caption-options-menu'),
'ptp-scroll-bar ptp-closed-caption-options-sub-menu hidden')
},
closedCaptionOptionsFontColorSubMenu: {
behavior: ptp.verticalListMenu,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsFontColorSubMenu',
ptp.elementGetter('.ptp-closed-caption-options-menu'),
'ptp-scroll-bar ptp-closed-caption-options-sub-menu hidden')
},
closedCaptionOptionsFontOpacitySubMenu: {
behavior: ptp.sliderMenu,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsFontOpacitySubMenu',
ptp.elementGetter('.ptp-closed-caption-options-menu'),
'ptp-closed-caption-options-sub-menu ptp-closed-caption-options-opacity-slider hidden')
},
closedCaptionOptionsBackgroundColorSubMenu: {
behavior: ptp.verticalListMenu,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsBackgroundColorSubMenu',
ptp.elementGetter('.ptp-closed-caption-options-menu'),
'ptp-scroll-bar ptp-closed-caption-options-sub-menu hidden')
},
closedCaptionOptionsBackgroundOpacitySubMenu: {
behavior: ptp.sliderMenu,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsBackgroundOpacitySubMenu',
ptp.elementGetter('.ptp-closed-caption-options-menu'),
'ptp-closed-caption-options-sub-menu ptp-closed-caption-options-opacity-slider hidden')
},
closedCaptionOptionsFillColorSubMenu: {
behavior: ptp.verticalListMenu,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsFillColorSubMenu',
ptp.elementGetter('.ptp-closed-caption-options-menu'),
'ptp-scroll-bar ptp-closed-caption-options-sub-menu hidden')
},
closedCaptionOptionsFillOpacitySubMenu: {
behavior: ptp.sliderMenu,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsFillOpacitySubMenu',
ptp.elementGetter('.ptp-closed-caption-options-menu'),
'ptp-closed-caption-options-sub-menu ptp-closed-caption-options-opacity-slider hidden')
}
}
},
closedCaptionOptionsPreviewSeparator: {
element: ptp.factories.simpleHRFactory('closedCaptionOptionsPreviewSeparator',
ptp.elementGetter('.ptp-closed-caption-options-panel'), 'ptp-hr-separator')
},
closedCaptionPreviewPanel: {
behavior: ptp.closedCaptionPreviewPanel,
text: 'Sample Captions',
element: ptp.factories.simpleDivFactory('closedCaptionPreviewPanel',
ptp.elementGetter('.ptp-closed-caption-options-panel'),
'ptp-closed-caption-preview-panel', 'Sample Captions')
},
closedCaptionOptionsFooterSeparator: {
element: ptp.factories.simpleHRFactory('closedCaptionOptionsFooterSeparator',
ptp.elementGetter('.ptp-closed-caption-options-panel'), 'ptp-hr-separator')
},
closedCaptionOptionsFooter: {
behavior: ptp.closedCaptionOptionsFooter,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsFooter',
ptp.elementGetter('.ptp-closed-caption-options-panel'), 'ptp-closed-caption-options-footer'),
closedCaptionOptionsResetButton: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsResetButton',
ptp.elementGetter('.ptp-closed-caption-options-footer'),
'ptp-closed-caption-options-reset-button', 'Reset to Default')
},
closedCaptionOptionsApplyButton: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('closedCaptionOptionsApplyButton',
ptp.elementGetter('.ptp-closed-caption-options-footer'),
'ptp-closed-caption-options-apply-button', 'Apply')
}
}
};
var DEFAULT_SHARE_VIDEO_PANEL_CONFIG = {
behavior: ptp.shareVideoPanelBehavior,
element: ptp.factories.simpleDivFactory('shareVideoPanel', ptp.elementGetter(selector), 'ptp-share-video-panel hidden'),
shareVideoPanelHeader: {
behavior: ptp.shareVideoPanelHeader,
element: ptp.factories.simpleDivFactory('shareVideoPanelHeader', ptp.elementGetter('.ptp-share-video-panel'),
'ptp-panel-header ptp-share-video-panel-header'),
shareVideoPanelCloseButton: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('shareVideoPanelCloseButton', ptp.elementGetter('.ptp-share-video-panel-header'),
'ptp-control ptp-btn-control ptp-panel-close-btn', 'X')
},
shareVideoPanelTitle: {
element: ptp.factories.simpleDivFactory('shareVideoPanelTitle', ptp.elementGetter('.ptp-share-video-panel-header'),
'ptp-panel-title', 'Social Share')
}
},
shareVideoPanelHeaderSeparator: {
element: ptp.factories.simpleHRFactory('shareVideoPanelHeaderSeparator', ptp.elementGetter('.ptp-share-video-panel'),
'ptp-hr-separator')
},
shareVideoPanelMenu: {
element: ptp.factories.simpleDivFactory('shareVideoPanelMenu', ptp.elementGetter('.ptp-share-video-panel'),
'share-video-panel-menu'),
behavior: ptp.shareVideoPanelMenu,
shareVideoPanelFacebookBtn: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('shareVideoPanelFacebookBtn', ptp.elementGetter('.share-video-panel-menu'),
'ptp-btn-control ptp-button-background ptp-share-video-panel-menu-item ' +
'ptp-btn-share-video-facebook')
},
shareVideoPanelTwitterBtn: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('shareVideoPanelTwitterBtn', ptp.elementGetter('.share-video-panel-menu'),
'ptp-btn-control ptp-button-background ptp-share-video-panel-menu-item ' +
'ptp-btn-share-video-twitter')
},
shareVideoPanelGoogleBtn: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('shareVideoPanelGoogleBtn', ptp.elementGetter('.share-video-panel-menu'),
'ptp-btn-control ptp-button-background ptp-share-video-panel-menu-item ' +
'ptp-btn-share-video-google-plus')
},
shareVideoPanelLinkedinBtn: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('shareVideoPanelLinkedinBtn', ptp.elementGetter('.share-video-panel-menu'),
'ptp-btn-control ptp-button-background ptp-share-video-panel-menu-item ' +
'ptp-btn-share-video-linkedin')
}
}
};
var DEFAULT_MORE_OPTIONS_CONTROL_PANEL_CONFIG = {
behavior: ptp.moreOptionsControlPanel,
element: ptp.factories.simpleDivFactory('moreOptionsControlPanel', ptp.elementGetter(selector),
'ptp-more-options-control-panel hidden'),
moreOptionsControlPanelHeader: {
behavior: ptp.moreOptionsControlPanelHeader,
element: ptp.factories.simpleDivFactory('moreOptionsControlPanelHeader',
ptp.elementGetter('.ptp-more-options-control-panel'),
'ptp-panel-header ptp-more-options-control-panel-header'),
moreOptionsControlPanelCloseButton: {
behavior: ptp.buttonBehavior,
element: ptp.factories.simpleDivFactory('moreOptionsControlPanelCloseButton',
ptp.elementGetter('.ptp-more-options-control-panel-header'),
'ptp-control ptp-btn-control ptp-panel-close-btn', 'X')
},
moreOptionsControlPanelTitle: {
element: ptp.factories.simpleDivFactory('moreOptionsPanelTitle',
ptp.elementGetter('.ptp-more-options-control-panel-header'),
'ptp-panel-title', 'Options')
}
},
moreOptionsPanelHeaderSeparator: {
element: ptp.factories.simpleHRFactory('moreOptionsPanelHeaderSeparator',
ptp.elementGetter('.ptp-more-options-control-panel'),
'ptp-hr-separator')
},
moreOptionsPanelMenu: {
element: ptp.factories.simpleDivFactory('moreOptionsPanelMenu',
ptp.elementGetter('.ptp-more-options-control-panel'),
'ptp-more-options-control-panel-menu'),
behavior: ptp.moreOptionsControlPanelMenu,
audioTrackButton: {
behavior: ptp.audioTrackButtonBehavior,
element: ptp.factories.simpleButtonFactory('audioTrackBtn', ptp.elementGetter('.ptp-more-options-control-panel-menu'),
'ptp-control ptp-btn-control ptp-button-background ptp-btn-audio-track ' +
'ptp-more-options-control-panel-menu-item ' +
'ptp-more-options-menu-btn',
'Audio Track')
},
multiViewButton: {
behavior: ptp.multiViewButtonBehavior,
element: ptp.factories.simpleButtonFactory('multiView', ptp.elementGetter('.ptp-more-options-control-panel-menu'),
'ptp-control ptp-btn-control ptp-button-background ptp-btn-multiview ' +
'ptp-more-options-control-panel-menu-item ' +
'ptp-more-options-menu-btn',
'Multi View')
},
pipButton: {
behavior: ptp.pipButtonBehavior,
element: ptp.factories.simpleButtonFactory('pip', ptp.elementGetter('.ptp-more-options-control-panel-menu'),
'ptp-control ptp-btn-control ptp-button-background ptp-btn-pip ' +
'ptp-more-options-control-panel-menu-item ' +
'ptp-more-options-menu-btn', 'PIP')
},
socialButton: {
behavior: ptp.shareVideoButtonBehavior,
element: ptp.factories.simpleButtonFactory('shareVideo', ptp.elementGetter('.ptp-more-options-control-panel-menu'),
'ptp-control ptp-btn-control ptp-button-background ptp-btn-share-video ' +
'ptp-more-options-control-panel-menu-item ' +
'ptp-more-options-menu-btn',
'Share Video')
}
}
};
SingleViewConfigurationObject = {
element: ptp.elementGetter(selector),
classNames: 'ptp-root-element',
behavior: ptp.singleViewBehavior,
logLevel: 0,
logOutput: null,
player: {
element: ptp.factories.simpleDivFactory('videoPlayer', ptp.elementGetter(selector),
'ptp-main-video-div-style ptp-background-style'),
behavior: ptp.videoBehavior,
autoPlay: true,
bufferingOverlay: {
behavior: ptp.bufferingOverlayBehavior,
element: ptp.createDiv('bufferingOverlay', ptp.elementGetter('.ptp-main-video-div-style'), 'ptp-buffering-overlay')
},
errorMessagePanel: {
behavior: ptp.errorMessagePanelBehavior,
element: ptp.createDiv('errorMessagePanel', ptp.elementGetter('.ptp-main-video-div-style'), 'ptp-error-message-panel hidden')
},
controlsDisabledInAd: //same as ptp.videoBehavior.setControlsDisabledInAd
mediaPlayerItemConfig: //same as ptp.videoBehavior.setMediaPlayerItemConfig
abrControlParameters: //same as ptp.videoBehavior.setAbrControlParameters
bufferControlParameters: //same as ptp.videoBehavior.setBufferControlParameters
ccVisibility: //same as ptp.videoBehavior.setCCVisibility
ccStyle: //same as ptp.videoBehavior.setCCStyle
mediaResource: //same as ptp.videoBehavior.setMediaResource
volume: //same as ptp.videoBehavior.setVolume
},
pip: {
element: ptp.factories.simpleDivFactory('pip', ptp.elementGetter(selector), 'ptp-pip-video-div'),
behavior: ptp.videoBehavior,
bufferingOverlay: {
behavior: ptp.bufferingOverlayBehavior,
element: ptp.createDiv('bufferingOverlay', ptp.elementGetter('.ptp-pip-video-div'), 'ptp-buffering-overlay')
},
errorMessagePanel: {
behavior: ptp.errorMessagePanelBehavior,
element: ptp.createDiv('errorMessagePanel', ptp.elementGetter('.ptp-pip-video-div'), 'ptp-error-message-panel hidden')
},
autoPlay: false
},
localization: DEFAULT_LOCALIZATION_CONFIG,
controlBar: DEFAULT_CONTROL_BAR_CONFIG,
audioTrackSelectionPanel: DEFAULT_AUDIO_TRACK_SELECTION_CONFIG,
closedCaptionLanguagePanel: DEFAULT_CLOSED_CAPTION_LANGUAGE_PANEL_CONFIG,
closedCaptionOptionsPanel: DEFAULT_CLOSED_CAPTION_OPTIONS_PANEL_CONFIG,
moreOptionsControlPanel: DEFAULT_MORE_OPTIONS_CONTROL_PANEL_CONFIG,
shareVideoPanel: DEFAULT_SHARE_VIDEO_PANEL_CONFIG
};
MultiViewConfigurationObject = {
element: ptp.elementGetter(selector),
classNames: 'ptp-root-element',
behavior: ptp.multiViewBehavior,
logLevel: 0,
logOutput: null,
multiVideoHolder: {
element: ptp.factories.simpleDivFactory('multiViewPlayer', ptp.elementGetter(selector), 'ptp-multi-view-container')
},
views: [
{
player: {} // see in SingleViewConfigurationObject above
}
],
localization: DEFAULT_LOCALIZATION_CONFIG,
controlBar: DEFAULT_CONTROL_BAR_CONFIG,
audioTrackSelectionPanel: DEFAULT_AUDIO_TRACK_SELECTION_CONFIG,
closedCaptionLanguagePanel: DEFAULT_CLOSED_CAPTION_LANGUAGE_PANEL_CONFIG,
closedCaptionOptionsPanel: DEFAULT_CLOSED_CAPTION_OPTIONS_PANEL_CONFIG,
moreOptionsControlPanel: DEFAULT_MORE_OPTIONS_CONTROL_PANEL_CONFIG,
shareVideoPanel: DEFAULT_SHARE_VIDEO_PANEL_CONFIG
};
幫助程式構造 此構造由以下組成:
工廠 要建立可視元素,可以使用 ptp.factories.simpleButtonFactory
。 ptp.factories.simpleDivFactory
。 ptp.factories.simpleHRFactory
, ptp.factories.simpleSliderFactory
。 有關詳細資訊,請參見 UI框架 API文檔。
米辛 混合是可組合的模組,可以在使用公共結構的行為中組合。 例如,許多元件希望瞭解在廣告播放時可能影響其行為的更改。 所有這些元素都將 adBreak
類。
下面是如何實現內置混合的示例 adBreakStyling
:
adBreakStyling = function (element, player) {
...
...
return composable().compose({
init: init,
manageAdBreakStyle: manageAdBreakStyle
});
}
以下是行為如何使用此混合:
customBehavior = function (element, configuration, player) {
var api =
component(element, configuration, player, clickHandler).compose(
adBreakStyling(element, player).compose({
init: init,
}));
return api;
}
現在 customBehavior
可以使用 adBreakStyling
,在本例中是 manageAdBreakStyle
。 另一個使用情形是混合可以添加事件偵聽器,而在處理程式中,混合可以以某種方式修改元素。 隨後,使用此混合的元件將自動具有此功能。
實用程式 一些公用設施,如 ptp.elementGetter
,用於配置節和 ptp.deepmerge
,可幫助您編寫或擴展行為。 有關詳細資訊,請參見 UI框架 API文檔。