星五博客

网页自动播放视频(mp4)

支持谷歌浏览器和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" 这两个属性。