实施手机移动端网站优酷视频自适应的方法
发布时间：2022-01-11 23:33:56 所属栏目：经验 来源：互联网
导读：众所周知手机不支持SWF文件播放，在手机端，尤其在微信端更是如此，在这样的情况下，我们一般会选择使用iframe嵌套代码来实现视频的调用。随便网页的智能化的发展，我们也不可避免的需要让我们的站点实现基础的自适应的小智能。那就是361源码今天准备给大
|
众所周知手机不支持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这里只是提供一个思路。 （编辑：PHP编程网 - 黄冈站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
浙公网安备 33038102330482号