UI框架

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對象
  • 使用API

要生成JSON對象,Browser TVSDK提供了UI配置器工具。 在工具中,可以選擇各種設定,按一下 Test Configuration 驗證設定,然後按一下 Download Configuration 下載設定。 下載檔案的內容將用作要傳遞到 ptp.videoPlayer API。

如何運行UI配置器工具:

  1. 主持 frameworks 資料夾,可在本地Web伺服器上的瀏覽器TVSDK中使用。
  2. 要開啟工具,請開啟瀏覽器並導航至 < 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工廠建立元素。 可以使用相同的元素或首選方法來構建元素。

    您只需指定要更改的部件,其餘功能將從預設值中選取。 要開始,根據使用案例,您需要提供 SingleViewConfigurationObjectMultiViewConfigurationObject 結構。

    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.simpleButtonFactoryptp.factories.simpleDivFactoryptp.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文檔。

本頁內容