0

I am trying to implement a clickable HTML/CSS/Javascript based layer component on top of an ongoing broadcast, such as a clickable advertisement banner at the top of the broadcast.

But being a novice to the TAL framework, I am currently trying to figure it out on the example project provided by BBC here:

https://github.com/bbc/talexample

Any assistance towards the usage of broadcast object in the TAL framework, or a general advice would be a huge help for me as I am struggling to understand the framework.

TAL's documentation for Broadcast TV Widget can be found here: https://bbc.github.io/tal/other/broadcast.html

My work overall is based on HbbTV's, if it makes any difference.

rahmanunver
  • 3
  • 4
  • In bbc tal they are using division tag for creating most of the controls.So probably u will be having an area for your broadcasting, so you can simply put an html over that to display the advertisement. Or create a button inside the broadcast area and show the contents there. – Arunprasanth K V Oct 09 '18 at 11:28
  • Thank you! But where am I supposed to implement my html's? – rahmanunver Oct 10 '18 at 13:31
  • you cannot inject direct html , what you can do is like use tal buttons they can do the job for you. tal buttons are nothing but a div so you can add it and give the style what ever u want. – Arunprasanth K V Oct 10 '18 at 13:41
  • Alright! Is there any further help I can get from you for the case of testing the buttons(or even a label!) you mentioned, not on a virtualbox(vewd) or an extension(again vewd), but on an ongoing broadcast? As the other answer on this question page suggests, manipulating the layers(css) of current talexample app should be enough, and I can reach the app through node, but how can I test them on a TV? Please forgive my questioning, but I am very lost, and have nobody as a mentor for TAL and TV Apps. – rahmanunver Oct 10 '18 at 15:34
  • if you want to test it in Tv then you have to add the page strategies for that particular Tv. please have a look on the page strategies in bbc tal – Arunprasanth K V Oct 11 '18 at 05:04
  • In order to test your app the simplest way is to use Firefox <56 and the HbbTV plugin Firehbbtv. – stuckatzero Oct 12 '18 at 20:38
  • If you need/want to test it in a real env you need to add your app url to the AIT of a TV channel, but this is only available for broadcasters. There are some open source solutions (like opencaster) to create Transport Streams + custom AITs and test locally but you need also a DVB modulator (e.g. dectek) but is not a cheap hardware. There is a DIY solution based on raspberry also www.hides.com.tw/product_opencaster_eng.html – stuckatzero Oct 12 '18 at 20:54
  • FireHbbTv saved me big deal! Thanks a lot! – rahmanunver Oct 16 '18 at 09:45
  • Could I get assistance about minimizing the broadcast area(to bottom left) after the click event for the mentioned banner area is triggered, I guess then I need to use the Broadcast widget? – rahmanunver Oct 17 '18 at 09:13

1 Answers1

0

I'm not very familiar with TAL but the broadcast widget you have linked seems to be used to control de broadcast object (showCurrentChannel(), getCurrentChannelName(), setPosition(top, left, width, height), etc) so, if you only need to build a clickable banner over the broadcast you don't need to deal with the broadcast object.

Starting from the talexample you can:

  1. Adapt the static/style/layouts/720p.css to fill only your desired area off the screen instead the current fullScreen style

  2. Alse you should remove some fullscreen assets like background-image: url(../../img/bbc_background_720.png) from the css

  3. In order to test a minimum set of features, remove some of the sample components and leave just a button or similar to test your modifications.

  4. After that works, you can start to implement the image widget or the widget you want

stuckatzero
  • 699
  • 3
  • 8
  • Thank you! Playing with the layout css files never came to my mind, so basically I am supposed to change the current layer with necessary html/widgets, and what I undrstood from your answer is that the talexample app is initally overlaying the broadcast, so adapting the layout css will free the screen for the broadcast. But where am I supposed to implement my html's? – rahmanunver Oct 10 '18 at 13:30
  • Could I get assistance about minimizing the broadcast area(bottom left) after the click event for the mentioned banner area is triggered, I guess then I need to use the Broadcast widget? – rahmanunver Oct 17 '18 at 09:13
  • Sorry but I don't have experience implementing apps using TAL. You should check carefully all documentation available due is not a tiny framework and has a complex architecture. Viewing the doc, I guess you should implement the TV widget in your app in order to be able to access to it, then you would be capable to use setPosition(top, left, width, height) to manipulate the TV object – stuckatzero Oct 19 '18 at 16:26