IPTV small window plays video and the solution to the problem that the page focus cannot be moved_html/css_WEB-ITnose

On the IPTV HD page, when playing video in a small window, on some set-top boxes (such as HD ZTE, HD Daya 4904), the focus will not move, that is, the buttons will not respond. I have been troubled by this bug for a long time. Although I know the solution, I only know it but not the reason. I did an experiment today and the results are analyzed as follows:

When the page calls the video playback method, we know that the actual work done by the code is to splice the parameters including the video ID, video window position, video window size, etc. into the URL. , assigned 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 IPTV set-top boxes, and an error will be reported on the PC side, because The PC browser does not recognize the object created by the code for playing the video). At this time, the iframe is in the focus state, that is, the current focus of the page is on this iframe. When we operate the remote control to move the focus, the focus does not move on ZTE and Daya 4904 HD set-top boxes.

The reason is that the focus obtained by the iframe has not been removed, or its focus cannot be transferred to other elements of the page. Therefore, the page becomes unresponsive when the remote control direction keys are pressed.

Now let’s prove this conclusion.

In an HTML page, many elements can gain and lose focus, such as a, img, input and other tags with href or src attributes. In the high-definition page, the focus of the element (here refers to the div tag we actually use) is not the focus in the html page, but changes its css style through javascript to mark the current position. We call it the focus. This is an appearance. , used to tell the user (the actual operator) the location of the object to be operated on the page. It is not in the .focus state, which is different from the focus obtained by the above label (red mark). The focusable element can obtain focus in the BOM through the .focus method. Some browsers will display a dotted box around the focused element. At this time, the focus can be switched by pressing the Tab key on the keyboard.

In other words, the focus obtained by the iframe used to play the video is not the same thing as the focus we describe in the IPTV page. The former is the real focus in the HTML page, and the latter is a mark, a visual mark we use for positioning on the page (eventually on the TV). The switching is actually to change the CSS style through JavaScript, resulting in a large change in color, to achieve A visual effect used to tell the user the current location of the object to be manipulated.

Since this focus is not that focus, the page element is handled differently when the focus is switched, that is, when a focus loss or focus event occurs. The real focus on the page can only be switched to elements that can accept it, that is, tags 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 It will be switched normally and will remain in the original position. At this time, the page is in a focus-locked state (guess by yourself).

Knowing the reason, we found a way to solve the original problem.

We can solve it in two ways:

Method 1. Add elements to the page that can accept the real focus, such as a, img, input and other tags. In order to avoid the impact of the added tags To make the page beautiful, you can set its width and height to 0, which is equivalent to hiding it from the page. You can also set the display:none style for it. Note that although it is hidden, it actually exists on the page. Of course, it is best to add the label for accepting the real focus here near the element that is reluctant to put the real focus. It is too far away. In order to give you the focus, they have to buy a train ticket. Do you think they are willing? Woolen cloth. Of course, in some browsers (this is actually a high-definition set-top box), the element with real focus (that is, the iframe used to play the video) will be more generous at this time. You can buy a plane ticket out of your own pocket just to give focus to thousands of miles. .

Method 2: Change the elements near the element with real focus to elements that can accept the real focus of the page. What is said here is a bit confusing. For example, if you want to move the focus of the iframe to the div near it, then you can set this div to an element that can accept the real focus of the page. How to set it up? You can add a tabIndex attribute to the div. The value of this attribute can be any value between 1 and 32767. At this time, the div will be added to the sequence of TAB keys.

Here is a brief introduction to the rules for moving focus between elements with the tabIndex attribute set. When the viewer uses the Tab key to move the focus on the page, the focus will first move to the element with the smallest tabIndex attribute value, and finally to the element with the largest tabIndex attribute. The movement ends on the element with the value of the tabIndex attribute. If there are two elements with the same tabIndex attribute, the order in which the elements appear in the html code shall prevail. The default tabIndex attribute is 0 and will be arranged after all elements with specified tabIndex. So for method two above, it is best to set the tabIndex attribute value of the div to 1 instead of 0. And if the tabIndex attribute is set to a negative value (such as tabIndex="-1"), then this element will be excluded from the sequence of TAB keys.

Now back to the original problem we wanted to solve.

For the above method one, it is feasible for us to use the a tag on HD ZTE and HD Daiya 4904 set-top boxes. We have always done this. After processing, the focus can be moved normally on other devices. There is no unsupported impact on HD set-top boxes. We haven't tested the img and input tags, but I believe it will work.

As for method two, I tested the HD ZTE and HD Daya 4904 set-top boxes and found that it was feasible, which verified my idea. However, I did not test the HD set-top box that can move the focus normally. Will it work? Because there is an abnormal problem with this method. One phenomenon here is that after setting the tabIndex attribute on a div, a focus box will appear around the div on the set-top box. Although this is a normal phenomenon, it is not beautiful enough after all. Of course, there are ways to remove this focus box, which is discussed later. , no discussion.

Speaking of this focus box, by the way, after gaining focus, the element has a dotted frame, and there are always people who go to great lengths to remove it. In fact, this is undoubtedly a trampling on the usability of the page. We also need to consider the needs of certain special groups of people, such as experts who do not use a mouse, poor people with broken mouses, or people with visual impairments. According to an article, removing the dotted box is illegal in the United States. This is a form of discrimination against the visually impaired! From here we can see that the United States respects human rights. This is evidence and is also based on user experience and humanization considerations. After all, your products are used and served by people. But having said that, we are discussing the performance on the set-top box, so it is best to remove the focus box, but the American attitude is worth learning.

Finally, when the page focus is accepted by the a tag, because the a tag supports the remote control direction keys to move the focus, it has a similar function to the Tab key (for example, all SD pages that use the a tag to accept focus), small windows There will be no problem of being unable to move the focus while playing the video. This also proves the above conclusion.

There is a problem left here, that is, when the iframe used to play the video is set to tabIndex="-1", will the focus of the page be unable to move? Due to time constraints, no testing has been done.

It was written in a hurry without objective analysis and verification. Some opinions are inevitably biased. Criticisms and corrections are welcome.