第75篇一对多之合并开关声音按钮及获取当前按钮id及一个按钮控制两个函数

来源：互联网发布：课堂教学互动软件编辑：程序博客网时间：2024/04/29 15:11

关键词：合并开关声音按钮,获取当前按钮id,一个按钮控制两个函数

一、合并开关声音按钮

1.1 测试平台--本地服务器运行平台

老师端：带老师名字

https://localhost:9101/demos/index.html?roomid=888&t=600&&teaNameMobile=莫言

学生一：

https://localhost:9101/demos/student.html?studentId=1001&stuNameMobile=张三丰&t=600#888

学生二：带学生中文名字

https://localhost:9101/demos/student.html?studentId=1002&stuNameMobile=白子画&t=600#888

学生三：带学生英文名字

https://localhost:9101/demos/student.html?studentId=1003&stuNameMobile=司马南&t=600#888

1.1 测试平台--本地服务器运行平台

老师端：带老师名字

https://123.57.206.36:9101/demos/index.html?roomid=888&t=600&&teaNameMobile=莫言

学生一：

https://123.57.206.36:9101/demos/student.html?studentId=1001&stuNameMobile=张三丰&t=600#888

学生二：带学生中文名字

https://123.57.206.36:9101/demos/student.html?studentId=1002&stuNameMobile=白子画&t=600#888

学生三：带学生英文名字

https://123.57.206.36:9101/demos/student.html?studentId=1003&stuNameMobile=司马南&t=600#888

1.2 合并开声音关声音按钮

1)追加控制面版（私有白板+声音）

描述：之前追加时，点击之后删除，现在追加之后，3秒后自动隐藏，而不是删除。

代码如下：

//点击视频，获取id，并追加个小div进去----拉私有白板+控制音视频按钮

mediaBox.onclick= function(){

studentVideoId= mediaElementContainer.id;

if($("#"+studentVideoId+"stu").length<= 0){

$("#"+studentVideoId).append("<divid='"+studentVideoId+"stu'class='PriWB_controlVideoAudioDiv'><button class='getPriWB-btn'onclick='getPriWB(studentVideoId)'>私有白板</button><buttonclass='closeSomeoneVideoAudio-btn'onclick='closeSomeoneVideoAudio(studentVideoId)'>关声音</button><buttonclass='openSomeoneVideoAudio-btn' onclick='openSomeoneVideoAudio(studentVideoId)'>开声音</button></div>");

}

document.getElementById(studentVideoId+'stu').style.display='block';

setTimeout("document.getElementById('"+studentVideoId+"stu').style.display='none'",3000);

}

注：优化了两点，一是追加后不再删除，而是3秒后隐藏。

二是防止用户多次连续单击，加了一个if控制语句，如果要追加的div已经存在，就不再二次追加。

2）在开声音里面加入关声音的代码

声音控制实现了，具体如下：

a.)单击单个学生视频时，追加两个按钮（私有白板+声音控制）

//点击视频，获取id，并追加个小div进去----拉私有白板+控制音视频按钮

mediaBox.onclick = function(){

stuIdVA =mediaElementContainer.id;

if($("#"+stuIdVA+"stu").length <= 0){

$("#"+stuIdVA).append("<div id='"+stuIdVA

+"stu'class='PriWB_controlVideoAudioDiv'><button class='getPriWB-btn' onclick='getPriWB(stuIdVA)'>私有白板</button><button id='ctrl"

+stuIdVA+"' onclick='ctrlSgVA(stuIdVA)'>开声音</button></div>");

}

document.getElementById(stuIdVA+'stu').style.display='block';

setTimeout("document.getElementById('"+stuIdVA+"stu').style.display='none'",5000);

}

注：里面的私有白板函数没有大改，改了控制声音视频函数，用按钮值的改变来控制不同函数的调用。

b.) getPriWB(stuIdVA)函数如下：

//拉学生白板-------------------------------------------------------3.1

function getPriWB(stuIdVA) {

connection.send({

stuIdVAPri:stuIdVA,

stopTimer:true

});

document.getElementById(stuIdVA+'stu').style.display='none';

}

c.) ctrlSgVA(stuIdVA)函数如下：

//控制某个学生的音视频---------------------------------------------3.2

function ctrlSgVA(stuIdVA) {

//var valVA= $("#"+event.target.id).text();

var valVA =$("#ctrl"+stuIdVA).text();

if(valVA =='关声音'){

closeSgVA(stuIdVA);

$("#ctrl"+stuIdVA).text("开声音");

}else{

openSgVA(stuIdVA);

$("#ctrl"+stuIdVA).text("关声音");

}

document.getElementById(stuIdVA+'stu').style.display='none';

}

注：其实一个按钮变来变去，想通了，很容易实现，下午时，一直纠结怎么获取当前按钮的值（目前找到两种方法：var valVA = $("#"+event.target.id).text();和var valVA =$("#ctrl"+stuIdVA).text();），以及怎么实现一个按钮控制两个函数，其实只要找到一个改变的值对其进行限定即可。

注：当按钮的值为关声音时，调用closeSgVA(stuIdVA);

当按钮的值为开声音时，调用openSgVA(stuIdVA);

d.)关声音及开声音函数分别如下：

//关闭单个学生的音视频----------------------------------------------3.2.1

function closeSgVA(stuIdVA) {

connection.send({

action:"silent",

uid:stuIdVA

});

}

//打开单个学生的音视频----------------------------------------------3.2.2

function openSgVA(stuIdVA) {

connection.send({

action:"unsilent",

uid:stuIdVA

});

}

e.)关闭声音时，修改了学生端的函数，如下：

//禁音

if(event.data.action =="silent"){

//console.log('event.data.uid--->',event.data.uid);

//全员禁音

if(event.data.uid =="all"){

//console.log('eeeeeeeeeeeeeee');

connection.removeStream(connection.localMediaStreamId);

return;

}

//单个禁音

if(event.data.uid ==connection.localMediaStreamId){

connection.removeStream(connection.localMediaStreamId);

return;

}

return;

}

注：单个禁音，就只关闭他一个人的声音和视频，不对其他人做任何操作。

f.)开声音时，也做了修改，如下：

//开声音

if(event.data.action =="unsilent"){

if(event.data.uid =="all" ){//全员通话

connection.renegotiate();

return;

}

if(event.data.uid ==connection.localMediaStreamId){//单个通话

connection.renegotiate(connection.sessionid);

//单独辅导作业时，要辅导的学生切换到共享白板

toSharedWB();

return;

}

return;

}

注：老师开启某个学生的声音时，只开启他一个人的声音，也不对别的学生做任何操作。

2017年3月16日星期四

1 0