This is the 19th day of my participation in the Genwen Challenge

Brief introduction of the recent TV side project, mainly adapted to IPTV, NTV, ITV set-top box, web side page game project deployment to set-top box above some pit points briefly listed

preface

The set-top box

Set-top box to write page the biggest problem, probably is the adaptation of the remote control, and the return key. Unlike the keyboard and mouse, it’s very important to be aware of whether your page URL changes and whether the jump from page to page is a URL change or an in-page jump depending on your set-top box, because there’s only one back key and you’ll need to use it in a lot of situations.

In addition, the fact that the EPG focus (A label) style could not be reset was a headache, at least because I didn’t get an official interface to deal with it. Given the demands of the product, we had to create our own focus style, and the solution was to ditch the A tag. Once deprecated, you have to write your own movement rules. Many companies write a file that sets the movement of the focus and the associated data. If the interaction is complex, there are too many focal points and variables, it is a complex project. The EPG plugin, written in javascript, is designed to address the issue of shifting focus, plus some special effects for the gallery. It is worth noting that it is best not to use the plug-in if there is not much interaction with the EPG itself.

IPTV

IPTV is one of China Unicom’s set-top boxes. It is based on Chrome browser and supports Canvas, which is important. Similar to network TV but not exactly the same main attention is the configuration of the remote control back key, and because of Chrome (I do that one is such), so in the Web debugging and in the set-top box debugging difference is not very big, and localStorage these things can be accessed and used normally.

// For example, the remote control confirm button
isPressEnter = (keyEvent, level) = > {
  if (keyEvent && keyEvent.which === 13) {
    if (level === 1) {
      this.props.history.push('/study');
    } else if (level === 2) {
      this.props.history.push('/purchase');
    } else if (level === 3) {
      let disnoss = window.localStorage.getItem('ispayed');
      if (disnoss === 'true') {}else {
        this.initKGpay(); }}}else {
    return; }};// Select up and down
isPressBtnSelectLevel = (keyEvent, currentSelectedIndex) = > {
  if (keyEvent && (keyEvent.which === 37 || keyEvent.which === 38)) {
    currentSelectedIndex = currentSelectedIndex - 1;
  }
  if (keyEvent && (keyEvent.which === 40 || keyEvent.which === 39)) {
    currentSelectedIndex += 1;
  }
  return currentSelectedIndex;
};

/ / access
componentDidMount() {
  let disno = window.localStorage.getItem('ispayed');
  this.preloadImgs(this.imgs)
    .then(() = > {
      this.setState({ imgsBgSrc: this.imgs });
    })
    .catch(err= > {
      console.log('Please check the network', err);
    });
}
Copy the code

NTV

Ntv.js is a web application rapid development framework running on the browser of the set top box. Support all NGB HD set-top boxes in Shanghai Oriental Cable (OCN) network. Source: git.oschina.net/ntv/ntv.js source is not much, there is not necessarily can find what you want.

Note to ntv.js

The UI design.

The output device of the set-top box is the TV, and the image reproduction rate of the TV is lower than that of the computer monitor, so the text and image near the edge may not be seen on the TV. Therefore, in the application interface design, text and image should be designed in the middle of the screen as far as possible. To ensure that the content on the page can be fully displayed on the TV, you need to set up a safe display area. There is no fixed size for the safe display area,

The recommended security display area resolution is 1120 x 620, that is, reserve 80 for the left and right sides and 50 for the upper and lower sides.

The set-top box browser has a display resolution of 1280×720 pixels.

The upper and lower parts of the design drawing should be kept at 25px, and the left and right parts should be kept at 40px. Elements will no longer be placed within the range of safe display distance.

CSS styles:

Set-top boxes support basic CSS style properties and derived selectors, such as margin, padding, float, position, line-height, etc. There is little variation in the rendering of basic style properties by vendor. A list of unsupported CSS styles (only the CSS properties commonly used on PC browsers are listed here) :

Pseudo-classes, such as: “:active”, “:focus”, “:visited”, etc. You use a remote control on a set-top box, so things like mouse-hovering don’t work.

Min-width /height, max-width/height sets the maximum/minimum width/height of the element. Invalid.

Display: inline, list-item, table, etc., are not recommended. Middleware rendering varies greatly from vendor to vendor.

Z-index, invalid (this is important and deadly).

CSS3 and animation effects:

Different manufacturers differ greatly in support. Due to the weak terminal type of SET-top box (weak hardware resources), built-in animation functions are limited, and they are not currently required by carriers. Also in terms of the current application design requirements of the network, there are very few applications using CSS3 and animation, and most of them stay in the laboratory demonstration stage.

HTML tags:

Avoid nesting too deeply. The deeper the nesting level, the greater the bias in CSS rendering and the more difficult it is to control the position of elements.

Layout using absolute positioning (div + position: absolute;) Because set-top boxes have a fixed resolution. The reason absolute positioning is not recommended on PC browsers is because of multiple resolutions, but this problem does not exist on set-top boxes, and it is easier to control when using absolute positioning to lay out complex structures.

Horizontal and vertical lists use UL + Li +float rather than tables because they are not easy to control.

Do not use the A tag on pages without input tags because on set-top boxes the browser defines the A tag as an element that can be selected by remote control.

// Put out a piece of crude code that can run on NTV // HTML<! DOCTYPEhtml>
<html>
 <head>
  <title>Goods home page</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="page-view-size" content="1280 * 720">
  <link rel="stylesheet" href=".. /ntv/css/ntv.css">
  <link rel="stylesheet" href=".. /css/app.css">
 </head>
 <body>
 <div class="container product-index">

    <section class="layout-top-bar">
      <div class="pos-abs logo"><img src=".. /images/common/logo.png" alt=""></div>
      <div class="pos-abs banner"><img src=".. /images/common/banner.png" alt=""></div>
      <div class="pos-abs nav-bar">
        <ul>
          <li><img src=".. /images/common/nav_item1.png" alt="11" name="sale.html"></li>
          <li><img src=".. /images/common/nav_item6.png" alt="12" name="product-index.html"></li>
          <li><img src=".. /images/common/nav_item2.png" alt="13" name="cart.html"></li>
          <li><img src=".. /images/common/nav_item3.png" alt="14" name=""></li>
          <li><img src=".. /images/common/nav_item4.png" alt="15" name=""></li>
          <li><img src=".. /images/common/nav_item5.png" alt="16" name="help.html"></li>
        </ul>
        <div class="float-clear"></div>
      </div>
    </section>

    <section class="layout-content">
      <div class="pos-abs content">
        <div class="category">
          <div class="pre-btn"><img src=".. /images/product/pre_btn.png" alt=""></div>
          <ul>
            <li><img src=".. /images/test/category1.png"></li>
            <li><img src=".. /images/test/category2.png"></li>
            <li><img src=".. /images/test/category3.png"></li>
            <li><img src=".. /images/test/category4.png"></li>
            <li><img src=".. /images/test/category5.png"></li>
          </ul>
          <div class="pos-rel next-btn"><img src=".. /images/product/next_btn.png" alt=""></div>
          <div class="float-clear"></div>
        </div>

        <div class="line"></div>

        <div class="ad">
          <ul>
            <li><img src=".. /images/test/product_index_ad1.png"></li>
            <li><img src=".. /images/test/product_index_ad2.png"></li>
            <li><img src=".. /images/test/product_index_ad3.png"></li>
          </ul>
          <div class="float-clear"></div>
        </div>
      </div>
    </section>


    <! Page focus element start -->
    <section class="layout-focus">
      <div class="pos-abs category-f">
        <ul>
          <li><img src=".. /images/product/category_item.png" alt="21" name="product-list.html"></li>
          <li><img src=".. /images/product/category_item.png" alt="22" name="product-list.html"></li>
          <li><img src=".. /images/product/category_item.png" alt="23" name="product-list.html"></li>
          <li><img src=".. /images/product/category_item.png" alt="24" name="product-list.html"></li>
          <li><img src=".. /images/product/category_item.png" alt="25, 26" name="product-list.html"></li>
        </ul>
        <div class="float-clear"></div>
      </div>

      <div class="pos-abs ad-f">
        <ul>
          <li><img src=".. /images/product/ad_item.png" alt="31, 32"></li>
          <li><img src=".. /images/product/ad_item.png" alt="33,34"></li>
          <li><img src=".. /images/product/ad_item.png" alt=35 "4"></li>
        </ul>
        <div class="float-clear"></div>
      </div>
    </section>
    <! -- Page focus element end -->


</div>
<! --Script ====================================================== -->
 <script type="text/javascript" src=".. /ntv/js/1common.js"></script>
 <script type="text/javascript" src=".. /ntv/js/2core.js"></script>
 <script type="text/javascript" src=".. /ntv/js/3key.js"></script>
 <script type="text/javascript" src=".. /ntv/js/4navigation.js"></script>
 <script type="text/javascript" src=".. /ntv/js/5page.js"></script>
 <script type="text/javascript" src=".. /ntv/js/6ipanel.js"></script>
 <script type="text/javascript" src=".. /ntv/js/6ngb_h.js"></script>
 <script type="text/javascript" src=".. /ntv/js/6pc.js"></script>
 <script type="text/javascript" src=".. /ntv/js/6shdv.js"></script>
 <script type="text/javascript" src=".. /ntv/js/7msg.js"></script>
 <script type="text/javascript" src=".. /ntv/js/8stb.js"></script>
 <script type="text/javascript" src=".. /ntv/js/effect/effect-slidemenu.js"></script>
 <script type="text/javascript">
    (function(){
       ntv.log.console("/page/product-index.html onload"); }) ();</script>
 </body>
</html>
Copy the code

Runnable CSS code

// CSS
/ *! * * Copyright 2014-2015 ... * * /

/*-- common
====================================================== */
.logo{left:45px; top:30px; }.banner{left:0px; top:100px; }.nav-bar{left:800px; top:40px; }.nav-bar li{float: left; height: 45px; height: 45px; margin: 0px 30px 0px 0px; }/*-- page/product-index.html
====================================================== */
.product-index{background-image: url(".. /images/common/bg.png"); background-repeat: no-repeat; }.product-index .content{left:0px; top: 170px; height: 550px; width: 1280px; background-image: url(".. /images/product/list_bg.png"); background-repeat: no-repeat; }.product-index .content .category {margin: 10px 0px; }.product-index .content .category .pre-btn{float: left; width:25px; height: 270px; margin: 0px 10px 0px 50px; }.product-index .content .category .pre-btn img{margin-top:90px; }.product-index .content .category li{float: left; height: 260px; width: 181px; margin: 0px 18px 0px 18px; }.product-index .content .category .next-btn{float: left; width:25px; height: 270px; top: -3px; }.product-index .content .category .next-btn img{margin-top:90px; }.product-index .line{height:2px; width:1280px; background-image: url(".. /images/product/line.png"); background-repeat: no-repeat; }.product-index .content .ad {margin: 20px 0px 0px 20px; }.product-index .content .ad li{float: left; height: 223px; width: 358px; margin: 0px 20px 0px 20px; }/* Page focus element */
.product-index .category-f {left:85px; top:180px; }.product-index .category-f li{float: left; height: 260px; width: 181px; margin: 0px 18px 0px 18px; }.product-index .ad-f {left:41px; top:471px; }.product-index .ad-f li{float: left; height: 223px; width: 358px; margin: 0px 19px 0px 20px; }Copy the code

When we write Javscript, we should first distinguish between two concepts: one is to use W3C standards to handle HTML DOM elements (such as modifying tags HTML, text, state, shape, etc.), and the other is to use middleware specification interfaces to handle audio and video business functions (such as playing audio and video, etc.). Generally in PC browser we use such as jQuery framework to simplify the W3C standard interface, but the built-in browser of set-top box does not support all the attribute methods of jQuery framework, nTV.js framework only provides some main method implementation, temporarily cannot provide all the attribute method implementation of jQuery framework.

// W3C standard:
document.getElementById("div_id").innerHTML = "<p>title<p>";
document.getElementById("img_id").src = "http://ip/images/bg.png";

// jQuery framework:
$("#div_id").html("<p>title<p>");
$("#img_id").attr("src"."http://ip/images/bg.png");

// ntv.js
$("#div_id").innerHTML = "<p>title<p>";
$("#img_id").src = "http://ip/images/bg.png";
Copy the code

Before W3C released HTML5 standard, the browser to implement audio and video functions, the general approach is to use Adobe Flash. This is not the case with the set-top box browser, which has its own proprietary standard implementation, the middleware specification mentioned earlier.

// ntv.js
// Play HTTP audio
ntv.stb.mediaplayer.play("AUDIO"."http://ip/audio.mp3"); ntv.stb.mediaplayer.pause(); ntv.stb.mediaplayer.resume(); ntv.stb.mediaplayer.stop(); JavaScript debugging methods:// You can enable debug mode and output debug information on the page by using the following code after referencing the frame script.
ntv.log.debug = true;
ntv.log.console("Debug Information")
Copy the code

Note that debugging information can be displayed on only one screen, and automatic scrolling is not supported. Therefore, try to simplify the number of output items during debugging.

Audio and video protocol

1. Audio (HTTP)

Play: NTV. STB. Ipanel. Mediaplayer. Play (” AUDIO “, “http://192.168.1.163/demo.mp3”); On TV: NTV. STB. Ipanel. Mediaplayer. Pause (); Play: NTV. STB. Ipanel. Mediaplayer. Resume (); Stop playing: NTV. STB. Ipanel. Mediaplayer. Stop ();

2. Video (HTTP)

Play: NTV. STB. Ipanel. Mediaplayer. Play (” HTTP “, “http://192.168.1.163/demo.mp4”); On TV: NTV. STB. Ipanel. Mediaplayer. Pause (); Play: NTV. STB. Ipanel. Mediaplayer. Resume (); Stop playing: NTV. STB. Ipanel. Mediaplayer. Stop ();

3. Now network broadcast

// Use the 
       tag with two main arguments run_time and content_name.
<vod index="2743912" id="2743912" ServiceName="FOD-TV" ServiceType="SVOD" Preview="0" backstep="1"> 
    <vodpara name="passthru_ip" value="10.27.65.50" /> 
    <vodpara name="mod_app_ip" value="10.27.65.50" /> 
    <vodpara name="srm_ip" value="10.27.65.50" /> 
    <vodpara name="poster_server_ip" value="10.27.65.50" /> 
    <vodpara name="lsc_comm_proxy_ip" value="10.27.65.50" /> 
    <vodpara name="session_gateway_ip" value="10.27.65.50" /> 

    <vodpara name="freq1" value="" />
    <vodpara name="sym_rate1" value="" />
    <vodpara name="qam_mode1" value="" />
    <vodpara name="freq2" value="" />
    <vodpara name="sym_rate2" value="" />
    <vodpara name="qam_mode2" value="" />

    <vodpara name="ApplicationType" value="vod" />
    <vodpara name="run_time" value="00:19:16" />
    <vodpara name="content_name" value="SH-changydh.mpg" />

    <vodpara name="protocol_type" value="rtsp" />
    <vodpara name="rtsp" value="10.27.65.80:18082" />
    <vodpara name="rtsp_vendor" value="OCN.RTSP" />

    <vodpara name="streamTransMode" value="ip_stream" />

    <vodpara name="category" value="Free/free" />
    <vodpara name="provider" value="OCN" />
    <vodpara name="ServiceCode" value="00003" />
</vod>
Copy the code

ITV

As a set-top box of China Telecom, ITV is a combination of broadband + set-top box + TV. It has basic functions such as channel and vod. By default, it cannot browse web pages.

ITV’s set-top box can be interlinked with Android, but the actual configuration of the set-top box is backward (1.5G ROM, 512M RAM), so don’t install apps at will. As for cache, don’t worry about it. Because the set-top box is still operated by remote control, this adaptation needs to refer to the documentation, page development must be limited, no solution, but the overall better than NTV too much.

New features

1, support TV box, Android mobile phone terminal, support Android 4.2 or above; Supports IOS 9.0 or higher mobile phones and ipads. Compatible with remote control, touch screen and other operating experience; 2. Fully supports live video and voD solutions: not only a player, but also a complete background system (collection, release, streaming media server) and voD management system for self-built live channels; 3, complete video encryption security support: based on point quantity video encryption kernel, support video encryption anti-theft chain; It can prevent other players from stealing self-built live broadcast and on-demand video; 4. Independently develop the player kernel, support the adaptive playing of soft and hard decompression, and preferentially select the most appropriate decoding method; 5, support MP4 / FLV/M3U8 / MKV/RMVB/AVI/MPG and most common video formats, and custom encrypt video; 6, support HLS (M3U8), RTMP, HTTP, RTSP and most common video protocols; 7. The key data adopts SO security encryption: the transmission and verification of the core adopts SO mode and prevents SO reverse. Compared with the Java layer code, it is easy to be reversed, which can greatly improve the security of the system; 8, multi-language support: can support multi-language; 9, support more from adaptation acceleration: can support a video source with multiple server resources to accelerate at the same time, to solve the problem of lag; 10. Video parsing and aggregation of dozens of video websites at home and abroad can be realized based on point-to-point video parsing technology; 11. Compatible with hundreds of mainstream TV and TV box hardware, years of maturity and improvement, excellent stability and compatibility; 12, UI can fully control the background CMS front-end layout, style; Provide WYSIWYG UI editing mode; 13. Support video aggregation, such as YouTube source aggregation for overseas Chinese customers; 14. Perfect advertising solutions: APP first screen advertisement, live channel changing advertisement, on-demand opening advertisement, pause advertisement, banner advertisement, revolving lamp advertisement, main interface webpage advertisement area, etc.; 15, the home layout module supports static pictures, GIF and other display methods, layout, click behavior and advertising can be set backstage; 16, a variety of statistical functions.

The last

The most critical TV terminal payment details are not convenient to disclose, at the same time adjust the payment page is Unicom or Telecom android page, here need to pay special attention to and back-end design interface callback, request timeout processing and other details, today’s TV terminal set-top box simple share here, welcome to leave a message, thank you ~