IPTV小窗口播放視頻頁(yè)面焦點(diǎn)無(wú)法移動(dòng)的解決方法_html/css_WEB-ITnose

　　當(dāng)頁(yè)面調(diào)用視頻播放方法時(shí)，我們知道代碼所做的實(shí)際工作是將含有視頻ID、視頻窗口位置、視頻窗口大小等參數(shù)拼接在url里，賦值給用于播放視頻的iframe的src，此時(shí)會(huì)在當(dāng)前頁(yè)面運(yùn)行播放控件（我猜想可能是這樣。當(dāng)然這個(gè)播放控件只在IPTV機(jī)頂盒上得到支持是確定的，在PC端會(huì)報(bào)錯(cuò)，因?yàn)镻C端瀏覽器并不識(shí)別代碼用于播放視頻所創(chuàng)建的對(duì)象），這時(shí)該iframe處于獲得焦點(diǎn)狀態(tài)，即頁(yè)面當(dāng)前焦點(diǎn)在此iframe上。當(dāng)我們操作遙控器來(lái)移動(dòng)焦點(diǎn)，這時(shí)，在中興、大亞4904高清機(jī)頂盒上表現(xiàn)為焦點(diǎn)不移動(dòng)。

　　原因是該iframe獲得的焦點(diǎn)并沒(méi)有被去掉，或者說(shuō)其焦點(diǎn)無(wú)法轉(zhuǎn)移到頁(yè)面其他元素上，故而做遙控器方向鍵按鍵操作時(shí)，頁(yè)面無(wú)響應(yīng)。

　　現(xiàn)在來(lái)證明這個(gè)結(jié)論。

　　在html頁(yè)面中，很多元素可以獲得和失去焦點(diǎn)，如a、img 、input等有href或src屬性的標(biāo)簽。在高清頁(yè)面中，元素(這里指我們實(shí)際使用的div標(biāo)簽)獲得的焦點(diǎn)并非html頁(yè)面中的焦點(diǎn)，而是通過(guò)javascript改變其css樣式用以標(biāo)注當(dāng)前位置，我們自稱其為焦點(diǎn)，這是一個(gè)表象，用于告訴用戶（實(shí)際操作者）將要操作的對(duì)象在頁(yè)面所處位置，并非是處于.focus狀態(tài)，與上述標(biāo)簽（紅色標(biāo)注）所獲得的焦點(diǎn)性質(zhì)不同?？色@得焦點(diǎn)的元素在BOM中可以通過(guò).focus方法來(lái)獲得焦點(diǎn)，部分瀏覽器會(huì)在獲得焦點(diǎn)的元素周圍顯示一個(gè)虛線框，此時(shí)可以通過(guò)鍵盤(pán)上的Tab鍵來(lái)切換焦點(diǎn)。

　　也就是說(shuō)，用于播放視頻的iframe所獲得焦點(diǎn)與我們?cè)贗PTV頁(yè)面中所描述的焦點(diǎn)不是同一回事。前者是html頁(yè)面中的真實(shí)焦點(diǎn)，后者是一個(gè)標(biāo)記，我們用于在頁(yè)面（最終是在電視上）定位的視覺(jué)標(biāo)記，其切換實(shí)際是通過(guò)javascript改變css樣式，產(chǎn)生顏色的較大變化，達(dá)到一個(gè)視覺(jué)效果，用以告訴用戶當(dāng)前將要操作的對(duì)象所處位置。

　　既然此焦點(diǎn)非彼焦點(diǎn)，那么頁(yè)面元素在被切換焦點(diǎn)時(shí)，也就是在發(fā)生失去焦點(diǎn)或者獲得焦點(diǎn)事件時(shí)的處理方式就不同。頁(yè)面中那個(gè)真實(shí)的焦點(diǎn)只能被切換到可以接受它的元素上，也就是那些具有href或者src屬性的標(biāo)簽上，當(dāng)頁(yè)面上不存在這些元素時(shí)，或者這些元素距離較遠(yuǎn)時(shí)，焦點(diǎn)就不會(huì)得到正常切換，會(huì)一直保持在原來(lái)位置不變，此時(shí)頁(yè)面處于焦點(diǎn)鎖死狀態(tài)（自己猜測(cè)）。

　　知道了原因，我們就找到了解決最開(kāi)始那個(gè)問(wèn)題的思路。

　　我們可以有兩種方法來(lái)解決：

　　方法一、向頁(yè)面添加可以接受那個(gè)真實(shí)焦點(diǎn)的元素，比如a、img、input等標(biāo)簽，為了避免添加的標(biāo)簽影響頁(yè)面美觀，可以將其寬高設(shè)置為0，相當(dāng)于在頁(yè)面影藏掉，你也可以對(duì)它設(shè)置display:none樣式，注意，它雖然被影藏，但卻實(shí)實(shí)在在的存在于頁(yè)面中。當(dāng)然這里最好將用于接受真實(shí)焦點(diǎn)的標(biāo)簽添加到那個(gè)抱著真實(shí)焦點(diǎn)舍不得放的元素的附近，遠(yuǎn)了不行，為了把焦點(diǎn)送給你，人家還要買張火車票，你說(shuō)人家愿不愿意呢。當(dāng)然，在有些瀏覽器中（這里實(shí)際是高清機(jī)頂盒），那個(gè)擁有真實(shí)焦點(diǎn)的元素（也就是那個(gè)用于播放視頻的iframe）此時(shí)會(huì)表現(xiàn)得比較慷慨，可以自掏腰包買機(jī)票只為千里送焦點(diǎn)。

　　方法二、將那個(gè)擁有真實(shí)焦點(diǎn)的元素附近的元素改為可以接受頁(yè)面真實(shí)焦點(diǎn)的元素。這里說(shuō)的有點(diǎn)拗口，比如，此時(shí)你希望將iframe的焦點(diǎn)移動(dòng)到它附近的那個(gè)div上，那么你可以將此div設(shè)置為可以接受頁(yè)面真實(shí)焦點(diǎn)的元素。如何設(shè)置？你可以對(duì)該div追加一個(gè)tabIndex屬性，這個(gè)屬性值可以是1到32767間的任一值，這時(shí)就把這個(gè)div加入到TAB鍵的序列中。

　　這里簡(jiǎn)單介紹下焦點(diǎn)在被設(shè)置tabIndex屬性的元素間的移動(dòng)規(guī)則，當(dāng)瀏覽者使用Tab鍵在頁(yè)面中移動(dòng)焦點(diǎn)時(shí)，焦點(diǎn)將首先移動(dòng)到具有最小tabIndex屬性值的元素上，最后在具有最大tabIndex屬性值的元素上結(jié)束移動(dòng)。如果有兩個(gè)元素的tabIndex屬性相同，則以元素在html代碼中出現(xiàn)的順序?yàn)闇?zhǔn)。 默認(rèn)的tabIndex屬性為 0 ，將排列在所有指定tabIndex的元素之后。所以對(duì)于上面的方法二，最好將div的tabIndex屬性值設(shè)置為1而不是0。而若把tabIndex屬性設(shè)為一個(gè)負(fù)值（如tabIndex="-1"），那么這個(gè)元素將被排除在TAB鍵的序列之外。

　　現(xiàn)在回到我們最開(kāi)始要解決的問(wèn)題。

　　對(duì)于上面的方法一，我們使用a標(biāo)簽在高清中興、高清大亞4904機(jī)頂盒上是可行的，我們也是一直這么做的，這樣處理后，在其他原來(lái)就可以正常移動(dòng)焦點(diǎn)的高清機(jī)頂盒上也沒(méi)有造成不支持的影響。我們沒(méi)有測(cè)試img和input標(biāo)簽，但我相信是湊效的。

　　而對(duì)于方法二，我測(cè)試了高清中興、高清大亞4904機(jī)頂盒，發(fā)現(xiàn)是可行的，驗(yàn)證了我的想法，但是我沒(méi)有測(cè)原來(lái)就可以正常移動(dòng)焦點(diǎn)的高清機(jī)頂盒，是否會(huì)因?yàn)檫@個(gè)方法出現(xiàn)了不正常的問(wèn)題。這里有一個(gè)現(xiàn)象是，在對(duì)div設(shè)置了tabIndex屬性后，在機(jī)頂盒上，div周圍會(huì)出現(xiàn)焦點(diǎn)框，雖然這是個(gè)正常的現(xiàn)象，但畢竟不夠美觀，當(dāng)然也有辦法去掉這個(gè)焦點(diǎn)框，這是后話，不做討論。

說(shuō)到這個(gè)焦點(diǎn)框，順便一提，獲得焦點(diǎn)后，元素有一個(gè)虛線框，總有人挖空心思把它去掉。其實(shí)這無(wú)疑是對(duì)頁(yè)面易用性的踐踏，我們還要考慮一下某些特殊人群的需要，如不用鼠標(biāo)的高手，鼠標(biāo)壞了的可憐人或是視力有缺陷的人群。有文章介紹，去掉虛線框在美國(guó)是違法的，這是對(duì)視力障礙者的一種歧視！從這里我們可以看出美國(guó)對(duì)人權(quán)的尊重，這是一個(gè)佐證，也是出于用戶體驗(yàn)和人性化的考慮，畢竟你的產(chǎn)品就是為人所用，為人服務(wù)的。不過(guò)話說(shuō)會(huì)來(lái)，我們是討論在機(jī)頂盒上的表現(xiàn)，就最好去掉這焦點(diǎn)框，但美國(guó)人的態(tài)度是值得學(xué)習(xí)的。

　　最后，當(dāng)頁(yè)面焦點(diǎn)采用a標(biāo)簽來(lái)接受時(shí)，因?yàn)閍標(biāo)簽支持遙控器方向鍵移動(dòng)焦點(diǎn)，與Tab鍵作用類似（比如全部用a標(biāo)簽來(lái)接受焦點(diǎn)的標(biāo)清頁(yè)面），小窗口播放視頻不會(huì)出現(xiàn)無(wú)法移動(dòng)焦點(diǎn)的問(wèn)題。這也證明了上面的結(jié)論。

　　這里遺留了一個(gè)問(wèn)題，就是當(dāng)將用于播放視頻的iframe設(shè)置tabIndex=”-1”時(shí)，頁(yè)面焦點(diǎn)是不是就無(wú)法移動(dòng)了呢？時(shí)間關(guān)系，未做測(cè)試。

　　匆匆成文，且未有客觀分析和驗(yàn)證，有些觀點(diǎn)難免偏頗，歡迎批評(píng)指正。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com