IPTV small window play video page focus cannot move solution, iptv focus

IPTV small window play video page focus cannot move solution, iptv focus

On the iptv hd page, when a video is played in a small window, the Focus cannot be moved on some set-top boxes (such as hd zte and HD Daya 4904), that is, the buttons do not respond. This bug has been plagued for a long time. Although I know the solution, I only know it. An experiment was conducted today. The results are analyzed as follows:

When the page calls the video playback method, we know that the actual work of the code is to splice parameters including the video ID, video window location, and video window size in the url, assign a value to the src of the iframe used to play the video. The playback control will be run on the current page (I guess this may be the case. Of course, this playback control is only supported on the IPTV set-top box. An error is reported on the PC side because the PC side browser does not recognize the object used to play the video ), the iframe is in the obtained focus state, that is, the current page focus is on the iframe. When we operate the remote control to move the focus, the focus does not move on the 4904 HD set-top boxes of ZTE and Daya.

The reason is that the focus obtained by the iframe is not removed, or the focus cannot be transferred to other elements on the page. Therefore, the page does not respond when you press the direction key of the remote control.

Now let's prove this conclusion.

In html pages, many elements can obtain and lose focus, such as labels with href or src attributes, such as a, img, and input. On a high-definition page, the focus of an element (the actually used div tag here) is not the focus of an html page, but the css style of the element is changed through javascript to mark the current position, we call ourselves the focus. This is a representation used to tell the user (actual operator) where the object to be operated is on the page, not on the page. the focus status, which is different from the focus Properties Obtained by the preceding label (marked in red. Elements that can obtain the focus can be passed in the BOM. the focus method is used to obtain the focus. Some browsers will display a dotted box around the element that gets the focus. In this case, you can use the Tab key on the keyboard to switch the focus.

That is to say, the focus obtained by the iframe used to play the video is not the same as the focus we described on the IPTV page. The former is the real focus of the html page, and the latter is a tag, which is used to locate the visual mark on the page (ultimately on the TV). The switch is actually to change the css style through javascript, produce a large color change to achieve a visual effect, to tell the user the current location of the object to be operated.

Since this focus is not another focus, page elements are processed differently when the focus is switched, that is, when the focus is lost or the focus event is obtained. The actual focus on the page can only be switched to the elements that can accept it, that is, those labels with href or src attributes. When these elements do not exist on the page, or when these elements are far away, the focus will not be properly switched and will remain unchanged in the original position. At this time, the page will be locked by the focus (I guess ).

After knowing the cause, we can find a solution to the problem at the beginning.

We can solve this problem in two ways:

Method 1: add elements that can accept the actual focus to the page, such as a, img, and input tags. To avoid the impact of the added tags on the appearance of the page, you can set its width and height to 0, which is equivalent to hiding the page shadow. You can also set the display: none style for it. Note that although it is hidden, but it actually exists in the page. Of course, it is best to add the label used to accept the real focus to the vicinity of the element that is reluctant to hold the real focus. It is far from enough. In order to send the focus to you, people also need to buy a train ticket, do you want to talk about people. Of course, in some browsers (actually HD set-top boxes), the element with the actual focus (that is, the iframe used to play the video) will be generous at this time, you can buy a ticket from your pocket to focus only on a thousand miles.

Method 2: Change the element near the element with the actual focus to an element that can accept the actual focus of the page. This is a bit tricky. For example, if you want to move the iframe focus to the div near it, you can set this div to an element that can accept the actual page focus. How to Set it? You can append a tabIndex attribute to the div. The attribute value can be any value between 1 and 32767. Then, the div is added to the sequence of the TAB key.

Here is a brief introduction to the moving rules between elements with the tabIndex attribute set. When the viewer uses the Tab key to move the focus in the page, the focus will first move to the element with the minimum tabIndex attribute value, finally, the movement ends on the element with the maximum tabIndex attribute value. If the tabIndex attributes of two elements are the same, the order in which the elements appear in the html code prevails. The default tabIndex attribute is 0, which is arranged after all the elements of the specified tabIndex. Therefore, for method 2 above, it is best to set the tabIndex attribute value of div to 1 rather than 0. If you set the tabIndex attribute to a negative value (such as tabIndex = "-1"), this element is excluded from the sequence of the TAB key.

Now let's go back to the problem we were trying to solve.

For method 1 above, it is feasible to use the tag on the high-definition ZTE and high-definition big ya 4904 set-top boxes. We have been doing this all the time. After this processing, other HD set-top boxes that previously could normally move the focus have no impact on the support. We didn't test the img and input tags, but I believe they are useful.

For method 2, I tested the high-definition ZTE and high-definition big ya 4904 set-top boxes. I found it feasible and verified my ideas, however, I did not test whether the HD set-top box with the original mobile focus is abnormal due to this method. Here, a phenomenon is that after the tabIndex attribute is set for div, the focus box appears around the div on the set-top box. Although this is a normal phenomenon, it is not beautiful after all, of course, there is also a way to remove this focus box. This is post and will not be discussed.

Speaking of this focus frame, by the way, after the focus is obtained, the element has a dotted box, and someone will try to remove it. In fact, this is undoubtedly a trample on the ease of use of the page. We also need to consider the needs of some special groups, such as the mouse-free experts, poor people with bad mouse or people with poor eyesight. According to some articles, removing the dotted box is illegal in the United States. This is a type of discrimination against persons with visual impairment! We can see from this that respect for human rights in the United States is a proof, and also out of consideration of user experience and human nature. After all, your products are used by people and serve people. However, we will discuss the performance of the set-top box. We 'd better remove the focus box, but the attitude of Americans is worth learning.

Finally, when the page focus is accepted using the tag, because the tag supports the remote control arrow key to move the focus, similar to the Tab key (for example, all the SD pages that use the tag to accept the focus), the focus cannot be moved when playing videos in small windows. This proves the above conclusion.

There is a problem left over, that is, when the iframe for video playing is set to tabIndex = "-1", will the page focus be unable to be moved? Time relationship, not tested.

Written in a hurry without objective analysis and verification, some opinions may be biased, and you are welcome to correct them.