<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vlc-video视频播放</title>
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./js/layui/css/layui.css">
</head>
<body>
<!-- BTN -->
<div>
<button class="layui-btn" onclick="playVideo_1(),playVideo_2()">播放</button>
<button class="layui-btn" onclick="zanting_1(),zanting_2()">暂停</button>
<button class="layui-btn" onclick="kuaijin_1(),kuaijin_2()">快进10秒</button>
<button class="layui-btn" onclick="kuaitui_1(),kuaitui_2()">快退10秒</button>
</div>
<!-- vlc播放器 -->
<div id="vlc-content_1" class="content">
<embed id="vlcObj_1" src="123.mp4" type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" width="100%" height="480" />
</div>
<!-- h5 video播放器 -->
<div id="video-contnt_1" style="display: none;">
<video id="video_1" src="123.mp4" controls width="100%" height="480">
您的浏览器版本太旧，请更新版本或使用其他浏览器
</video>
</div>
<!-- BTN_1 -->
<div>
<button class="layui-btn" onclick="playVideo_1()">播放1</button>
<button class="layui-btn" onclick="zanting_1()">暂停1</button>
<button class="layui-btn" onclick="kuaijin_1()">快进10秒</button>
<button class="layui-btn" onclick="kuaitui_1()">快退10秒</button>
</div>
<!-- vlc播放器 -->
<div id="vlc-content_2" class="content">
<embed id="vlcObj_2" src="456.mp4" type="application/x-vlc-plugin" pluginspage="http://www.videolan.org" width="100%" height="480" />
</div>
<!-- h5 video播放器 -->
<div id="video-contnt_2" style="display: none;">
<video id="video_2" src="456.mp4" controls width="100%" height="480">
您的浏览器版本太旧，请更新版本或使用其他浏览器
</video>
</div>
<!-- BTN_2 -->
<div>
<button class="layui-btn" onclick="playVideo_2()">播放2</button>
<button class="layui-btn" onclick="zanting_2()">暂停2</button>
<button class="layui-btn" onclick="kuaijin_2()">快进10秒</button>
<button class="layui-btn" onclick="kuaitui_2()">快退10秒</button>
</div>
<!-- 播放器公共部分-->
<div>
<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>
<script src="./js/jquery-1.8.0.min.js"></script>
<script src="./js/layui/layui.js"></script>
<script> var VIDEO_1 = document.getElementById("video_1");</script>
<script> var VIDEO_2 = document.getElementById("video_2");</script>
<script> var VLC_1 = document.getElementById("vlcObj_1");</script>
<script> var VLC_2 = document.getElementById("vlcObj_2");</script>
</div>
<script>
var layer = '';
var useVlc = getBrowserInfo().indexOf('IE') != -1;
layui.use('layer', function () {
layer = layui.layer;
(function () {
if (useVlc) { // IE浏览器使用vlc
try {
$("#vlc-content_1").show();
$("#vlc-content_2").show();
} catch (err) {
$("#vlc-content_1").hide();
$("#vlc-content_2").hide();
if (getPlatform() == 'win32') {
layer.confirm('当前浏览器暂未安装视频播放插件，点击确定安装', {
btn: ['确定', '取消']
}, function () {
window.open('http://47.96.19.54:8080/vlc/vlc-2.2.4-win32.exe')
});
} else if (platform == 'win64') {
layer.confirm('当前浏览器暂未安装视频播放插件，点击确定安装', {
btn: ['确定', '取消']
}, function () {
window.open('http://47.96.19.54:8080/vlc/vlc-2.2.4-win64.exe')
});
}
}
} else { // 其他浏览器使用html5-video
$("#vlc-content_1").hide();
$("#video-contnt_1").show();
$("#vlc-content_2").hide();
$("#video-contnt_2").show();
}
// 绑定倍速
$("#beisu").on("change", function () {
var v = $(this).val();
if (useVlc) {
VLC.input.rate = v;
} else {
VIDEO.playbackRate = v;
}
});
})();
});
// 播放_1
function playVideo_1(url) {
if (useVlc) {
url ? VLC_1.playlist.add(url) : "";
VLC_1.playlist.play();
} else {
url ? VIDEO_1.src = url : "";
VIDEO_1.networkState != 3 ? VIDEO_1.play() : "";
}
}
// 播放_2
function playVideo_2(url) {
if (useVlc) {
url ? VLC_2.playlist.add(url) : "";
VLC_2.playlist.play();
} else {
url ? VIDEO_2.src = url : "";
VIDEO_1.networkState != 3 ? VIDEO_2.play() : "";
}
}
// 暂停播放_1
function zanting_1() {
if (useVlc) {
VLC_1.playlist.pause();
} else {
VIDEO_1.pause();
}
}
// 暂停播放_2
function zanting_2() {
if (useVlc) {
VLC_2.playlist.pause();
} else {
VIDEO_2.pause();
}
}
// 快进10秒播放_1
function kuaijin_1() {
if (useVlc) {
VLC_1.input.time += 10000;
} else {
VIDEO_1.currentTime += 10;
}
}
// 快进10秒播放_2
function kuaijin_2() {
if (useVlc) {
VLC_2.input.time += 10000;
} else {
VIDEO_2.currentTime += 10;
}
}
// 快退10秒播放_1
function kuaitui_1() {
if (useVlc) {
VLC_1.input.time -= 10000;
} else {
VIDEO_1.currentTime -= 10;
}
}
// 快退10秒播放_2
function kuaitui_2() {
if (useVlc) {
VLC_2.input.time -= 10000;
} else {
VIDEO_2.currentTime -= 10;
}
}
//适用于IE6/7/8/9/10/11浏览器，并且安装有vlc插件，则返回true；
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;
}
// 获取浏览器类型
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 is360 = userAgent.indexOf("360SE") > -1; //判断是否360浏览器
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";
}
if (is360) {
return "360SE";
}
}
// 获取浏览器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";
}
}
</script>
</body>
</html>
