IPTV小視窗播放視頻 頁面焦點無法移動的解決方案

標籤：

　　在IPTV高清頁面中，小視窗播放視頻時，在某些機頂盒上（如高清中興、高清大亞4904）會出現焦點無法移動現象，即按鍵無響應。被這個bug困擾了很久，雖然我知道解決方案，但只知其然，不知其所以然。今天做了實驗，結果分析如下：

　　當頁面調用視頻播放方法時，我們知道代碼所做的實際工作是將含有視頻ID、視頻視窗位置、視頻視窗大小等參數拼接在url裡，賦值給用於播放視頻的iframe的src，此時會在當前頁面運行播放控制項（我猜想可能是這樣。當然這個播放控制項只在IPTV機頂盒上得到支援是確定的，在PC端會報錯，因為PC端瀏覽器並不識別代碼用於播放視頻所建立的對象），這時該iframe處於獲得焦點狀態，即頁面當前焦點在此iframe上。當我們操作遙控器來移動焦點，這時，在中興、大亞4904高清機頂盒上表現為焦點不移動。

 　　原因是該iframe獲得的焦點並沒有被去掉，或者說其焦點無法轉移到頁面其他元素上，故而做遙控器方向鍵按鍵動作時，頁面無響應。

 　　現在來證明這個結論。

 　　在html頁面中，很多元素可以獲得和失去焦點，如a、img 、input等有href或src屬性的標籤。在高清頁面中，元素(這裡指我們實際使用的div標籤)獲得的焦點並非html頁面中的焦點，而是通過javascript改變其css樣式用以標註當前位置，我們自稱其為焦點，這是一個表象，用於告訴使用者（實際操作者）將要操作的對象在頁面所處位置，並非是處於.focus狀態，與上述標籤（紅色標註）所獲得的焦點性質不同。可獲得焦點的元素在BOM中可以通過.focus方法來獲得焦點，部分瀏覽器會在獲得焦點的元素周圍顯示一個虛線框，此時可以通過鍵盤上的Tab鍵來切換焦點。

 　　也就是說，用於播放視頻的iframe所獲得焦點與我們在IPTV頁面中所描述的焦點不是同一回事。前者是html頁面中的真實焦點，後者是一個標記，我們用於在頁面（最終是在電視上）定位的視覺標記，其切換實際是通過javascript改變css樣式，產生顏色的較大變化，達到一個視覺效果，用以告訴使用者當前將要操作的對象所處位置。

 　　既然此焦點非彼焦點，那麼頁面元素在被切換焦點時，也就是在發生失去焦點或者獲得焦時間點事件時的處理方式就不同。頁面中那個真實的焦點只能被切換到可以接受它的元素上，也就是那些具有href或者src屬性的標籤上，當頁面上不存在這些元素時，或者這些元素距離較遠時，焦點就不會得到正常切換，會一直保持在原來位置不變，此時頁面處於焦點鎖死狀態（自己猜測）。

 　　知道了原因，我們就找到瞭解決最開始那個問題的思路。

 　　我們可以有兩種方法來解決：

　　方法一、向頁面添加可以接受那個真實焦點的元素，比如a、img、input等標籤，為了避免添加的標籤影響頁面美觀，可以將其寬高設定為0，相當於在頁面影藏掉，你也可以對它設定display:none樣式，注意，它雖然被影藏，但卻實實在在的存在於頁面中。當然這裡最好將用於接受真實焦點的標籤添加到那個抱著真實焦點捨不得放的元素的附近，遠了不行，為了把焦點送給你，人家還要買張火車票，你說人家願不願意呢。當然，在有些瀏覽器中（這裡實際是高清機頂盒），那個擁有真實焦點的元素（也就是那個用於播放視頻的iframe）此時會表現得比較慷慨，可以自掏腰包買機票只為千裡送焦點。

　　方法二、將那個擁有真實焦點的元素附近的元素改為可以接受頁面真實焦點的元素。這裡說的有點拗口，比如，此時你希望將iframe的焦點移動到它附近的那個div上，那麼你可以將此div設定為可以接受頁面真實焦點的元素。如何設定？你可以對該div追加一個tabIndex屬性，這個屬性值可以是1到32767間的任一值，這時就把這個div加入到TAB鍵的序列中。

 　　這裡簡單介紹下焦點在被設定tabIndex屬性的元素間的移動規則，當瀏覽者使用Tab鍵在頁面中移動焦點時，焦點將首先移動到具有最小tabIndex屬性值的元素上，最後在具有最大tabIndex屬性值的元素上結束移動。如果有兩個元素的tabIndex屬性相同，則以元素在html代碼中出現的順序為準。 預設的tabIndex屬性為 0 ，將排列在所有指定tabIndex的元素之後。所以對於上面的方法二，最好將div的tabIndex屬性值設定為1而不是0。而若把tabIndex屬性設為一個負值（如tabIndex="-1"），那麼這個元素將被排除在TAB鍵的序列之外。

 　　現在回到我們最開始要解決的問題。

　　對於上面的方法一，我們使用a標籤在高清中興、高清大亞4904機頂盒上是可行的，我們也是一直這麼做的，這樣處理後，在其他原來就可以正常移動焦點的高清機頂盒上也沒有造成不支援的影響。我們沒有測試img和input標籤，但我相信是湊效的。

　　而對於方法二，我測試了高清中興、高清大亞4904機頂盒，發現是可行的，驗證了我的想法，但是我沒有測原來就可以正常移動焦點的高清機頂盒，是否會因為這個方法出現了不正常的問題。這裡有一個現象是，在對div設定了tabIndex屬性後，在機頂盒上，div周圍會出現焦點框，雖然這是個正常的現象，但畢竟不夠美觀，當然也有辦法去掉這個焦點框，這是後話，不做討論。

     說到這個焦點框，順便一提，獲得焦點後，元素有一個虛線框，總有人挖空心思把它去掉。其實這無疑是對頁面易用性的踐踏，我們還要考慮一下某些特殊人群的需要，如不用滑鼠的高手，滑鼠壞了的可憐人或是視力有缺陷的人群。有文章介紹，去掉虛線框在美國是違法的，這是對視力障礙者的一種歧視！從這裡我們可以看出美國對人權的尊重，這是一個佐證，也是出於使用者體驗和人性化的考慮，畢竟你的產品就是為人所用，為人服務的。不過話說會來，我們是討論在機頂盒上的表現，就最好去掉這焦點框，但美國人的態度是值得學習的。

　　最後，當頁面焦點採用a標籤來接受時，因為a標籤支援遙控器方向鍵移動焦點，與Tab鍵作用類似（比如全部用a標籤來接受焦點的標清頁面），小視窗播放視頻不會出現無法移動焦點的問題。這也證明了上面的結論。

 　　這裡遺留了一個問題，就是當將用於播放視頻的iframe設定tabIndex=”-1”時，頁面焦點是不是就無法移動了呢？時間關係，未做測試。

 　　匆匆成文，且未有客觀分析和驗證，有些觀點難免偏頗，歡迎批評指正。

IPTV小視窗播放視頻 頁面焦點無法移動的解決方案