@@ -99,6 +99,13 @@ function HTMLVideo(options) {
9999 } ;
100100 containerElement . appendChild ( videoElement ) ;
101101
102+ function onFullscreenChanged ( ) {
103+ onPropChanged ( 'fullscreen' ) ;
104+ }
105+ videoElement . addEventListener ( 'webkitbeginfullscreen' , onFullscreenChanged ) ;
106+ videoElement . addEventListener ( 'webkitendfullscreen' , onFullscreenChanged ) ;
107+ videoElement . addEventListener ( 'fullscreenchange' , onFullscreenChanged ) ;
108+
102109 var hls = null ;
103110 var events = new EventEmitter ( ) ;
104111 var destroyed = false ;
@@ -125,7 +132,8 @@ function HTMLVideo(options) {
125132 volume : false ,
126133 muted : false ,
127134 playbackSpeed : false ,
128- videoScale : false
135+ videoScale : false ,
136+ fullscreen : false
129137 } ;
130138
131139 function getProp ( propName ) {
@@ -255,39 +263,49 @@ function HTMLVideo(options) {
255263 return Math . round ( subtitlesOpacity * 100 ) ;
256264 }
257265 case 'audioTracks' : {
258- if ( hls === null || ! Array . isArray ( hls . audioTracks ) ) {
266+ if ( hls === null || ! Array . isArray ( hls . allAudioTracks ) ) {
259267 return [ ] ;
260268 }
261269
262- return hls . audioTracks
263- . map ( function ( track ) {
270+ return hls . allAudioTracks
271+ . map ( function ( track , index ) {
264272 return Object . freeze ( {
265- id : 'EMBEDDED_' + String ( track . id ) ,
273+ id : 'EMBEDDED_' + String ( index ) ,
266274 lang : typeof track . lang === 'string' && track . lang . length > 0 ?
267275 track . lang
268276 :
269277 typeof track . name === 'string' && track . name . length > 0 ?
270278 track . name
271279 :
272- String ( track . id ) ,
280+ String ( index ) ,
273281 label : typeof track . name === 'string' && track . name . length > 0 ?
274282 track . name
275283 :
276284 typeof track . lang === 'string' && track . lang . length > 0 ?
277285 track . lang
278286 :
279- String ( track . id ) ,
287+ String ( index ) ,
280288 origin : 'EMBEDDED' ,
281289 embedded : true
282290 } ) ;
283291 } ) ;
284292 }
285293 case 'selectedAudioTrackId' : {
286- if ( hls === null || hls . audioTrack === null || ! isFinite ( hls . audioTrack ) || hls . audioTrack === - 1 ) {
294+ if ( hls === null || hls . audioTrack === - 1 ) {
287295 return null ;
288296 }
289297
290- return 'EMBEDDED_' + String ( hls . audioTrack ) ;
298+ var currentGroupTrack = hls . audioTracks [ hls . audioTrack ] ;
299+ if ( ! currentGroupTrack ) {
300+ return null ;
301+ }
302+
303+ var allTracksIndex = hls . allAudioTracks . indexOf ( currentGroupTrack ) ;
304+ if ( allTracksIndex === - 1 ) {
305+ return null ;
306+ }
307+
308+ return 'EMBEDDED_' + String ( allTracksIndex ) ;
291309 }
292310 case 'volume' : {
293311 if ( destroyed || videoElement . volume === null || ! isFinite ( videoElement . volume ) ) {
@@ -313,6 +331,12 @@ function HTMLVideo(options) {
313331 case 'videoScale' : {
314332 return videoElement . style . objectFit || 'contain' ;
315333 }
334+ case 'fullscreen' : {
335+ if ( stream === null ) {
336+ return null ;
337+ }
338+ return videoElement . webkitDisplayingFullscreen === true || document . fullscreenElement === videoElement ;
339+ }
316340 default : {
317341 return null ;
318342 }
@@ -491,14 +515,18 @@ function HTMLVideo(options) {
491515 }
492516 case 'selectedAudioTrackId' : {
493517 if ( hls !== null ) {
494- var selecterdAudioTrack = getProp ( 'audioTracks' )
518+ var selectedAudioTrack = getProp ( 'audioTracks' )
495519 . find ( function ( track ) {
496520 return track . id === propValue ;
497521 } ) ;
498- hls . audioTrack = selecterdAudioTrack ? parseInt ( selecterdAudioTrack . id . split ( '_' ) . pop ( ) , 10 ) : - 1 ;
499- if ( selecterdAudioTrack ) {
522+ if ( selectedAudioTrack ) {
523+ var trackIndex = parseInt ( selectedAudioTrack . id . split ( '_' ) . pop ( ) , 10 ) ;
524+ var allTracks = hls . allAudioTracks ;
525+ if ( trackIndex >= 0 && trackIndex < allTracks . length ) {
526+ hls . setAudioOption ( allTracks [ trackIndex ] ) ;
527+ }
500528 onPropChanged ( 'selectedAudioTrackId' ) ;
501- events . emit ( 'audioTrackLoaded' , selecterdAudioTrack ) ;
529+ events . emit ( 'audioTrackLoaded' , selectedAudioTrack ) ;
502530 }
503531 }
504532
@@ -536,6 +564,23 @@ function HTMLVideo(options) {
536564
537565 break ;
538566 }
567+ case 'fullscreen' : {
568+ if ( stream === null ) break ;
569+ if ( propValue ) {
570+ if ( typeof videoElement . webkitEnterFullscreen === 'function' ) {
571+ videoElement . webkitEnterFullscreen ( ) ;
572+ } else if ( typeof videoElement . requestFullscreen === 'function' ) {
573+ videoElement . requestFullscreen ( ) ;
574+ }
575+ } else {
576+ if ( typeof videoElement . webkitExitFullscreen === 'function' && videoElement . webkitDisplayingFullscreen ) {
577+ videoElement . webkitExitFullscreen ( ) ;
578+ } else if ( document . fullscreenElement === videoElement ) {
579+ document . exitFullscreen ( ) ;
580+ }
581+ }
582+ break ;
583+ }
539584 }
540585 }
541586 function command ( commandName , commandArgs ) {
@@ -557,6 +602,7 @@ function HTMLVideo(options) {
557602 onPropChanged ( 'selectedSubtitlesTrackId' ) ;
558603 onPropChanged ( 'audioTracks' ) ;
559604 onPropChanged ( 'selectedAudioTrackId' ) ;
605+ onPropChanged ( 'fullscreen' ) ;
560606 getContentType ( stream )
561607 . then ( function ( contentType ) {
562608 if ( stream !== commandArgs . stream ) {
@@ -573,6 +619,9 @@ function HTMLVideo(options) {
573619 onPropChanged ( 'audioTracks' ) ;
574620 onPropChanged ( 'selectedAudioTrackId' ) ;
575621 } ) ;
622+ hls . on ( Hls . Events . MANIFEST_LOADING , function ( ) {
623+ hls . subtitleTrack = - 1 ;
624+ } ) ;
576625 hls . loadSource ( stream . url ) ;
577626 hls . attachMedia ( videoElement ) ;
578627 } else {
@@ -619,6 +668,7 @@ function HTMLVideo(options) {
619668 onPropChanged ( 'selectedSubtitlesTrackId' ) ;
620669 onPropChanged ( 'audioTracks' ) ;
621670 onPropChanged ( 'selectedAudioTrackId' ) ;
671+ onPropChanged ( 'fullscreen' ) ;
622672 break ;
623673 }
624674 case 'destroy' : {
@@ -651,6 +701,9 @@ function HTMLVideo(options) {
651701 videoElement . onvolumechange = null ;
652702 videoElement . onratechange = null ;
653703 videoElement . textTracks . onchange = null ;
704+ videoElement . removeEventListener ( 'webkitbeginfullscreen' , onFullscreenChanged ) ;
705+ videoElement . removeEventListener ( 'webkitendfullscreen' , onFullscreenChanged ) ;
706+ videoElement . removeEventListener ( 'fullscreenchange' , onFullscreenChanged ) ;
654707 containerElement . removeChild ( videoElement ) ;
655708 containerElement . removeChild ( styleElement ) ;
656709 break ;
@@ -710,7 +763,7 @@ HTMLVideo.canPlayStream = function(stream) {
710763HTMLVideo . manifest = {
711764 name : 'HTMLVideo' ,
712765 external : false ,
713- props : [ 'stream' , 'loaded' , 'paused' , 'time' , 'duration' , 'buffering' , 'buffered' , 'audioTracks' , 'selectedAudioTrackId' , 'subtitlesTracks' , 'selectedSubtitlesTrackId' , 'subtitlesOffset' , 'subtitlesSize' , 'subtitlesTextColor' , 'subtitlesBackgroundColor' , 'subtitlesOutlineColor' , 'subtitlesOpacity' , 'volume' , 'muted' , 'playbackSpeed' , 'videoScale' ] ,
766+ props : [ 'stream' , 'loaded' , 'paused' , 'time' , 'duration' , 'buffering' , 'buffered' , 'audioTracks' , 'selectedAudioTrackId' , 'subtitlesTracks' , 'selectedSubtitlesTrackId' , 'subtitlesOffset' , 'subtitlesSize' , 'subtitlesTextColor' , 'subtitlesBackgroundColor' , 'subtitlesOutlineColor' , 'subtitlesOpacity' , 'volume' , 'muted' , 'playbackSpeed' , 'videoScale' , 'fullscreen' ] ,
714767 commands : [ 'load' , 'unload' , 'destroy' ] ,
715768 events : [ 'propValue' , 'propChanged' , 'ended' , 'error' , 'subtitlesTrackLoaded' , 'audioTrackLoaded' ]
716769} ;
0 commit comments