Roku Developer Program

Join our online forum to talk to Roku developers and fellow channel creators. Ask questions, share tips with the community, and find helpful resources.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
srikanth
Channel Surfer

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
1 REPLY 1
JToast
Roku Employee
Roku Employee

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

Please report your issue via the Beta Developer program. The program provides developers with access to beta OS versions months prior to rollout into production.

 

If you are not yet enrolled please follow the link below to start the process. Once enrolled, you can register test devices to which we'll push the latest beta builds for your testing purposes. Make sure to not register all your devices as you will need test devices that are running the production OS as well.

 

We recommend that all developers take advantage of this opportunity to test channels for regressions and/or other OS related issues. Reporting OS issues via the program increases the likelihood that they will be addressed on our end and reduces the risk of unexpected user impacting issues upon release.

 

The program opens up prior to all OS releases, which occur on a summer and fall release schedule. During these times we push beta OS builds to registered devices for testing.

 

https://www.roku.com/betatesting

0 Kudos
Need Assistance?
Welcome to the Roku Community! Feel free to search our Community for answers or post your question to get help.

Become a Roku Streaming Expert!

Share your expertise, help fellow streamers, and unlock exclusive rewards as part of the Roku Community. Learn more.