现在位置:首页 > 网站设计 > 用JS代码适配电脑端和手机端播放器代码

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

作者:蓝叶 分类:网站设计 时间:2016-08-10 浏览:12822 评论:9

随着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="https://lanye.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>

免责声明:

本页网址:点击复制分享给朋友吧!

本站分享的一切内容资源如若没有备注,均为蓝叶原创,如需转载请注明出处;如有侵权请与我们联系处理。敬请谅解!

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

清空信息
关闭评论
nmshuang
nmshuang游客
#5
此播放器代码可以播放FLV视频吗?
2018-04-12 22:27回复
蓝叶
蓝叶游客
@nmshuang:可以,网页视频最好用H264编码的mp4格式。
2018-04-14 16:33回复
1124
1124游客
@蓝叶:能让视频循环播放吗
2018-07-13 14:42回复
蓝叶
蓝叶游客
@1124:video标签里加上loop
2018-07-21 09:58回复
好玩资源网
好玩资源网游客
#4
不错的
2017-02-04 18:41回复
洋得意自媒体
洋得意自媒体游客
#3
这个可以有,
2016-11-09 20:40回复
岁月
岁月游客
#2
哇哦,很支持
2016-10-03 21:04回复
Suppore
Suppore游客
#1
不错的分享。
PS:抱歉之前未经允许分享叶子大哥的作品。
2016-08-10 11:00回复
多翼
多翼游客
@Suppore:好青年
2016-08-13 00:00回复
音乐欣赏
返回顶部