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

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

ZJ
ZJ
2019-11-22 / 0 评论 / 281 阅读 / 正在检测是否收录...
温馨提示:
本文最后更新于2019年11月22日,已超过1617天没有更新,若内容或图片失效,请留言反馈。

   随着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 '+playwidth+'" '+playheight+'" src="'+playsrc+'" controls></video>');
}else{
$(this).html('<embed wmode="transparent" '+playwidth+'" '+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>
本文共 262 个字数,平均阅读时长 ≈ 1分钟
0

评论 (0)

取消