src/dynamics/video_player/player/player.html
<div itemscope itemtype="http://schema.org/VideoObject"
class="{{css}}-container {{cssplayer}}-size-{{csssize}} {{iecss}}-{{ie8 ? 'ie8' : 'noie8'}} {{csstheme}}
{{cssplayer}}-{{fullscreened ? 'fullscreen' : 'normal'}}-view {{cssplayer}}-{{firefox ? 'firefox' : 'common'}}-browser
{{cssplayer}}-{{themecolor}}-color {{cssplayer}}-device-type-{{mobileview ? 'mobile' : 'desktop'}}
{{cssplayer}}-viewport-{{mobileviewport ? 'mobile' : 'desktop'}}
{{is_floating ? cssfloatingclasses : ''}}
{{presetkey ? cssplayer + '-preset-' + presetkey : ''}}
{{(sidebar_active && gallerysidebar) ? cssplayer + '-with-sidebar-gallery' : ''}}
{{(sidebar_active && show_sidebar) ? cssplayer + '-with-sidebar' : csscommon + '-full-width'}}
{{cssplayer + (((activity_delta > hidebarafter) && hideoninactivity) ? '-controlbar-hidden' : '-controlbar-visible')}}"
ba-on:mousemove="{{user_activity()}}"
ba-on:mousedown="{{user_activity(true)}}"
ba-on:touchstart="{{user_activity(true)}}"
ba-styles="{{containerSizingStyles}}"
data-testid="{{testid}}-player-container"
>
<meta itemprop="name" content="{{title || 'Video Player'}}" />
<meta itemprop="description" content="{{description || 'Video Player'}}" />
<meta itemprop="uploadDate" content="{{uploaddate}}" />
<meta itemprop="caption" content="{{title}}" />
<meta itemprop="thumbnailUrl" content="{{thumbnailurl}}" />
<meta itemprop="contentUrl" content="{{contenturl}}" />
<div class="{{cssplayer}}-content" data-selector="ba-player-container"
ba-styles="{{playercontainerstyles}}"
>
<ba-{{dynnext}}
ba-if="{{next_active && !playing_ad}}"
ba-is_floating="{{is_floating}}"
ba-style="{{layout}}"
ba-with_sidebar="{{with_sidebar}}"
ba-playlist="{{playlist}}"
ba-current_video_from_playlist="{{current_video_from_playlist}}"
ba-position="{{position}}"
ba-shownext="{{shownext}}"
ba-noengagenext="{{noengagenext}}"
ba-gallerysidebar="{{gallerysidebar}}"
></ba-{{dynnext}}>
<div class="{{css}}-tooltips-list-container"
ba-repeat="{{tooltip :: tooltips}}"
>
<ba-{{dyntooltip}}
ba-if="{{tooltip.tooltiptext}}"
ba-id="{{tooltip.id}}"
ba-tooltip="{{tooltip}}"
ba-playing="{{playing}}"
ba-adsplaying="{{adsplaying}}"
></ba-{{dyntooltip}}>
</div>
<div ba-show="{{(videoelement_active || !imageelement_active) && !silent_attach}}" class="{{css}}-video-container">
<video tabindex="-1" class="{{css}}-video {{csscommon}}-{{videofitstrategy}}-fit" data-video="video"
preload="{{preload ? 'auto' : 'metadata'}}"
elementtiming="ba-player-video"
ba-toggle:playsinline="{{!playfullscreenonmobile}}"
></video>
</div>
<div ba-show="{{(imageelement_active && !videoelement_active) || silent_attach}}" class="{{css}}-poster-container">
<img tabindex="-1" data-image="image" alt="{{posteralt}}"
class="{{csscommon}}-{{posterfitstrategy}}-fit"
elementtiming="ba-player-poster"
/>
</div>
<ba-{{dynadsplayer}}
ba-if="{{adsplayer_active}}"
ba-ad="{{=ad}}"
ba-addata="{{=addata}}"
ba-adsmanagerloaded="{{=adsmanagerloaded}}"
ba-css="{{css}}"
ba-cssplayer="{{cssplayer}}"
ba-csscommon="{{csscommon}}"
ba-testid="{{testid}}"
ba-duration="{{=adduration}}"
ba-volume="{{adsunmuted ? volume : 0}}"
ba-muted="{{muted}}"
ba-containerstyle="{{containerSizingStyles}}"
ba-unmuteonclick="{{unmuteonclick}}"
ba-adtagurl="{{adtagurl}}"
ba-adchoiceslink="{{adchoiceslink}}"
ba-adsunmuted="{{=adsunmuted}}"
ba-inlinevastxml="{{inlinevastxml}}"
ba-outstreamoptions="{{outstreamoptions}}"
ba-quartile="{{=adsquartile}}"
ba-userhadplayerinteraction="{{userhadplayerinteraction}}"
ba-controlbarstyles="{{controlbarstyles}}"
ba-sidebar_active="{{sidebar_active}}"
ba-imasettings="{{imasettings}}"
ba-event:fullscreen="toggle_fullscreen"
ba-fullscreened="{{fullscreened}}"
ba-hidecontrolbar="{{!adscontrolbar_active}}"
ba-hideadscontrolbar="{{hideadscontrolbar}}"
ba-tmplcontrolbar="{{tmpladscontrolbar}}"
ba-dyncontrolbar="{{dynadscontrolbar}}"
ba-companionad="{{companionad}}"
ba-tooltips="{{tooltips}}"
ba-companionads="{{=companionads}}"
ba-hideoninactivity="{{(activity_delta > hidebarafter) && hideoninactivity}}"
ba-view_type="{{view_type}}"
ba-adsplaying="{{=adsplaying}}"
ba-playing="{{=adnotpaused}}"
ba-showlearnmorebutton="{{showlearnmorebutton}}"
ba-moredetailslink="{{=moredetailslink}}"
ba-moredetailstext="{{=moredetailstext}}"
ba-mobileview="{{mobileview}}"
ba-floating="{{is_floating}}"
ba-withsidebar="{{with_sidebar}}"
ba-floatingoptions="{{floatingoptions}}"
ba-mobileviewport="{{mobileviewport}}"
ba-adchoicesontop="{{adchoicesontop && !gallerysidebar}}"
ba-presetedtooltips="{{presetedtooltips}}"
ba-showadchoices="{{showadchoices}}"
ba-imaadsrenderingsetting="{{imaadsrenderingsetting}}"
ba-adsrendertimeout="{{adsrendertimeout}}"
></ba-{{dynadsplayer}}>
<div class="{{css}}-overlay {{hasplaceholderstyle ? (css + '-overlay-with-placeholder') : ''}}"
ba-show="{{!showbuiltincontroller && !outstream && !adsplaying}}" style="{{placeholderstyle}}"
data-testid="{{testid}}-content-player-container"
>
<div tabindex="-1" class="{{css}}-player-toggle-overlay" data-selector="player-toggle-overlay"
ba-hotkey:right="{{seek(position + skipseconds)}}" ba-hotkey:left="{{seek(position - skipseconds)}}"
ba-hotkey:alt+right="{{seek(position + skipseconds * 3)}}" ba-hotkey:alt+left="{{seek(position - skipseconds * 3)}}"
ba-hotkey:up="{{set_volume(volume + 0.1)}}" ba-hotkey:down="{{set_volume(volume - 0.1)}}"
ba-hotkey:space^enter="{{toggle_player(true)}}"
ba-click="{{toggle_player(true)}}"
></div>
<ba-{{dyntrimmer}}
ba-if="{{trimmingmode && videoelement_active}}"
ba-playing="{{playing}}"
ba-startposition="{{=starttime}}"
ba-position="{{position}}"
ba-endposition="{{=endtime}}"
ba-minduration="{{timeminlimit}}"
ba-duration="{{duration}}"
ba-source="{{source}}"
ba-event:play="play"
ba-event:pause="pause"
ba-event:seek="seek"
></ba-{{dyntrimmer}}>
<ba-{{dyncontrolbar}}
ba-css="{{csscontrolbar || css}}"
ba-cssplayer="{{cssplayer || css}}"
ba-csstheme="{{csstheme || css}}"
ba-testid="{{testid}}"
ba-logo="{{controlbar_logo}}"
ba-themecolor="{{themecolor}}"
ba-template="{{tmplcontrolbar}}"
ba-show="{{controlbar_active && !hidecontrolbar}}"
ba-playing="{{playing}}"
ba-showcontroll="{{showcontroll}}"
ba-playwhenvisible="{{playwhenvisible}}"
ba-playerspeeds="{{playerspeeds}}"
ba-playercurrentspeed="{{playercurrentspeed}}"
ba-playlist="{{playlist}}"
ba-airplay="{{airplay}}"
ba-airplaybuttonvisible="{{airplaybuttonvisible}}"
ba-chromecast="{{chromecast}}"
ba-castbuttonvisble="{{castbuttonvisble}}"
ba-sidebar_active="{{sidebar_active}}"
ba-tabindex="{{tabindex}}"
ba-showchaptertext="{{showchaptertext}}"
ba-chapterslist="{{chapterslist}}"
ba-tracktextvisible="{{tracktextvisible}}"
ba-tracktags="{{tracktags}}"
ba-showsubtitlebutton="{{hassubtitles && tracktagssupport}}"
ba-allowtexttrackupload="{{allowtexttrackupload}}"
ba-tracksshowselection="{{tracksshowselection}}"
ba-volume="{{volume}}"
ba-muted="{{muted}}"
ba-unmuteonclick="{{unmuteonclick}}"
ba-duration="{{duration}}"
ba-cached="{{buffered}}"
ba-title="{{title}}"
ba-prominent_title="{{prominent_title}}"
ba-closeable_title="{{closeable_title}}"
ba-position="{{position}}"
ba-activitydelta="{{activity_delta}}"
ba-hasnext="{{hasnext}}"
ba-hideoninactivity="{{hideoninactivity}}"
ba-hidebarafter="{{hidebarafter}}"
ba-rerecordable="{{rerecordable}}"
ba-submittable="{{submittable}}"
ba-frameselectionmode="{{frameselectionmode}}"
ba-timeminlimit="{{timeminlimit}}"
ba-streams="{{streams}}"
ba-currentstream="{{=currentstream}}"
ba-fullscreen="{{fullscreensupport && !nofullscreen}}"
ba-fullscreened="{{fullscreened}}"
ba-source="{{source}}"
ba-disablepause="{{disablepause}}"
ba-disableseeking="{{disableseeking}}"
ba-skipseconds="{{skipseconds}}"
ba-skipinitial="{{skipinitial}}"
ba-settingsmenubutton="{{showsettingsmenu}}"
ba-settingsmenuactive="{{settingsmenu_active}}"
ba-hidevolumebar="{{hidevolumebar}}"
ba-manuallypaused="{{manuallypaused}}"
ba-view_type="{{view_type}}"
ba-is_floating="{{is_floating}}"
ba-isseeking="{{=isseeking}}"
ba-with_sidebar="{{with_sidebar}}"
ba-event:rerecord="rerecord"
ba-event:submit="submit"
ba-event:play="play"
ba-event:pause="pause"
ba-event:position="seek"
ba-event:volume="set_volume"
ba-event:set_speed="set_speed"
ba-event:settings_menu="toggle_settings_menu"
ba-event:fullscreen="toggle_fullscreen"
ba-event:toggle_player="toggle_player"
ba-event:tab_index_move="tab_index_move"
ba-event:seek="seek"
ba-event:toggle_tracks="toggle_tracks"
ba-event:toggle_volume="toggle_volume"
></ba-{{dyncontrolbar}}>
<ba-{{dyntracks}}
ba-css="{{csstracks || css}}"
ba-csstheme="{{csstheme || css}}"
ba-cssplayer="{{cssplayer || css}}"
ba-show="{{tracktagssupport || allowtexttrackupload}}"
ba-tracksshowselection="{{tracksshowselection}}"
ba-trackselectorhovered="{{trackselectorhovered}}"
ba-tracktags="{{tracktags}}"
ba-hidebarafter="{{hidebarafter}}"
ba-tracktagsstyled="{{tracktagsstyled}}"
ba-trackcuetext="{{trackcuetext}}"
ba-allowtexttrackupload="{{allowtexttrackupload}}"
ba-uploadtexttracksvisible="{{uploadtexttracksvisible}}"
ba-acceptedtracktexts="{{acceptedtracktexts}}"
ba-uploadlocales="{{uploadlocales}}"
ba-activitydelta="{{activity_delta}}"
ba-hideoninactivity="{{hideoninactivity}}"
ba-event:selected_label_value="selected_label_value"
ba-event:upload-text-tracks="upload_text_tracks"
ba-event:move_to_option="move_to_option"
></ba-{{dyntracks}}>
<ba-{{dynsettingsmenu}}
ba-css="{{css}}"
ba-csstheme="{{csstheme || css}}"
ba-show="{{settingsmenu_active}}"
ba-template="{{tmplsettingsmenu}}"
ba-toggle_settings_menu="{{toggle_settings_menu}}"
ba-toggle_share="{{toggle_share}}"
></ba-{{dynsettingsmenu}}>
<ba-{{dynplaybutton}}
ba-css="{{cssplaybutton || css}}"
ba-csstheme="{{csstheme || css}}"
ba-cssplayer="{{cssplayer || css}}"
ba-theme-color="{{themecolor}}"
ba-template="{{tmplplaybutton}}"
ba-show="{{playbutton_active}}"
ba-rerecordable="{{rerecordable}}"
ba-submittable="{{submittable}}"
ba-trimmingmode="{{trimmingmode}}"
ba-showduration="{{showduration}}"
ba-duration="{{duration}}"
ba-event:play="playbutton_click"
ba-event:rerecord="rerecord"
ba-event:submit="submit"
ba-event:tab_index_move="tab_index_move"
></ba-{{dynplaybutton}}>
<ba-{{dynloader}}
ba-css="{{cssloader || css}}"
ba-csstheme="{{csstheme || css}}"
ba-cssplayer="{{cssplayer || css}}"
ba-theme-color="{{themecolor}}"
ba-template="{{tmplloader}}"
ba-playwhenvisible="{{playwhenvisible}}"
ba-show="{{loader_active}}"
></ba-{{dynloader}}>
<ba-{{dynshare}}
ba-css="{{cssshare || css}}"
ba-csstheme="{{csstheme || css}}"
ba-cssplayer="{{cssplayer || css}}"
ba-theme-color="{{themecolor}}"
ba-template="{{tmplshare}}"
ba-show="{{sharevideourl && sharevideo.length > 0 && share_active}}"
ba-visible="{{=share_active}}"
ba-url="{{sharevideourl}}"
ba-shares="{{sharevideo}}"
></ba-{{dynshare}}>
<ba-{{dynmessage}}
ba-css="{{cssmessage || css}}"
ba-csstheme="{{csstheme || css}}"
ba-cssplayer="{{cssplayer || css}}"
ba-theme-color="{{themecolor}}"
ba-template="{{tmplmessage}}"
ba-show="{{message_active}}"
ba-message="{{message}}"
ba-event:click="message_click"
></ba-{{dynmessage}}>
<ba-{{dyntopmessage}}
ba-css="{{csstopmessage || css}}"
ba-csstheme="{{csstheme || css}}"
ba-cssplayer="{{cssplayer || css}}"
ba-theme-color="{{themecolor}}"
ba-template="{{tmpltopmessage}}"
ba-show="{{topmessage}}"
ba-topmessage="{{topmessage}}"
></ba-{{dyntopmessage}}>
</div>
<div ba-show="{{useAspectRatioFallback}}" ba-styles="{{aspectRatioFallback}}"></div>
</div>
<div ba-show="{{show_sidebar}}" class="{{cssplayer}}-sidebar" ba-styles="{{sidebarstyles}}">
<ba-{{dynsidebar}}
ba-if="{{sidebar_active}}"
ba-css="{{css}}"
ba-cssplayer="{{cssplayer}}"
ba-csscommon="{{csscommon}}"
ba-csstheme="{{csstheme || css}}"
ba-ad="{{ad}}"
ba-title="{{next_active ? '' : title || 'Video Player'}}"
ba-addata="{{addata}}"
ba-companionads="{{companionads}}"
ba-fullscreened="{{fullscreened}}"
ba-is_floating="{{is_floating}}"
ba-showlearnmorebutton="{{showlearnmorebutton}}"
ba-sidebaroptions="{{sidebaroptions}}"
ba-floatingoptions="{{floatingoptions}}"
ba-floatingsidebar="{{floatingsidebar}}"
ba-showsidebargallery="{{showsidebargallery}}"
ba-gallerysidebar="{{gallerysidebar}}"
ba-adchoiceslink="{{adchoiceslink}}"
ba-moredetailslink="{{moredetailslink}}"
ba-moredetailstext="{{moredetailstext}}"
ba-adsplaying="{{adsplaying}}"
ba-linear="{{=linear}}"
ba-playlist="{{playlist}}"
ba-playing="{{playing}}"
ba-position="{{position}}"
ba-shownext="{{shownext}}"
ba-nextactive="{{next_active}}"
ba-noengagenext="{{noengagenext}}"
ba-mobileviewport="{{mobileviewport}}"
ba-showadchoices="{{showadchoices}}"
ba-unknownadsrc="{{unknownadsrc}}"
ba-event:pause_ads="pause_ads"
></ba-{{dynsidebar}}>
</div>
<div ba-if="{{!fullscreened && is_floating && floatingoptions.closeable}}"
class="{{cssplayer}}-close-container"
ba-click="close_floating()"
ba-on:touchend="{{close_floating()}}"
>
<svg viewBox="0 0 32 32" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path
d="m17.459 16.014 8.239-8.194a.992.992 0 0 0 0-1.414 1.016 1.016 0 0 0-1.428 0l-8.232 8.187L7.73 6.284a1.009 1.009 0 0 0-1.428 0 1.015 1.015 0 0 0 0 1.432l8.302 8.303-8.332 8.286a.994.994 0 0 0 0 1.414 1.016 1.016 0 0 0 1.428 0l8.325-8.279 8.275 8.276a1.009 1.009 0 0 0 1.428 0 1.015 1.015 0 0 0 0-1.432l-8.269-8.27z"
class="{{cssplayer}}-close-svg-button"
></path>
</svg>
</div>
</div>