视频播放兼容ie8
你们知道一个H5标签吗?反正我是真的不知道,他就是强大的无所不能的<embed />,这个一个插件性的标签,引入src,真的是强大!我兼容ie8的视频播放在网上找各种插件搞了两天都没搞出来,直到遇到了这个神一样的存在。
我写了一个简单的例子:
一、html部分:
<div class="video-btn">观看视频<img src="/static/home/ico_home_player.png?v=1" alt=""></div> <div id="ieVedio"></div>
二、js部分:
//获取IE版本号(非IE返回>=12的值) function getIEVer() { var v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i'); while (div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->', all[0]); v = v > 4 ? v : 12; if (v >= 12 && 'ActiveXObject' in window) { v = document.documentMode; } return v; } $('.video-btn').on('click', function() { //let Document = document.body || document.documentElement; if($('#ieVedio').css('display') === "block") { $('#ieVedio').css('display', 'none'); //$('#jumpBg').css('display', 'none'); $('#ieVedio').empty(); //Document.style.overflow = 'auto'; } else { $('#ieVedio').css('display', 'block'); //$('#jumpBg').css('display', 'block'); //Document.style.overflow = 'hidden'; browser(); } }); $('#ieVedio').on('click','img',function(){//关闭视频按钮 $('#jumpBg').css('display','none'); $('#ieVedio').css('display','none'); $('#ieVedio').empty() }); function browser(){ if(getIEVer() < 12) {//ie下 var iemovie=$(' <img src="/static/home/lALOa5T61kBA_64_64.png" alt=""/>' + '<embed src="https://image.smtop1000.com/top1000/TOP1000.mp4" width="650" height="400"></embed>'); $('#ieVedio').append(iemovie); } else {//其他浏览器 var movie=$('<img src="/static/home/lALOa5T61kBA_64_64.png" alt=""/> ' + '<video src="https://image.smtop1000.com/top1000/TOP1000.mp4" width="650" height="400" controls="controls" autoplay="autoplay"></video>'); $('#ieVedio').append(movie); } }
就这么简单就搞定了,我去,网上好多插件都是不支持ie8的,真是伤脑筋。
不过好像有一个问题,就是点击关闭视频按钮的时候,在ie下视频的声音依然还存在,这好像也是一个bug,我还没解决,如果有可以解决的大神,可否告知小弟一声,小弟先行谢过啦!