IPTV small window Playback Video page Focus cannot move the solution

In the IPTV HD page, when the small window plays the video, on some set-top boxes (such as HD ZTE, Gao Qingdaia 4904) The focus will not move, that is, the button is not responding. By this bug for a long time, although I know how to solve, but only know it, I do not know why. Today, the results of the experiment are as follows:

When the page calls the video playback method, we know that the actual work of the code is to include the video ID, video window location, video window size and other parameters stitching in the URL, assigned to the video to play the IFRAME SRC, the current page will run the playback control (I guess this is the case.) Of course, this playback control is only supported on the IPTV set-top box is determined, the PC side will be error, because the PC browser does not recognize the code used to play the object created by the video, the IFRAME is in the focus state, that is, the current page focus on this IFRAME. When we operate the remote control to move the focus, at this time, in the ZTE, Big Asia 4904 HD set-top box show focus does not move.

The reason is that the focus of the IFRAME has not been removed, or the focus cannot be transferred to other elements of the page, so the remote Control arrow key operation, the page is not responding.

Now to prove this conclusion.

In an HTML page, many elements can get and lose focus, such as A, IMG, input, or a label with an href or src attribute. In high-definition pages, the focus of the element (in this case, the div tag we actually use) is not the focus in the HTML page, but instead the CSS style is changed by JavaScript to label the current position, and we call it focus, which is a representation, Used to tell the user (the actual operator) that the object to be manipulated is in the position of the page, not in the. Focus state, which differs from the focus nature of the above label (red callout). Focusable elements in the BOM can be focused by the. Focus method, and some browsers display a dashed box around the element that gets the focus, and the TAB key on the keyboard toggles focus.

That is, the IFRAME used to play the video has a focus that is not the same as what we described in the IPTV page. The former is the real focus of the HTML page, which is a marker that we use to locate the visual tag on the page (which is ultimately on the TV), whose switch actually changes the CSS style through JavaScript, producing a large change in color, to achieve a visual effect, Used to tell the user where the object is currently going to be manipulated.

Since this is not the focus, the page element is handled differently when it is switched to focus, that is, when the focus is lost or when the focus event occurs. The real focus of the page can only be switched to the element that accepts it, that is, those with href or src attributes, when these elements do not exist on the page, or when the elements are farther away, the focus will not be switched normally, and will remain unchanged in the original position. At this point the page is in the focus-locked state (guess).

Knowing the reason, we found the idea of solving the problem at the very beginning.

There are two ways we can solve this:

Method one, to add to the page can accept the real focus of the elements, such as A, IMG, input and other tags, in order to avoid the added label affect the page beautiful, you can set its width to 0, equivalent to hide the page shadow, you can also set the Display:none style, note that it is hidden, But it actually exists in the page. Of course, the best place to accept the real focus of the label added to that holding the real focus on the elements of reluctant to put the near, far away, in order to focus on you, people also want to buy a train ticket, you said people would like to. Of course, in some browsers (this is actually a high-definition set-top box), the element that has the real focus (that is, the IFRAME used to play the video) will be more generous at this point, and you can buy tickets from your own pocket for miles.

Second, change the element near the element that has the real focus to the element that can accept the true focus of the page. This is a bit of a mouthful, for example, when you want to move the focus of the IFrame to the div near it, you can set this div to be an element that accepts the true focus of the page. How do I set it? You can append a TabIndex attribute to the Div, which can be any value from 1 to 32767, then add the div to the tab sequence.

Here is a brief introduction to the move rule between the elements that are set to the TabIndex property, and when the browser uses the TAB key to move the focus in the page, the focus is moved first to the element with the minimum TabIndex property value, and finally to the element with the maximum TabIndex attribute value. If the TabIndex property of two elements is the same, the order in which the elements appear in the HTML code will prevail. The default TabIndex property is 0, which is arranged after all the elements of the specified tabindex. So for method two above, it's best to set the div's TabIndex property value to 1 instead of 0. If you set the TabIndex property to a negative value (such as tabindex= "-1"), then this element will be excluded from the TAB key sequence.

Now go back to the problem we're starting to solve.

For the above method one, we use a tag in the HD ZTE, Gao Qingdaia 4904 set-top box is feasible, we have been doing so, after processing, in other original can move the focus of the HD set-top box also did not cause an unsupported effect. We didn't test the IMG and input tags, but I believe it worked.

And for method Two, I tested the HD ZTE, Gao Qingdaia 4904 set-top box, found to be feasible, verified my idea, but I did not test the original can move the focus of the HD set-top box, whether this method has an abnormal problem. Here is a phenomenon, in the div set the TabIndex attribute, on the set-top box, the div will appear around the focus frame, although this is a normal phenomenon, but after all, is not beautiful, of course, there are ways to remove the focus frame, this is something, not to do the discussion.

Speaking of the focus frame, by the way, after getting the focus, the element has a dashed box, and someone has to get rid of it. In fact, this is undoubtedly the ease of use of the page trample, we also have to consider some special needs of the crowd, such as the use of the mouse, the mouse is bad poor people or visually impaired people. An article introduction, remove the dashed box in the United States is illegal, this is a discrimination against the visually impaired! From here we can see that the United States respect for human rights, this is a proof, but also for the user experience and human considerations, after all, your products are used by people, for human service. However, we are talking about the performance on the set-top box, it is best to remove the focus frame, but the American attitude is worth learning.

Finally, when the page focus is accepted by a tag, because the a tag supports the shift focus of the remote control key, similar to the TAB key (for example, a SD page with all the a tags to accept the focus), the small window plays the video without the problem of unable to move the focus. This also proves the above conclusion.

The problem here is that when the IFRAME that is used to play the video is set to tabindex= "-1", does the page focus not move? Time relationship, not tested.

Hastily written, and no objective analysis and verification, some of the views are inevitably biased, welcome criticism.

IPTV small window Playback Video page Focus cannot move the solution