@@ -27,6 +27,8 @@ var componentName = "wb-mltmd",
2727 templateLoadedEvent = "templateloaded" + selector ,
2828 cuepointEvent = "cuepoint" + selector ,
2929 captionClass = "cc_on" ,
30+ firstPlayClass = "played" ,
31+ defaultCaptions = false ,
3032 multimediaEvents = [
3133 "durationchange" ,
3234 "playing" ,
@@ -581,7 +583,8 @@ var componentName = "wb-mltmd",
581583 } ,
582584 $mltmPlayerElm ,
583585 mltmPlayerElm ,
584- isMuted ;
586+ isMuted ,
587+ settings ;
585588
586589 switch ( event . data ) {
587590 case null : // init
@@ -612,6 +615,13 @@ var componentName = "wb-mltmd",
612615 $mltmPlayerElm = $media . parentsUntil ( selector ) . parent ( ) ;
613616 mltmPlayerElm = $mltmPlayerElm . get ( 0 ) ;
614617
618+ //Check if closed captions should be enabled on play
619+ settings = wb . getData ( mltmPlayerElm , componentName ) ;
620+
621+ if ( settings . closedCaptions !== null && settings . closedCaptions === true ) {
622+ youTubeApi . call ( mltmPlayerElm , "setCaptionsVisible" , true ) ;
623+ }
624+
615625 // Need to be muted here
616626 isMuted = mltmPlayerElm . player ( "getMuted" ) ;
617627
@@ -706,6 +716,10 @@ $document.on( initializedEvent, selector, function( event ) {
706716 if ( settings !== undef ) {
707717 data . shareUrl = settings . shareUrl ;
708718 data . fullscreen = settings . fullscreenBtn || false ;
719+ data . closedCaptions = settings . closedCaptions || false ;
720+ if ( data . closedCaptions !== undef ) {
721+ defaultCaptions = data . closedCaptions ;
722+ }
709723 }
710724
711725 $this . addClass ( type ) ;
@@ -868,7 +882,8 @@ $document.on( renderUIEvent, selector, function( event, type, data ) {
868882 captionsUrl = wb . getUrlParts ( data . captions ) ,
869883 currentUrl = wb . getUrlParts ( window . location . href ) ,
870884 $media = data . media ,
871- $eventReceiver ;
885+ $eventReceiver ,
886+ $button ;
872887
873888 $media
874889 . after ( tmpl ( template , data ) )
@@ -926,6 +941,29 @@ $document.on( renderUIEvent, selector, function( event, type, data ) {
926941 if ( data . fullscreen ) {
927942 $this . attr ( "data-fullscreen-btn" , true ) ;
928943 }
944+
945+ // Show captions by default if configured to do so
946+ let captionStatus ;
947+
948+ if ( $this . data ( "wbMltmd" ) !== undef ) {
949+ captionStatus = $this . data ( "wbMltmd" ) . closedCaptions ;
950+ }
951+
952+ if ( captionStatus !== undef && defaultCaptions !== undef && defaultCaptions === true ) {
953+
954+ $this . addClass ( captionClass ) ;
955+
956+ // Trigger caption visibility change event only on the first time the video plays
957+ defaultCaptions = true ;
958+
959+ $button = $this . find ( ".cc" ) ;
960+
961+ $button
962+ . attr ( {
963+ "aria-pressed" : true
964+ } ) ;
965+
966+ }
929967 }
930968} ) ;
931969
@@ -1053,7 +1091,8 @@ $document.on( multimediaEvents, selector, function( event, simulated ) {
10531091 $this = $ ( eventTarget ) ,
10541092 invStart = "<span class='wb-inv'>" ,
10551093 invEnd = "</span>" ,
1056- currentTime , $button , $slider , buttonData , isPlay , isMuted , isCCVisible , skipTo , volume ;
1094+ currentTime , $button , $slider , buttonData , isPlay , isMuted , isCCVisible , skipTo , volume ,
1095+ firstPlay = false ;
10571096 switch ( eventType ) {
10581097 case "playing" :
10591098 case "pause" :
@@ -1064,6 +1103,12 @@ $document.on( multimediaEvents, selector, function( event, simulated ) {
10641103 if ( isPlay ) {
10651104 $this . addClass ( "playing" ) ;
10661105 $this . find ( ".progress" ) . addClass ( "active" ) ;
1106+
1107+ if ( firstPlay === false ) {
1108+ $this . addClass ( firstPlayClass ) ;
1109+ firstPlay = true ;
1110+ }
1111+
10671112 } else {
10681113 if ( eventType === "ended" ) {
10691114 this . loading = clearTimeout ( this . loading ) ;
0 commit comments