Wednesday, April 29, 2020

Playing a Video on Roku

Time to move on to a new project.  We're going to start with a simple goal: can we play a random video I happen to have on a server?  My reading through the manual suggests it should be quite easy to play a video located on an internet server providing it isn't behind any kind of security.

Creating a Project

The first step is to create a new project using the Eclipse new project wizard.  This done, we need to add some poster and splash screen images.  The poster images are three different resolutions of the image that appears in the channel view.  The splash screen images are the ones that appear when the application launches.

Based on the Hello, World sample, we can see that the sizes are as follows:

SD (low resolution)
poster 214x144
splash 720x480

HD (high definition)
poster 290x218
splash 1280x720

FHD (full high definition)
poster 540x405
splash 1920x1080

Presumably at some point a 4K resolution will be added.

I'm not really a graphical person, so I just took an image I already had and stretched it this way and that in order to "make it fit", not worrying too much about the aspect ratios.  I created these and put them in a new "images" folder under the project root.  In the Hello, World sample, the posters are PNG and the splash screens are JPG.  I'm not sure if there's a good reason for that, but I copied it anyway1.

I then opened the manifest in Eclipse and used the "visual" mode to select these images.

The Main Script

Looking at the Hello, World sample again, I don't really see a lot different between the Main code there and what I (think I) want to do.  So I'm just going to copy it over into my project, delete some of the random bits and change the Scene name from "HelloWorld" to "PlayVideo" which is what I'm going to call my component.

The Scene

Under components, I'm going to create a new XML file called playvideo.xml which is going to define the layout for the screen.  This is obviously based on the helloworld.xml example, but it is going to differ considerably more than the Main.brs script.

As I understand it, the component I really want to use is Video.  Reading the documentation, it seems to me that this, in turn, depends on being provided with some "content".  So we need to create two nodes, one to identify the content and one to actually configure a video player.  Biting it all off in one go, we end up with this:
<component name="PlayVideo" extends="Scene">
    <children>
        <ContentNode id="damian"
            url="http://www.gmmapowell.com/downloads/Damian2018.mp4"
            streamFormat="mp4"
        />
        <Video id="playit"
            content="damian"
            control="play"
            width="0"
            height="0"
        />
    </children>
As before, we have a main component that extends a Scene.  Within that, we have two nodes: the first is the content node; the other is the video node.

The content node needs an id so that the video node can reference it.  The other two fields identify the video and the stream format.

The video node has an id, which I'm not using yet, along with a reference to the content node.  The document states that specifying width and height as 0 will cause the video to take up the entire screen.  It's not clear what other properties need to be set, so I specified the control field to be play, since I want the video to play.

The script portion is a lot simpler:
function init()
  m.top.setFocus(true)
end function
This just simply sets the focus.

Good News and Bad News

On the upside, when I tried exporting this, I saw the splash screen and then it moved on to a video play screen and said it was downloading the video.

Unfortunately, it made no further progress.  It would seem that it is struggling to download the video.  But why?

Something is obviously wrong.  Now comes the big question: how do I figure out what is wrong?  Is there a debugger?  Logging?

Summary

Starting from scratch, I was able to build up a video player project that reached 90% of the goals I had for it - except actually working.


1 Further investigation revealed that there is no apparent reason for this. Both PNG and JPG work fine.

No comments:

Post a Comment