一、项目起源
公司项目中需要视频播放，并且需要实现倍速播放，最重要的是需要兼容 IE8，于是乎 HTML5 的 video 显然无法使用，只能另辟蹊径，查找资料最终决定使用 vlc 视频播放插件兼容 IE，再加上 video，可以实现全浏览器兼容的视频播放和倍速播放。
二、解决思路
首先 H5video 无法兼容低版本 IE，考虑使用 ActiveX 视频播放插件，vlc 视频播放软件有自带的 ActiveX 插件，安装时会自动安装插件，不过要注意的是 vlc 的版本必须与 IE 浏览器的版本一致（即如果 IE 是 32 位则必须安装 32 位 vlc）。使用 vlc 解决 IE 的视频播放和倍速播放，其它浏览器则使用 video 实现。
三、解决办法
1、判断浏览器类型
// 获取浏览器类型
function getBrowserInfo() {
var userAgent = navigator.userAgent; // 取得浏览器的 userAgent 字符串
var isOpera = userAgent.indexOf(“Opera”) > -1; // 判断是否 Opera 浏览器
var isIE = window.ActiveXObject || “ActiveXObject” in window
var isEdge = userAgent.indexOf(“Edge”) > -1; // 判断是否 IE 的 Edge 浏览器
var isFF = userAgent.indexOf(“Firefox”) > -1; // 判断是否 Firefox 浏览器
var isSafari = userAgent.indexOf(“Safari”) > -1 && userAgent.indexOf(“Chrome”) == -1; // 判断是否 Safari 浏览器
var isChrome = userAgent.indexOf(“Chrome”) > -1 && userAgent.indexOf(“Safari”) > -1 && !isEdge; // 判断 Chrome 浏览器
if (isIE) {
var reIE = new RegExp(“MSIE (\\d+\\.\\d+);”);
reIE.test(userAgent);
var fIEVersion = parseFloat(RegExp[“$1”]);
if (userAgent.indexOf(‘MSIE 6.0’) != -1) {
return “IE6”;
} else if (fIEVersion == 7) {
return “IE7”;
} else if (fIEVersion == 8) {
return “IE8”;
} else if (fIEVersion == 9) {
return “IE9”;
} else if (fIEVersion == 10) {
return “IE10”;
} else if (userAgent.toLowerCase().match(/rv:([\d.]+)\) like gecko/)) {
return “IE11”;
} else {
return “0”
} //IE 版本过低
} //isIE end
if (isFF) {
return “FF”;
}
if (isOpera) {
return “Opera”;
}
if (isSafari) {
return “Safari”;
}
if (isChrome) {
return “Chrome”;
}
if (isEdge) {
return “Edge”;
}
}
2、若是 IE 则判断是否安装 vlc ActiveX 插件
function isInsalledIEVLC() {
var vlcObj = null;
var vlcInstalled = false;
try {
vlcObj = new ActiveXObject(“VideoLAN.Vlcplugin.2”);
if (vlcObj != null) {
vlcInstalled = true
}
} catch (e) {
vlcInstalled = false;
}
return vlcInstalled;
}
3、若未安装则判断浏览器版本，根据版本下载对应的 vlc
// 获取浏览器 32 位还是 64 位，安装对应的 vlc
function getPlatform() {
var agent = navigator.platform.toLowerCase();
if (agent.indexOf(“win64”) >= 0 || agent.indexOf(“wow64”) >= 0) {
return “win64”;
} else if(agent.indexOf(“win32”) >= 0 || agent.indexOf(“wow32”) >= 0){
return “win32″;
}
}
4、若是 IE 浏览器且已安装 vlc，HTML 标签如下
<embed id=”vlcObj” type=”application/x-vlc-plugin” pluginspage=”http://www.videolan.org” width=”100%” height=”480″ />
5、非 IE 浏览器使用 video
<video id=”video” src=”” controls width=”100%” height=”480″>
您的浏览器版本太旧，请更新版本或使用其他浏览器
</video>
6、播放和暂停
var useVlc = getBrowserInfo().indexOf(‘IE’) != -1;
var VIDEO = document.getElementById(“video”);
var VLC = document.getElementById(“vlcObj”);
// 播放
function playVideo(url) {
if(useVlc){
url ? VLC.playlist.add(url) : “”;
VLC.playlist.play();
}else{
url ? VIDEO.src = url : “”;
VIDEO.networkState != 3 ? VIDEO.play() : “”;
}
}
// 暂停播放
function zanting() {
if(useVlc){
VLC.playlist.pause();
}else{
VIDEO.pause();
}
}
7、倍速播放
// 绑定倍速
<select id=”beisu”>
<option value=”0.5″>0.5x</option>
<option value=”1″ selected>1.0x</option>
<option value=”1.25″>1.25x</option>
<option value=”1.5″>1.5x</option>
<option value=”2″>2.0x</option>
</select>
$(“#beisu”).on(“change”, function(){
var v = $(this).val();
if (useVlc) {
VLC.input.rate = v;
} else {
VIDEO.playbackRate = v;
}
});
8、快进、快退
// 快进 10 秒播放
function kuaijin() {
if(useVlc){
VLC.input.time += 10000;
}else{
VIDEO.currentTime += 10;
}
}
// 快退 10 秒播放
function kuaitui() {
if(useVlc){
VLC.input.time -= 10000;
}else{
VIDEO.currentTime -= 10;
}
}