<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>
该方式使用以创建好的video标签，只是简单的改变video的src。注意，此时的自定义组件（如清晰度）并没有更新，里面的数据还是上一个视频的信息，需要手动更新，可以手动移除后再添加。
该方式首先会调用dispose方法销毁已经创建的video标签，并移除所有的组件和监听事件，然后需要自己创建video并设置其id（注意该id不能与之前销毁的id相同，我也不知道为啥～ :) ）和class以及src，然后将创建的video添加到文档中，如上html的结构，将作为id= vWrap的子元素添加到文档中。
一开始在项目中使用dplayer做为视频的播放库，但是由于在孤儿浏览器上出现兼容问题
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）