蓝叶博客

青春是一个充满活力的季节,即便是我们失去了天使的翅膀,只要我们还有一颗青春的心,那么我们的生活依然能够如阳光般灿烂!......
现在位置:首页 > 网站设计 > 用JS代码适配电脑端和手机端播放器代码

用JS代码适配电脑端和手机端播放器代码

蓝叶    网站设计    2016-08-10    1258    4评论    已收录

随着html5的崛起,很多网站都采用html5代码来设计,让网站美观大气,但是html5代码只有支持html5的浏览器才能显示,现在还有很大一部分人用的还是老旧的IE浏览器,尤其是一切企业客户,他们的网站还必须要兼容老版的IE浏览器;就拿播放器来说,互联网上有很多好看的html5播放器,在html5浏览器下很好的运行,但是不支持老旧的IE浏览器,遇到这种情况,最好的办法就是电脑端就用flash播放器来代替,手机端就用原生html5音乐视频标签来播放,省事省力也不用去纠结各个浏览器的显示效果了,下面就是一段JS代码来适配电脑端和手机端采用不同播放器。

在</head>之前添加一下代码:
<script src="http://apps.bdimg.com/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".playbox").each(function() {
 var playsrc = $(this).attr('data-u');
 var playwidth = $(this).attr('data-w');
 var playheight = $(this).attr('data-h');
 if ((navigator.userAgent.match(/(iPhone|iPod|Android|ios|iOS|iPad|Backerry|WebOS|Symbian|Windows Phone|Phone)/i))) { 
  $(this).html('<video width="'+playwidth+'" height="'+playheight+'" src="'+playsrc+'" controls></video>');
 }else{
  $(this).html('<embed wmode="transparent" width="'+playwidth+'" height="'+playheight+'" src="http://lanyes.org/demo/Lyplayer.swf?path='+playsrc+'&type=flv&fullscreen=true&autoplay=false&backcolor=99ff33&amp;frontcolor=ffffff" type="application/x-shockwave-flash" quality="high" allowfullscreen="true">');  
  }
 })
})
</script>

在内容里添加下面代码,data-u为音乐视频地址,data-w为播放器宽度,data-h为播放器高度。
<div class="playbox" data-u="音乐或视频地址" data-w="宽度" data-h="高度"></div>
评论一下 分享本文 赞助蓝叶

赞助蓝叶X

扫码赞助蓝叶
联系站长
蓝叶博客
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论
洋得意自媒体
洋得意自媒体2016-11-09 20:40回复
#3
这个可以有,
岁月
岁月2016-10-03 21:04回复
#2
哇哦,很支持
Suppore
Suppore2016-08-10 11:00回复
#1
不错的分享。
PS:抱歉之前未经允许分享叶子大哥的作品。
多翼
多翼2016-08-13 00:00回复
@Suppore:好青年
快捷导航返回顶部
你问我答
技术QQ群
音乐QQ群
付费服务
音乐欣赏
友情链接
保存桌面
给我留言
返回顶部