Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
srikanth
Level 8

multiple vtt tracks are not working in custom player (videoDisableUI = true)

I tried to add VTT file support for the custom video player but it is not working, please find the code below  and can someone help to fix the issue

 

<?xml version = "1.0" encoding = "utf-8" ?> 

<!--********** Copyright 2016 Roku Corp.  All Rights Reserved. **********-->

<component name = "VideoExample" extends = "Scene" >

  <script type = "text/brightscript" >

    <![CDATA[

    sub init()
      m.videocontent = createObject("RoSGNode", "ContentNode")
      
      m.captionList = { "Spanish" : "https://d1yqcqne5i84j0.cloudfront.net/content/subtitles/subtitles/eng-35d-sadsdasads34r14-spanish.vtt", 
      "English" : "https://d1yqcqne5i84j0.cloudfront.net/content/subtitles/subtitles/eng-35d-sadsdasads34r14-russian.vtt" }


      
      m.closedCaptionList1 = m.top.findNode("closedCaptionList1")
      m.closedCaptionList1.translation=[156,500]
      m.closedCaptionList1.width=156
      m.closedCaptionList1.height=24
      m.closedCaptionList1.color = "#41414e"
      
      m.closedCaptionList2 = m.top.findNode("closedCaptionList2")
      m.closedCaptionList2.translation=[400,500]
      m.closedCaptionList2.width=156
      m.closedCaptionList2.height=24
      m.closedCaptionList2.color = "#41414e"
      
      
      
      m.cClistLabel1 = m.top.findNode("cClistLabel1")
      m.cClistLabel1.translation=[0,0]
      m.cClistLabel1.width=156
      m.cClistLabel1.height=24
      m.cClistLabel1.text = "Spanish"
      m.cClistLabel1.color = "#ffffff"
      
      m.cClistLabel2 = m.top.findNode("cClistLabel2")
      m.cClistLabel2.translation=[0,0]
      m.cClistLabel2.width=156
      m.cClistLabel2.height=24
      m.cClistLabel2.text = "English"
      m.cClistLabel2.color = "#ffffff"
      
      m.cClistbutton1 = m.top.findNode("cClistbutton1")
      m.cClistbutton1.observeField("buttonselected","cClistbutton1ButtonClicked")
      m.cClistbutton2 = m.top.findNode("cClistbutton2")
      m.cClistbutton2.observeField("buttonselected","cClistbutton2ButtonClicked")

      m.videocontent.title = "Example Video"
      m.videocontent.streamFormat = "HLS"
      m.videocontent.url = "https://multiplatform-f.akamaihd.net/i/multi/will/bunny/big_buck_bunny_,640x360_400,640x360_700,640x360_1000,950x540_1500,.f4v.csmil/master.m3u8"
      m.videocontent.videoDisableUI = true
      
      m.videocontent.SubtitleTracks = [{ "TrackName": m.captionList["Spanish"], "language": "spa", "Description": ""},
         { "TrackName": m.captionList["English"],  "language": "eng","Description":""}]   
      
      m.videocontent.SubtitleConfig = {TrackName:"webvtt/track"}      
      m.video = m.top.findNode("exampleVideo")
      m.video.content = m.videocontent
      m.video.globalCaptionMode = "On"
      m.video.seek = 30
      'm.video.enableUI = false
      m.video.setFocus(true)
      m.video.control = "play"
      
    end sub
 
 sub cClistbutton1ButtonClicked ()
       m.video.control = "pause"
       
   	  m.video.globalCaptionMode = "Off"
   	  m.video.subtitleTrack =  "https://d1yqcqne5i84j0.cloudfront.net/content/subtitles/subtitles/eng-35d-sadsdasads34r14-spanish.vtt"
       m.video.control = "resume"
   	  m.video.globalCaptionMode = "On"
 end sub
 sub cClistbutton2ButtonClicked ()
       m.video.control = "pause"
       
   	  m.video.globalCaptionMode = "Off"
   	  m.video.subtitleTrack =  "https://d1yqcqne5i84j0.cloudfront.net/content/subtitles/subtitles/eng-35d-sadsdasads34r14-russian.vtt"
       m.video.control = "resume"
   	  m.video.globalCaptionMode = "On"
 end sub
 
    
 function onKeyEvent(key as String, press as Boolean) as Boolean
	       print "key:,m.focus:"key m.focus
	       print "video position:"m.video.position
	       if press
		       if key = "up"
		          m.cClistbutton1.setFocus(true)
		          m.closedCaptionList1.color = "#eb3495"
		          m.closedCaptionList2.color = "#41414e"
		         handled = true 
		       else if key = "right"
		       	 if m.cClistbutton1.hasFocus()
		       	 	m.cClistbutton2.setFocus(true)
		            m.closedCaptionList2.color = "#eb3495"
		            m.closedCaptionList1.color = "#41414e"
		       	 end if
		       else if key = "left"
		         if m.cClistbutton2.hasFocus()
		       	 	m.cClistbutton1.setFocus(true)
		            m.closedCaptionList1.color = "#eb3495"
		            m.closedCaptionList2.color = "#41414e"
		       	 end if
		       else if  key = "play"
		       	  if m.video.state = "playing"
		       	  	 m.video.control = "pause"
		       	  else
		       	  	 m.video.control = "resume"
		       	  end if 
		       	  return true
		       end if
	       end if
     end function    
    
 Sub timedMetaDataChanged() 
   
 end Sub
    ]]>

  </script>

  <children >

    <Video id = "exampleVideo"/>
    <rectangle id = "closedCaptionList1">
    	<Label id = "cClistLabel1"/>
    	<Button id = "cClistbutton1" focusBitmapUri="pkg:/images/hover.9.png" iconUri="PKG://S"
					focusedIconUri="PKG://J"/>
    </rectangle>
    <rectangle id = "closedCaptionList2">
    	<Label id = "cClistLabel2"/>
    	<Button id = "cClistbutton2" focusBitmapUri="pkg:/images/hover.9.png" iconUri="PKG://S"
					focusedIconUri="PKG://J"/>
    </rectangle>
  </children>

</component>
0 Kudos