你們知道一個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,我還沒解決,如果有可以解決的大神,可否告知小弟一聲,小弟先行謝過啦!
