张桐 / xdykt-build

转到一个项目
Toggle navigation Toggle navigation pinning
张桐
02f9ef1a 1 parent a18b3e6b

3.9 修改音视频模块,修改开始上课样式

内嵌 并排对比
正在显示 7 个修改的文件 包含 66 行增加 和 472 行删除
... ... @@ -1732,7 +1732,7 @@ a.am-btn-default:visited {
.am-btn-primary {
color: #fff;
/*background-color: #0e90d2;*/
border-color: #0e90d2
/*border-color: #0e90d2*/
}
a.am-btn-primary:visited {
... ... @@ -1741,11 +1741,11 @@ a.am-btn-primary:visited {
.am-btn-primary.am-active, .am-btn-primary:active, .am-btn-primary:focus, .am-btn-primary:hover, .am-dropdown.am-active .am-btn-primary.am-dropdown-toggle {
color: #fff;
border-color: #0a6999
/*border-color: #0a6999*/
}
.am-btn-primary:focus, .am-btn-primary:hover {
background-color: #0c79b1
/*background-color: #0c79b1*/
}
.am-btn-primary.am-active, .am-btn-primary:active, .am-dropdown.am-active .am-btn-primary.am-dropdown-toggle {
... ... @@ -1755,7 +1755,7 @@ a.am-btn-primary:visited {
.am-btn-primary.am-disabled, .am-btn-primary.am-disabled.am-active, .am-btn-primary.am-disabled:active, .am-btn-primary.am-disabled:focus, .am-btn-primary.am-disabled:hover, .am-btn-primary[disabled], .am-btn-primary[disabled].am-active, .am-btn-primary[disabled]:active, .am-btn-primary[disabled]:focus, .am-btn-primary[disabled]:hover, fieldset[disabled] .am-btn-primary, fieldset[disabled] .am-btn-primary.am-active, fieldset[disabled] .am-btn-primary:active, fieldset[disabled] .am-btn-primary:focus, fieldset[disabled] .am-btn-primary:hover {
background-color: #0e90d2;
border-color: #0e90d2
/*border-color: #0e90d2*/
}
.am-btn-group .am-btn-primary, .am-btn-group-stacked .am-btn-primary {
... ...
... ... @@ -248,10 +248,10 @@ height: 1080px;
margin-right: 10px;
}
.header button:hover {
background: #f2f2f2;
color: #354755;
}
/*.header button:hover {*/
/*background: #f2f2f2;*/
/*color: #354755;*/
/*}*/
.classroom {
float: left;
margin-left: 20px;
... ... @@ -290,6 +290,7 @@ height: 1080px;
/*修改amazeui.min.css*/
.classNowBtn{
margin-right: 10px;
border:none;
}
.exitClose{
position:absolute;
... ... @@ -302,7 +303,7 @@ height: 1080px;
width: 88px;
}
.am-active > .am-dropdown-content{
z-index: 1;
z-index: 3;
}
.am-btn-primary.am-active, .am-btn-primary:active, .am-dropdown.am-active .am-btn-primary.am-dropdown-toggle{
... ... @@ -312,6 +313,7 @@ height: 1080px;
color: #2a3e4d;
}
.am-dropdown-content {
min-width: 0;
z-index: 3000;
left: -12px;
... ... @@ -370,6 +372,7 @@ height: 1080px;
margin-top: 5px;
margin-bottom: 5px;
position: relative;
cursor: pointer;
}
.am-dropdown-content .am-dropdown-content-span{
margin-left: 7px;
... ... @@ -886,6 +889,9 @@ height: 1080px;
}
.file-ul li:hover{
background: #3498db;
}
.forSwitch{
cursor: pointer;
}
... ... @@ -1390,6 +1396,7 @@ height: 1080px;
margin: 0px 5px 0px 5px;
}
.teacherVideo-videoBg{
display: none;
position: absolute;
... ... @@ -2760,7 +2767,7 @@ canvas {
float: right;
margin-left: 5px;
height: 30px;
line-height: 26px;
line-height: 28px;
}
.left .control .total-page span{
font-size: 12px;
... ... @@ -2810,83 +2817,6 @@ canvas {
background:url("../images/left-pre.png") no-repeat;
}
/*直播中*/
.live {
position: absolute;
width: 26%;
height: 34%;
bottom: 20%;
}
.live i {
width: 4%;
height: 10%;
position: absolute;
bottom: 0;
background-color: red;
}
.live i:nth-of-type(1) {
left: 0;
}
.live i:nth-of-type(2) {
left: 6px;
}
.live i:nth-of-type(3) {
left: 12px;
}
.live i:nth-of-type(4) {
left: 18px;
}
.live.active i:nth-of-type(1) {
-webkit-animation: wave 0.9s linear infinite;
animation: wave 0.9s linear infinite;
}
.live.active i:nth-of-type(2) {
-webkit-animation: wave 0.7s linear infinite;
animation: wave 0.7s linear infinite;
}
.live.active i:nth-of-type(3) {
-webkit-animation: wave 0.8s linear infinite;
animation: wave 0.8s linear infinite;
}
.live.active i:nth-of-type(4) {
-webkit-animation: wave 0.6s linear infinite;
animation: wave 0.6s linear infinite;
}
@-webkit-keyframes wave {
0% {
height: 6px
}
50% {
height: 20px
}
100% {
height: 12px
}
}
@keyframes wave {
0% {
height: 8px
}
50% {
height: 20px
}
100% {
height: 12px
}
}
... ... @@ -2941,20 +2871,25 @@ canvas {
border: 1px solid #fff;
}
.right{
width: 26.5%;
}
.studentVideo{
width: 256px;
height: 192px;
margin-bottom: 5px;
/*width: 256px;*/
/*height: 192px;*/
/*margin-bottom: 5px;*/
width: 240px;
height: 196px;
}
.studentVideo img{
width:100%;
height: 100%;
}
.teacherVideo{
width: 256px;
height: 192px;
/*width: 256px;*/
/*height: 192px;*/
width: 240px;
height:196px;
}
.teacherVideo img{
width: 100%;
... ... @@ -2962,8 +2897,8 @@ canvas {
}
.chat{
width:256px;
height: 146px;
width:240px;
height: 142px;
bottom: 5px;
}
... ... @@ -2976,7 +2911,7 @@ canvas {
}
.chat .msg{
width:250px;
width:233px;
height: 105px;
background: #f2f2f2;
... ... @@ -3079,13 +3014,13 @@ canvas {
.input-send{
width: 256px;
width: 238px;
height: 38.4px;
line-height: 38.4px;
}
.input-face{
width: 205px;
width: 186px;
height: 21.3px;
line-height: 21.3px;
float: left;
... ... @@ -3102,7 +3037,7 @@ canvas {
.chat .input-face input{
height: 20px;
line-height: 20px;
width: 178px;
width: 159px;
margin-bottom: 4px;
}
... ... @@ -3735,6 +3670,7 @@ canvas {
}
/*输入4个参数*/
.fourParamsOut{
display: none;
width: 1366px;
height: 768px;
... ... @@ -3792,7 +3728,7 @@ canvas {
.box{
width: 853.3px;
height:575.3px;
height:587.3px
}
.header{
height: 40px;
... ... @@ -3905,7 +3841,9 @@ canvas {
.right{
width: 28.1%;
}
... ... @@ -4401,7 +4339,7 @@ canvas {
.canvas_container {
position: relative;
width: 585px;
height: 477px;
height: 489px;
border: none;
overflow-y: hidden;
overflow-x: hidden;
... ...
... ... @@ -163,11 +163,11 @@
</div>
<!--右侧未开始-->
<div class="classStatus am-dropdown " data-am-dropdown>
<button type="button" class="am-btn am-btn-primary classNowBtn" data-am-dropdown-toggle><span
<div id="classStatus" class="classStatus am-dropdown " data-am-dropdown>
<button id="classNowBtn" type="button" class="am-btn am-btn-primary am-dropdown-toggle classNowBtn" data-am-dropdown-toggle><span
id="span-iconfont" class="span-classes iconfont">&#xe62b;</span><span id="class-now" class="classNow">未开始</span>
</button>
<ul class="am-dropdown-content">
<ul id="amDropdownContent" class="am-dropdown-content">
<li class="am-dropdown-content-li-begin"><span id="am-dropdown-content-span-1" class="am-dropdown-content-span iconfont">&#xe61d;</span>
<button id="classes-status-begin" type="button"
... ... @@ -212,11 +212,13 @@
<div class="am-modal am-modal-no-btn" tabindex="-1" id="end-classes-1">
<div class="am-modal-dialog">
<a href="javascript: void(0)" class="am-close am-close-spin exitClose" data-am-modal-close>&times;</a>
<p class="p-text">确定要退出当前课堂吗?</p>
<p class="p-text">确定要结束当前课堂吗?</p>
<div class="am-modal-confirm-cancel">
<button id="end" class="confirm" data-am-modal-close>结束课堂</button>
<button id="end-no-exit" class="cancel-1" data-am-modal-close>退出，不结束课堂</button>
<!--<button id="end" class="confirm" data-am-modal-close>结束课堂</button>-->
<!--<button id="end-no-exit" class="cancel-1" data-am-modal-close>取消</button>-->
<button id="end" class="exitEnsure" data-am-modal-close>确定</button>
<button class="exitCancel" data-am-modal-close>取消</button>
</div>
</div>
... ...
此 diff 太大无法显示。
... ... @@ -1003,7 +1003,17 @@ function classJoinSuccess(callbackData){
//准备主页面
layoutView();
}
// function showClassStatus(obj) {
//
// if(obj.style.display=="block")
// {
// obj.style.display=='none';
// }
// else
// {
// obj.style.display=='block';
// }
// }
//登录成功后,登录页隐藏,主页面显示
... ... @@ -1016,13 +1026,6 @@ function layoutView( ) {
"display":"block"
});
$("#class-now").click(function () {
$(".am-dropdown-content").css({"z-index":"1","display":"block"});
});
$(".am-dropdown-content").mouseleave(function () {
$(".am-dropdown-content").css({"z-index":"-1","display":"block"});
})
//加入课堂成功后,点击开始上课
$("#classes-status-begin").click(function () {
... ... @@ -1034,7 +1037,7 @@ function layoutView( ) {
$(".span-classes").html("&#xe609;");
$("#class-now").html("直播中");
$(".am-dropdown-content").css("z-index","-1");
client.sendStartClass();
});
//暂停课堂
... ... @@ -1044,7 +1047,7 @@ function layoutView( ) {
$(".am-dropdown-content-li-pause").css("display","none");
$(".am-dropdown-content-li-rest").css("display","block");
$(".am-dropdown-content").css("z-index","-1");
client.sendPauseClass();
});
... ... @@ -1053,11 +1056,7 @@ function layoutView( ) {
$(".box").css("display", "none");
client.sendCloseClass();
});
//退出,但不结束课堂,是当前这个人退出
$("#end-no-exit").click(function () {
client.leaveClass();
$(".box").css("display", "none");
});
//退出,但不结束课堂,是当前这个人退出
$("#exitClass").click(function () {
client.leaveClass();
... ... @@ -1070,43 +1069,11 @@ function layoutView( ) {
$(".am-dropdown-content-li-pause").css("display","block");
$(".span-classes").html("&#xe609;");
$("#class-now").html("直播中");
$(".am-dropdown-content").css("z-index","-1");
// $(".am-dropdown-content").css("z-index","-1");
});
// if(_type==1){
// //主页面显示
// $(".box").css({
// "display":"block"
// });
// $(".zbbox").css({
// "display":"none"
// });
//
//
// }else{
// $(".box").css({
// "display":"none"
// });
// $(".zbbox").css({
// "display":"block"
// });
//
// }
$(".showBoardBtn").click(function () {
$(".docImage").css("z-index","none");
$(".showImg").css("display","none");
... ...
var client; //客户端
var pubResultObj; // 存储底层给我的推流结果
var playResultObj;//存储底层给我的播流结果
var playVideoId; //播放的流的videoId
var pushVideoId; //推流的videoId
var playCallbackDate; //视频更新的callBack
var nativeVideo={};
window.nativeVideo=nativeVideo;
nativeVideo.nativeInit=function (_client){
client=_client;
};
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
function mobileCallback(_param) {
console.log(_param);
if(isiOS){
console.log(isiOS);
_js2native(_param);
}else if (isAndroid){
console.log(isAndroid);
window.xdyAndroid._js2native(_param);
}
}
function teaTimeStamp() {
var _teatimestamp= Date.parse(new Date());
return _teatimestamp;
}
$(function () {
//学生视频按钮点击
$(".stuVideo-video").click(function (e) {
console.log("stuVideo-video点击");
console.log( $(".studentVideo").offset().left);
$("#stuVideo-video").html(" ");
$("#stuVideo-video").removeClass("stuVideo-video");
$("#stuVideo-video").addClass("stuVideo-videoBg");
$("#stuVideo-voice").html("&#xe62d;");
$("#stuVideo-voice").addClass("stuVideo-voice");
$("#stuVideo-voice").removeClass("stuVideo-voiceBg");
$(".studentVideo").css("background", "#CCCCCC");
var pcVideoTop=$(".studentVideo").offset().top;
var pcVideoLeft=$(".studentVideo").offset().left;
var pcVideoW=$(".studentVideo").width();
var pcVideoH=pcVideoW*3/4;
//获取位置
var scrollW=document.body.scrollWidth||document.documentElement.scrollWidth;
var videoStuXFloat=pcVideoLeft/scrollW*100;
var videoStuX=Math.round(videoStuXFloat*100)/100;
var scrollH=document.body.scrollHeight||document.documentElement.scrollHeight;
var videoStuYFloat=pcVideoTop/scrollH*100;
var videoStuY=Math.round(videoStuYFloat*100)/100;
//宽高
var videoStuWFloat=pcVideoW/scrollW*100;
var videoStuW=Math.round(videoStuWFloat*100)/100;
var videoStuHFloat=pcVideoH/scrollH*100;
var videoStuH=Math.round(videoStuHFloat*100)/100;
console.log(videoStuX,videoStuY,videoStuW,videoStuH);
//创建显示nativeVideo学生窗口,进行推流
var creatTeaNativeVideoObj={
"type":0,
"videoId":teaTimeStamp(),
"data":{
"wintype":'rtmp',
"x": videoStuX,
"y": videoStuY,
"width": videoStuW,
"height": videoStuH
}
};
console.log(creatTeaNativeVideoObj);
var creatTeaNativeVideoJson=JSON.stringify(creatTeaNativeVideoObj);
console.log(creatTeaNativeVideoJson);
mobileCallback(creatTeaNativeVideoJson);
//获取学生推流地址
achieveStuPushStream();
});
//学生挂断
$(".stuVideo-videoBg").click(function (e) {
})
//学生音频按钮点击
$("#stuVideo-voice").click(function (e) {
console.log("stuVideo-voice点击");
$("#stuVideo-video").html("&#xe62e;");
$("#stuVideo-video").removeClass("stuVideo-videoBg");
$("#stuVideo-video").addClass("stuVideo-video");
$("#stuVideo-voice").html("");
$("#stuVideo-voice").removeClass("stuVideo-voice");
$("#stuVideo-voice").addClass("stuVideo-voiceBg");
});
//根据传进来的消息,创建老师NativeVideo窗口,进行播流
client.on(MessageTypes.VIDEO_UPDATE,videoUpdate);
});
function videoUpdate(callbackDate){
playCallbackDate=callbackDate;
if ((callbackDate.status==1)&&(callbackDate.channelId!=='')){
var scrollW=document.body.scrollWidth||document.documentElement.scrollWidth;
var scrollH=document.body.scrollHeight||document.documentElement.scrollHeight;
var videoTeaXFloat=(scrollW-246)/scrollW*100;
var videoTeaX=Math.round(videoTeaXFloat*100)/100;
var videoTeaYFloat=241/scrollH*100;
var videoTeaY=Math.round(videoTeaYFloat*100)/100;
var creatStuNativeVideoObj={
"type":0,
"videoId":teaTimeStamp(),
"data":{
"x": videoTeaX,
"y": videoTeaY,
"width": 30,
"height": 30
}
};
var creatStuNativeVideoJson=JSON.stringify(creatStuNativeVideoObj);
mobileCallback(creatStuNativeVideoJson);
//获取播流地址
achievePlayStream();
}
}
//从底层获取播流地址,然后传给nativa进行播放
function achievePlayStream(){
var paramInfo={
"type": "rtmp"
};
var playResult=client.getVideoPlayPath(paramInfo);
console.log("执行getVideoPlayPath,返回的结果",playResult);
playResultObj=playResult;
if (playResult.code==0){
var _playMsg={
"type": 2,
"videoId": teaTimeStamp(),
"data":{
"video": true, // true/false
"audio": true, // true/false
"url":playResult.publishUrl
}
};
//播流的videoId
playVideoId=_playMsg.videoId;
//传给native
mobileCallback(_playMsg);
}
}
//从底层获取推流地址
function achievePushStream(){
var paramInfo={
"type": "live"
};
var pubResult=client.getVideoPublishPath(paramInfo);
console.log("执行getVideoPublishPath,返回的结果",pubResult)
pubResultObj=pubResult;
//code为0,代表成功
if (pubResult.code==0){
var _publishMsg={
"type": 10,
"videoId": teaTimeStamp(),
"data":{
"video": true, // true/false
"audio": true, // true/false
"url":pubResult.publishUrl
}
};
//推流时的VideoId
var pushVideoId=_publishMsg.videoId;
//传给native
mobileCallback(_publishMsg);
}
};
//native传给我
nativeVideo._native2js=function (_fromNative){
var fromNative=JSON.parse(_fromNative);
var type=fromNative.type;
switch (type){
case 0: SucessError(_fromNative);break;
default:break;
}
};
function SucessError(_fromNative) {
var successErrorData=_fromNative.data;
//0成功 1失败
if (successErrorData.result==0){
//将之前底层取的推流结果传递给底层
var _successErrorResult= client.publishVideo(pubResultObj);
if(_successErrorResult.code==0){
console.log("底层广播推流成功");
} else if(_successErrorResult.code==1){
console.log("底层广播推流失败,关闭推流");
//应用层关闭流
var _closeStream={
"type": 5,
"videoId":pushVideoId
}
var paramInfo={
"nodeId": 0,//用户的nodeId,默认0,就是自己的
};
client.stopPublishVideo(paramInfo);
}
}
else if (successErrorData.result==1){
console.log("native失败了,错误信息是",successErrorData.errmsg);
var paramInfo={
"nodeId": 0,//用户的nodeId,默认0,就是自己的
};
client.stopPublishVideo(paramInfo);
//应用层出弹框提示
$(".pop").trigger('click');
}
}
... ... @@ -146,7 +146,7 @@ $(function () {
$(".teacherVoicing").css("display","none");
$(".publish").css({"width":"240px","height":"180px"});
// $(".play").css({"width":"1px","height":"1px"});
$(".play").css({"width":"1px","height":"1px"});
}
... ... @@ -993,6 +993,7 @@ function publishURL(rtmpURL) {
//获取老师播音视频流地址
function achievePlayStream(_pubResultObj){
console.log("_pubResultObj==========>",_pubResultObj)
var _paramInfo={
"type": "rtmp",
... ...