Keyboard-Only Accessibility for JW Showcase

[genelamarellis]

Expected Behavior

The ability to navigate through JW Showcase by using the keyboard

Actual Behavior

The keyboard has no function, meaning JW Showcase cannot be used for Smart TV HTML5 apps

Steps to reproduce (feature request)

We have an HTML5 video app running on Smart TVs and we would like to replace the HTML5 video player with a JW Player so that it can be monetized. JW Showcase is a great way to showcase our content, especially since it is in HTML. We were disappointed to find out that the keyboard cannot be used to navigate through JW Showcase. This is a requirement for all of our Smart TV implementations. Right now we're looking at building a version of JW Showcase by hand so that it complies with our non-keyboard requirement. If there is an easier way than rebuilding from scratch, we would love to hear it. Thank you!

Environment

• Dell Laptop

• Windows 10

This template is provided as a guide to filing bugs and feature requests. Please replace all text in italics with details describing your issue. When submitting a feature request, "Steps to reproduce" can be substituted with a user story or list of acceptance criteria.

[johnluther]

Hi, Gene. The best approach is probably to implement it by hand to suit your specific requirements. We don't officially support Showcase on SmartTVs so we can't be sure how it will behave in those environments.

However, we should look into adding basic keyboard navigation to Showcase in a future version.

[genelamarellis]

Hello John,

Thank you for the email. Yes, that's what we're thinking as well. Thanks again!

Gene

[johnluther]

Created #118 so we can track implementing it in a future release.

[genelamarellis]

Excellent! Thanks!

[johnluther]

@geneLellis , we implemented basic keyboard controls today in the Develop branch if you want to test it on your platform.

Note that you will need to pull from the Develop branch of jw-showcase-lib to get the changes. Run bower install jwplayer/jw-showcase-lib#develop after the npm install command when building from the source code.

[genelamarellis]

Now that's great news! Thanks! Can't wait to check this out!

[johnluther]

Thanks, @geneLellis . I'm able to Tab through that site. My Tab key navigated through the page elements top to bottom. Shift+Tab goes bottom to top (i.e., "reverse").

Can you tell us more about your expectations?

[genelamarellis]

Thanks a lot @johnluther. Really appreciate the response. I didn't notice the tabbing functionality. Very cool! Unfortunately for our Smart TV implementation, we are limited to the arrow keys to move through the page elements. Any idea how we could possibly tweak this to use the arrow keys instead?

Thanks! Really exciting!

[johnluther]

@ChristiaanScheermeijer , any ideas?

@geneLellis do you happen to know the Javascript Char codes that those remotes send for right/left/up/down? You might be able to get them by visiting http://keycode.info/ on the device.

[genelamarellis]

The remotes are using the same codes as coming from a traditional keyboard. We are just restricted to the keys we can use. Commonly they are:

• Up Arrow
• Down Arrow
• Left Arrow
• Right Arrow
• Enter Key
• Backspace

So essentially, we're trying to be able to control all the elements using only those key codes. The tabbing functionality is a huge step forward. If we map that to the arrow keys, then we'll really be in business.

[ChristiaanScheermeijer]

I really hoped for that by adding tabindex's Smart TV's (apps) would automatically recognise these and translate the up/down/left/right buttons to navigate through these elements. Maybe there are libraries available for your Smart TV App?

Left and right would be relatively easy to implement as its the same behaviour as pressing tab and shift+tab e.g. navigating to the next or previous element. Supporting up and down is a different case as we need to map each position of all focusable elements in the viewport and find the closest focusable element in a vertical line.

I think this is really specific to Smart TV Apps because opening JW Showcase in a browser on a Smart TV does work because there is a cursor which you can move with the D-Pad or arrow keys.

[genelamarellis]

Hey Christiaan,

It's possible that Smart TVs will recognize the tab index when running from within a browser. The app that we have developed for Smart TVs is fully HTML, but does not run within a browser. However now that the tabbing elements have been added into JW Showcase, it makes it a lot more feasible to update our app by switching over to JW Showcase. As you said, the left and right arrow for tabbing is straight forward. The up and down would need a bit more work. One of the the constraints we were given by the Smart TV companies is to have the app completely navigable without relying on a cursor since it doesn't run in a standalone browser, even though it is HTML.

I'm thinking that I could accomplish all of this needed functionality by writing some custom jqeury and weaving it into the code. Can you think of any limitations using this method? Any other suggestions?

[ChristiaanScheermeijer]

I think that should work just fine :+1:

I briefly experimented with https://github.com/nekman/keynavigator but I couldn't get it to work in Showcase out of the box. It can still be interesting for your application though.

A good thing to know: JW Showcase is a single page application. Meaning your custom code needs to hook into events and search all focusable elements when the page updates. One of these events would probably be $stateChangeSuccess.

[genelamarellis]

Great! Thanks a lot for the message! I will dive on in and keep you posted! If you have any other updates to the fork, please let me know

On Thu, Jun 15, 2017 at 8:31 PM, Christiaan Scheermeijer < notifications@github.com> wrote:

I think that should work just fine 👍

I briefly experimented with https://github.com/nekman/keynavigator but I couldn't get it to work in Showcase out of the box. It can still be interesting for your application though.

A good thing to know: JW Showcase is a single page application. Meaning your custom code needs to hook into events and search all focusable elements when the page updates. One of these events would probably be $stateChangeSuccess.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jwplayer/jw-showcase/issues/117#issuecomment-308729882, or mute the thread https://github.com/notifications/unsubscribe-auth/AA-aagrkj0heOU7dV5LS1cqtP9ps_pXsks5sETIvgaJpZM4NIUDV .

[genelamarellis]

Quick question guys. We're editing JW Showcase to use our own CDN instead of hosting the content in playlists on JW Player's platform. When we did this with version 2.0.0, we edited the following file: app/scripts/services/api.service.js and well as the app/config.json file.

Now that we are experimenting with the latest dev version, can you point me in the right direction for which files I need to edit to do the same? It looks like the file structure has changed. Thank you!

On Mon, Jun 19, 2017 at 11:48 PM, Gene Ellis gene.ellis@neustep.com wrote:

Great! Thanks a lot for the message! I will dive on in and keep you posted! If you have any other updates to the fork, please let me know

On Thu, Jun 15, 2017 at 8:31 PM, Christiaan Scheermeijer < notifications@github.com> wrote:

I think that should work just fine 👍

I briefly experimented with https://github.com/nekman/keynavigator but I couldn't get it to work in Showcase out of the box. It can still be interesting for your application though.

A good thing to know: JW Showcase is a single page application. Meaning your custom code needs to hook into events and search all focusable elements when the page updates. One of these events would probably be $stateChangeSuccess.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jwplayer/jw-showcase/issues/117#issuecomment-308729882, or mute the thread https://github.com/notifications/unsubscribe-auth/AA-aagrkj0heOU7dV5LS1cqtP9ps_pXsks5sETIvgaJpZM4NIUDV .

[ChristiaanScheermeijer]

Sure thing! If you just want to use your cdn you can add the contentService property to your config.json. For example, "contentService": "https://my.cdn.com"

[ChristiaanScheermeijer]

You can also use the 3.4.0 version as this has been released yesterday!

[genelamarellis]

Thanks for the email Christiaan,

Can you please explain a bit more regarding the contentService property?

We have 6 feeds. Each has it's own unique URL. I'm not quite too clear on what needs to be placed in the config.json file. Here is one of our feeds. For simplicity sake, I have it only returning one item. This would be in a "Concerts" section in JW Showcase http://svc.baeblemusic.com/BaebleService.svc/json/getAppleTvVideoData/con/1/1 http://svc.baeblemusic.com/BaebleService.svc/json/getAppleTvVideoData/con/1/1

The corrending detail page for the one video in this list corresponds to: http://svc.baeblemusic.com/BaebleService.svc/json/getConcertsJSONByID/802/mobile

You can see this referenced by the "802" media ID

Few of questions:

• How would I edit the config.json file to show this information?
• Can a description be added or just a title?
• Does JW Showcase support ads? If so, how can I pass it my ads url?
• Do I need to do anything additional for the video detail page in JW Showcase

Thanks so much for your help. It's been many many months since the last time we edited JW Showcase to use our own feeds and I know a lot has changed since then. Just re-gaining our footing.

Thanks!

On Fri, Jun 23, 2017 at 12:16 AM, Christiaan Scheermeijer < notifications@github.com> wrote:

You can also use the 3.4.0 version as this has been released yesterday!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jwplayer/jw-showcase/issues/117#issuecomment-310444845, or mute the thread https://github.com/notifications/unsubscribe-auth/AA-aatc8JDEcdyU_QmGKP_EtWvLyrV13ks5sGqFQgaJpZM4NIUDV .

[genelamarellis]

Hey Christiaan,

I realize I caught you on a weekend and my last email was quite detailed. So fully understand that you may not have had a moment to check it out. But any guidance on this would be a big help when you get a moment. We'll really eager to get this out and just a few things are holding us back. Thanks!

On Fri, Jun 23, 2017 at 12:53 AM, Gene Ellis gene.ellis@neustep.com wrote:

Thanks for the email Christiaan,

Can you please explain a bit more regarding the contentService property?

We have 6 feeds. Each has it's own unique URL. I'm not quite too clear on what needs to be placed in the config.json file. Here is one of our feeds. For simplicity sake, I have it only returning one item. This would be in a "Concerts" section in JW Showcase http://svc.baeblemusic.com/BaebleService.svc/json/getAppleTvVideoData/con/1/1 http://svc.baeblemusic.com/BaebleService.svc/json/getAppleTvVideoData/con/1/1

The corrending detail page for the one video in this list corresponds to: http://svc.baeblemusic.com/BaebleService.svc/json/ getConcertsJSONByID/802/mobile

You can see this referenced by the "802" media ID

Few of questions:

• How would I edit the config.json file to show this information?
• Can a description be added or just a title?
• Does JW Showcase support ads? If so, how can I pass it my ads url?
• Do I need to do anything additional for the video detail page in JW Showcase

Thanks so much for your help. It's been many many months since the last time we edited JW Showcase to use our own feeds and I know a lot has changed since then. Just re-gaining our footing.

Thanks!

On Fri, Jun 23, 2017 at 12:16 AM, Christiaan Scheermeijer < notifications@github.com> wrote:

You can also use the 3.4.0 version as this has been released yesterday!

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/jwplayer/jw-showcase/issues/117#issuecomment-310444845, or mute the thread https://github.com/notifications/unsubscribe-auth/AA-aatc8JDEcdyU_QmGKP_EtWvLyrV13ks5sGqFQgaJpZM4NIUDV .

[ChristiaanScheermeijer]

Hi @geneLellis,

From release v3.0.0 we have separated the library and web codebase to two repositories. To setup a local development environment please read this page.

The api.service.js can be found in bower_components/jw-showcase-lib/js/core/services/api.service.js.

- How would I edit the config.json file to show this information?

After your explanation It became clear that this is not going to work in your case. The contentService option can only be used if you have a CNAME the JW Platform.

- Can a description be added or just a title?

Do you mean a shelve/playlist description? We don't support this yet, but it might be a nice feature request.

- Does JW Showcase support ads? If so, how can I pass it my ads url?

Not yet, but this is on the roadmap for the next release!

- Do I need to do anything additional for the video detail page in JW Showcase

That is up to you! What do you want to change?

[genelamarellis]

Hey Christiaan,

Thanks a lot for email. I may not have explained clearly.

In version 2.0 of JW Showcase, we were given guidance from JW Player on how and where to edit the source code to allow JW Showcase to use our own CDN-hosted content. Our content is in feed format and worked just fine with version 2.0. With version 3.0, it seems that the code base has changed in such a way that we can no longer follow the same procedure. If you can give us a bit of guidance on what changes should be made (and where to make them) to use our own hosted playlists, that we can swap out the JW Playlists for our own hosted playlists and will be in business.

I'm refering to the text on the opening GitHub page that says:

"You can use JW Showcase with other content delivery platforms (or your own CDN), but you will need to modify the source code."

We're simply unsure of how and where to do this in version 3.0.

Thanks for your assistance!

[genelamarellis]

Hey Christiaan,

I've been doing some digging and I think I'm getting closer. Specifically these two files:

• jw-showcase-master\test\features\support\mock.js Line: 31
• jw-showcase-master\app\config.json Line 24

Seems like if I make edits here, I can use my own CDN playlist feeds. Am I on the right track?

[ChristiaanScheermeijer]

The mock.js file is only being used for Feature testing, so this file should not be changed.

The files you need to edit are:

Change URL endpoint https://github.com/jwplayer/jw-showcase-lib/blob/master/js/core/services/api.service.js#L47

Change the response expectation (feeds are Objects which contain a playlist Array) https://github.com/jwplayer/jw-showcase-lib/blob/master/js/core/services/api.service.js#L170

It looks like the example feed is not the same format as JW Platform. So I'm afraid that by only changing the api.service.js Showcase is not going to work as expected.

[genelamarellis]

Hey Christiaan,

Thanks a ton for the message. That helps out a lot!

I think what you are saying is that our feed that we are using will not work with JW Showcase because of the formatting. I will look at one of the JW Showcase feeds and try to replicate that. Thank you.

[ChristiaanScheermeijer]

Hi @geneLellis,

That is correct. Of course, it is possible, but it would require a lot of changes. This prevents you from easily updating in the future.

Here you can find the API Documentation: https://developer.jwplayer.com/jw-platform/docs/delivery-api-reference/#!/playlists/get_v2_playlists_playlist_id

[genelamarellis]

Thanks for the link Christiaan. We'll give into this and create a new feed based on the URL you provided.

[genelamarellis]

Hey Christiaan.

Question. What is the "link" node? I see it inside of the sample feed (https://content.jwplatform.com/v2/playlists/WXu7kuaW), but it is not explained in the documentation. Thanks!

[johnluther]

Hi, Gene. Those are there for legacy purposes. We use them to populate the <link> elements in our MRSS feeds. Some customers require them to be in the JSON feeds as well.

[genelamarellis]

Hey John,

Thanks for the response. Should we just leave the value blank or fill it with a placeholder of some sort?

[johnluther]

Showcase doesn't use it, you can leave it blank.

[genelamarellis]

Got it. Thanks!

[genelamarellis]

Hey everyone,

I hope you had a good weekend. We believe we have the feed re-formatted in the correct way. Can you please take a quick look and let me know how this looks? Is it ok that the file node is the same URL for each resolution?

http://svctest.baeblemusic.com/BaebleService.svc/json/getJWVideoListingJSON/5/feat

Thanks!

[johnluther]

Hi, Gene. Some notes:

• don't enclose duration, pubdate, width, height in quotes
• in some cases in yours, "label" is misspelled "labl"
• "images" should be "image"

Is there a reason why you are pointing all the MP4 file nodes to the same 1080p URLs? This won't cause problems in Showcase but it will create a poor UX for users who think they are selecting a low-bandwidth rendition but then get a high bandwidth stream.

JL

[genelamarellis]

Hi John,

Thanks for the notes. I will make those changes.

Question. If we have the manifest file, what is the function of listing out all of the streams? Wouldn't this be handled by the manifest file? That's how we do it for JW Player on the web.

My understanding is that there is only 1 mp4 that just scales/adjusts per screen size, but I will double check this information.

[genelamarellis]

Hello. I just received confirmation. We only have 1 mp4, and then the HLS scales in size and speed.

So, for our feed, if we only put the HLS source and the MP4 source, will all of the other sizing options still show up? OR does that somehow need to be notated in the feed as well?

Thanks!

[johnluther]

The player will enumerate the available resolutions based on the HLS manifest..

[genelamarellis]

oh got it. So we will delete everything but the HLS manifest since all available resolutions will be enumerated from there. If that's the case, does it matter what width and height are specified in the feed? Seems all of that information will be obtained from from the manifest. I saw JW Player was using 1280 x 720, so that's the value we used. Not sure if that matters. The JW Feed: http://bit.ly/2sEAcvK

Thanks!

[johnluther]

I don't think Showcase uses the width & height from the playlist. @ChristiaanScheermeijer can you verify?

[ChristiaanScheermeijer]

I'm not sure. The width and height parameters for the HLS manifest are added recently in the Platform API. Showcase doesn't use these parameters, but maybe the player does or eventually will.

I wouldn't remove the mp4 just yet, as this is used as a fallback when HLS playback isn't supported by the platform or browser.

When the MP4 file is being played, the qualities are not retrieved from the manifest, but from the list of MP4 sources in your playlist. If you have only one quality MP4, you won't have a quality selection in the player.

[johnluther]

I wouldn't remove the mp4 just yet, as this is used as a fallback when HLS playback isn't supported by the platform or browser.

That is a very good point, I forgot about that, thanks!

[genelamarellis]

Great! Thanks guys!

[genelamarellis]

Hey guys. We finished implementing all of the feedback that you sent over regarding formatting our feeds. Here is one of them. If you can confirm that the formatting for this feed is correct, then we'll ensure the other feeds are completed in the same manner. Thanks!

http://svctest.baeblemusic.com/BaebleService.svc/json/getJWVideoListingJSON/5/feat

[genelamarellis]

Hey guys. Just checking in. If you have a moment to verify the format of this feed, it will be a big help. We'll then base our other feeds on this one.

Thanks!

[johnluther]

Hi, Gene. The MP4 width and height value still have quotes, otherwise it looks good to me.

[genelamarellis]

Thank you for the heads up. I will make that change.

[genelamarellis]

Hey guys,

Thanks for your help. Really appreciate it. We're finally up and running. Question for @ChristiaanScheermeijer. You mentioned that the next release of JW Showcase will include support for advertising. When do you expect that to be released? Thanks!

[johnluther]

Good to hear, @geneLellis .

@hblee is the better person to answer the advertising question (he is on vacation this week, FYI).

[genelamarellis]

Thanks @johnluther! Appreciate it!

@hblee, have a great vacation and I look forward to speaking with you next week!

[genelamarellis]

Hello @hblee, one of my team brought this site to my attention saying they are running JW Showcase and have advertising playing: http://video.salon.com/ I'm glad to see this functionality is out in the field. How do we get advertising in our player? http://www.baeblemusic.com/tv

[hblee]

Hi @geneLellis,

Are you referring to video ads or display ads? I'm not seeing display ads on video.salon.com but they are running video ads.

Video ads has been supported in Showcase very early on, but we actually just released Display Ad support in Showcase version 3.5.

Here's some support docs and let me know if you have any questions.

Cheers Henry