判断访问设备显示不同调用代码范例

发布时间：2023-11-04 16:45:24 所属栏目：经验来源：

导读：在《实现手机移动端网站优酷视频自适应的方法》一文中，361源码给大家介绍了手机移动端网站优酷视频自适应的实现方法，但是还有很多时候我们需要网站在电脑访问和手机访问的时候显示出不同的样式效果，例如有这么一种

在《实现手机移动端网站优酷视频自适应的方法》一文中，361源码给大家介绍了手机移动端网站优酷视频自适应的实现方法，但是还有很多时候我们需要网站在电脑访问和手机访问的时候显示出不同的样式效果，例如有这么一种情况，我们在网站页面中调用视频网站的视频，一般都会使用到这样的两种方式：iframe和embed，但是这两种方式有时候显示出来的效果却不一样，这里用到的是iframe和embed的，但是在使用iframe标签调用腾讯视频的时候，会出现控制条，

而使用embed标签则不会出现这个控制条：

我们肯定是不希望网站页面中出现控制条的，但是这就有了另外一个问题：embed标签在移动端无法显示视频。这个时候我们该如何来应对和处理呢？下面就是今天361源码需要给大家介绍的重点——判断访问设备显示不同调用代码，我们可以对浏览器进行判断，在PC点使用embed标签，移动端使用iframe。具体见以下代码：

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>网页中插入视频的方法-判断访问设备显显示不同代用代码实例</title> <style type="text/css"> * { margin: 0; padding: 0; } body { text-align: center; } </style> </head> <body> <iframe frameborder="0" width="600" height="498" src="https://v.qq.com/iframe/player.html?vid=t0523oagtrj&tiny=0&auto=0" allowfullscreen="" id="iframe"></iframe> <embed src="https://imgcache.qq.com/tencentvideo_v1/playerv3/TPout.swf?max_age=86400&v=20161117&vid=r03996hk7rg&auto=0" allowfullscreen="true" quality="high" width="480" height="400" allowscriptaccess="always" type="application/x-shockwave-flash" id="embed" /> <script type="text/javascript"> var iframe = document.getElementById('iframe'), embed = document.getElementById('embed'); iframe.style.display = 'none'; embed.style.display = 'none'; var userAgentInfo = navigator.userAgent; var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"); var flag = false; var v = 0 for(v = 0; v < Agents.length; v++) { if(userAgentInfo.indexOf(Agents[v]) > 0) { flag = true; break; } } //检测浏览器为移动端浏览器 if(flag) { iframe.style.display = ''; embed.style.display = 'none'; } else { iframe.style.display = 'none'; embed.style.display = ''; } </script> </body></html>

这样我们就可以在PC和移动设备分别访问的时候调用不同的代码展示视频了。

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!