支持谷歌浏览器和ie,包括ie8
//获取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; } if (getIEVer() < 9) {//ie下 ie8用9,如果ie全部用embed就填12 var iemovie = $('<embed id="vdo" src="images/sp.mp4" ' + 'allowfullscreen="false" width="880" height="495" ' + 'loop="true" autostart="true" wmode="transparent" ' +'windowlessVideo="true"></embed>'); $('.sp_container').append(iemovie); } else {//其他浏览器 var movie = $('<video id="vdo" width="880" height="495" ' + 'src="images/sp.mp4" controls autobuffer loop muted></video>'); $('.sp_container').append(movie); // 3秒后开始播放视频,注意要静音模式。 setTimeout(function () { $('#vdo').get(0).play(); }, 3000); // 谷歌浏览器新版不允许直接播放视频,但静音的可以,加个交互,用户点击取消静音。 document.body.addEventListener('mousedown', function () { var vdo = $("video")[0]; //jquery vdo.muted = false; }, false); }
这里注意一点,ie下embed会造成z-index无效,需要给embed添加 wmode="transparent" windowlessVideo="true" 这两个属性。