Html5 + videojs实现同一个界面播放两个视频（按钮分别控制）_框架

<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=10">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>vlc-video视频播放</title>

<link rel="stylesheet" href="/css/commoncss">

<link rel="stylesheet" href="/js/layui/css/layuicss">

</head>

<body>



<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>



<div id="vlc-content_1" class="content">

<embed id="vlcObj_1" src="123mp4" type="application/x-vlc-plugin" pluginspage="http://wwwvideolanorg" width="100%" height="480" />

</div>



<div id="video-contnt_1" style="display: none;">

<video id="video_1" src="123mp4" controls width="100%" height="480">

您的浏览器版本太旧，请更新版本或使用其他浏览器

</video>

</div>



<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>



<div id="vlc-content_2" class="content">

<embed id="vlcObj_2" src="456mp4" type="application/x-vlc-plugin" pluginspage="http://wwwvideolanorg" width="100%" height="480" />

</div>



<div id="video-contnt_2" style="display: none;">

<video id="video_2" src="456mp4" controls width="100%" height="480">

您的浏览器版本太旧，请更新版本或使用其他浏览器

</video>

</div>



<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="05">05x</option>

<option value="1" selected>10x</option>

<option value="125">125x</option>

<option value="15">15x</option>

<option value="2">20x</option>

</select>

<script src="/js/jquery-180minjs"></script>

<script src="/js/layui/layuijs"></script>

<script> var VIDEO_1 = documentgetElementById("video_1");</script>

<script> var VIDEO_2 = documentgetElementById("video_2");</script>

<script> var VLC_1 = documentgetElementById("vlcObj_1");</script>

<script> var VLC_2 = documentgetElementById("vlcObj_2");</script>

</div>

<script>

var layer = '';

var useVlc = getBrowserInfo()indexOf('IE') != -1;

layuiuse('layer', function () {

layer = layuilayer;

(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') {

layerconfirm('当前浏览器暂未安装视频播放插件，点击确定安装', {

btn: ['确定', '取消']

}, function () {

windowopen('http://47961954:8080/vlc/vlc-224-win32exe')

});

} else if (platform == 'win64') {

layerconfirm('当前浏览器暂未安装视频播放插件，点击确定安装', {

btn: ['确定', '取消']

}, function () {

windowopen('http://47961954:8080/vlc/vlc-224-win64exe')

});

}

}

} 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) {

VLCinputrate = v;

} else {

VIDEOplaybackRate = v;

}

});

})();

});

// 播放_1

function playVideo_1(url) {

if (useVlc) {

url VLC_1playlistadd(url) : "";

VLC_1playlistplay();

} else {

url VIDEO_1src = url : "";

VIDEO_1networkState != 3 VIDEO_1play() : "";

}

}

// 播放_2

function playVideo_2(url) {

if (useVlc) {

url VLC_2playlistadd(url) : "";

VLC_2playlistplay();

} else {

url VIDEO_2src = url : "";

VIDEO_1networkState != 3 VIDEO_2play() : "";

}

}

// 暂停播放_1

function zanting_1() {

if (useVlc) {

VLC_1playlistpause();

} else {

VIDEO_1pause();

}

}

// 暂停播放_2

function zanting_2() {

if (useVlc) {

VLC_2playlistpause();

} else {

VIDEO_2pause();

}

}

// 快进10秒播放_1

function kuaijin_1() {

if (useVlc) {

VLC_1inputtime += 10000;

} else {

VIDEO_1currentTime += 10;

}

}

// 快进10秒播放_2

function kuaijin_2() {

if (useVlc) {

VLC_2inputtime += 10000;

} else {

VIDEO_2currentTime += 10;

}

}

// 快退10秒播放_1

function kuaitui_1() {

if (useVlc) {

VLC_1inputtime -= 10000;

} else {

VIDEO_1currentTime -= 10;

}

}

// 快退10秒播放_2

function kuaitui_2() {

if (useVlc) {

VLC_2inputtime -= 10000;

} else {

VIDEO_2currentTime -= 10;

}

}

//适用于IE6/7/8/9/10/11浏览器，并且安装有vlc插件，则返回true；

function isInsalledIEVLC() {

var vlcObj = null;

var vlcInstalled = false;

try {

vlcObj = new ActiveXObject("VideoLANVlcplugin2");

if (vlcObj != null) {

vlcInstalled = true

}

} catch (e) {

vlcInstalled = false;

}

return vlcInstalled;

}

// 获取浏览器类型

function getBrowserInfo() {

var userAgent = navigatoruserAgent; //取得浏览器的userAgent字符串

var isOpera = userAgentindexOf("Opera") > -1; //判断是否Opera浏览器

var isIE = windowActiveXObject || "ActiveXObject" in window

var isEdge = userAgentindexOf("Edge") > -1; //判断是否IE的Edge浏览器

var isFF = userAgentindexOf("Firefox") > -1; //判断是否Firefox浏览器

var is360 = userAgentindexOf("360SE") > -1; //判断是否360浏览器

var isSafari = userAgentindexOf("Safari") > -1 && userAgentindexOf("Chrome") == -1; //判断是否Safari浏览器

var isChrome = userAgentindexOf("Chrome") > -1 && userAgentindexOf("Safari") > -1 && !isEdge; //判断Chrome浏览器

if (isIE) {

var reIE = new RegExp("MSIE (\\d+\\\\d+);");

reIEtest(userAgent);

var fIEVersion = parseFloat(RegExp["$1"]);

if (userAgentindexOf('MSIE 60') != -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 (userAgenttoLowerCase()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 = navigatorplatformtoLowerCase();

if (agentindexOf("win64") >= 0 || agentindexOf("wow64") >= 0) {

return "win64";

} else if (agentindexOf("win32") >= 0 || agentindexOf("wow32") >= 0) {

return "win32";

}

}

</script>

</body>

</html>

以上就是关于Html5 + videojs实现同一个界面播放两个视频（按钮分别控制）全部的内容，包括:Html5 + videojs实现同一个界面播放两个视频（按钮分别控制）、、等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/9544980.html

Html5 + videojs实现同一个界面播放两个视频（按钮分别控制）

发表评论

评论列表（0条）