眾所周知手機不支持SWF文件播放,在手機端,尤其在微信端更是如此,在這樣的情況下,我們一般會選擇使用iframe嵌套代碼來實現視頻的調用。隨便網頁的智能化的發展,我們也不可避免的需要讓我們的站點實現基礎的自適應的小“智能”。那就是361源碼今天準備給大家講的:手機移動端網站優酷視頻自適應的實現方法。
一、正文頁沒有側邊欄的情況,一般視頻考慮按照16:9的比例來說設定,代碼如下:
<script>window.onload = window.onresize = function () {resizeIframe();}var resizeIframe=function(){var bodyw=document.body.clientWidth;for(var ilength=0;ilength<=document.getElementsByTagName("iframe").length;ilength++){document.getElementsByTagName("iframe")[ilength].height = bodyw*9/16;//設定高度}}</script><iframe width=100% src="視頻地址" frameborder=0 allowfullscreen></iframe>二、網頁正文帶側邊欄,一般解決代碼如下:
<iframe width=100% height=350 src="視頻地址" frameborder=0 allowfullscreen></iframe>
這里的視頻地址一般格式為:http://player.youku.com/embed/XNDAyOTc1NDk2
原因分析:
如果有側邊欄的時候,用script代碼,他識別的是body的寬度,這時候如果在電腦端,會顯得視頻上下很寬。當然了這里限定好高度為350的時候,也會在手機端顯得上下有黑邊,只能看自己取舍了。
言外語 :
實際測試上面方法并不完美,提供完美解決思路:在iframe外面鑲套兩層DIV,然后用CSS中的判斷頁面像素值代碼來設定不DIV的高度,具體代碼操作,你可以看我的源碼和CSS源碼來分析吧,361這里只是提供一個思路。
如果你還有什么不明白的可以聯系我們的在線客服幫你處理。
以上就是實現手機移動端網站優酷視頻自適應的方法的全部內容,希望對大家的學習和解決疑問有所幫助,也希望大家多多支持武林網。新聞熱點
疑難解答