txwx_mobile/teacher_classroom/js/video.js

$(function(){
	var videoData=JSON.parse(window.localStorage.getItem('video'));
    videoInit(videoData);
    $("#toLastPageIcon").on('tap',function(){
    		window.location.href='./detail.html?id='+videoData.spec_id;
    });
})


function videoInit(data){
	console.log(data);
	var exam_id=data.exam_id;
	var uid=$.cookie("userid");;
	var clientHeight=$(window).height();
	var iframeHeight=clientHeight-328;
	var requestData=new REQUESTDATA();
	var totalURL=requestData.getURL();
    var exerciseText='<iframe src="'+totalURL.exercise+'?pm_id='+exam_id+'&stu_uid='+uid+'" '
    		+'style="width:100%;height:'+iframeHeight+'px;border:0;background:#fff;"/>'
	var text='<div class="animated fadeIn">'
		+'<video controls="controls" controlsList="nodownload" '
    		+'x5-video-player-type="h5" x5-video-orientation="landscape"'
    		+'poster="'+data.zj_img+'"'
    		+'style="width:100%;height:100%;">'
		+'<source src="'+data.zj_video+'" type="video/mp4">'
		+'您的浏览器不支持Video'
		+'</video>'
		+'</div>'
		
		+'<div id="taskExerciseModel">'
		//tab
		+'<div style="width:90%;margin:0 auto;">'
		+'<div id="detail_brief" class="activeDetailTabModelItem">简介</div>'
		+'<div id="detail_im" class="detailTabModelItem">互动答疑</div>'
		+'<div id="detail_exercise" class="detailTabModelItem">作业</div>'
		+'<div style="clear:both;"></div>'
		+'</div>'
		+'<div id="tabContentModel">'
		//简介
		+'<div id="detail_brief_content" style="padding:15px;">'
		+'<div style="font-size:14px;color:#333;line-height:30px;">'+data.zj_name+'</div>'
		+'<div style="font-size:14px;color:#333;line-height:30px;">'+data.createtime+'</div>'
		+'<div></div>'
		+'</div>'+

		// IM
		`
		<div id="detail_im_content" style="display:none;">
      <ul id="msg-wrap">
        <li
          class="msg"
          :class="{
            text:x.msg_type=='text',
            my: x.is_me,
            other:!x.is_me
          }"
          v-for="(x,i) in msgList"
          :key="i"
        >
          <div class="item">
			<div class="username">{{x.from_name}}</div>
			<div class="disflex">
				<div v-if="!x.is_me">
				<img src="./img/jmui_head_icon.png" style="width: 35px;" alt="" />
				</div>
				<div class="text-con" v-if="x.msg_type === 'text'">
				{{x.msg_body.text}}
				</div>
				<div class="text-con" v-if="x.msg_type === 'image'">
				<img :src="x.msg_body.src" style="max-width: 100%;" @onload="imgOnload" alt="" />
				</div>
				<div v-if="x.is_me">
				<img src="./img/jmui_head_icon.png" style="width: 35px;" alt="" />
				</div>
			</div>
          </div>
        </li>
      </ul>
      <div id="operation-wrap" v-if="logged">
		<input placeholder="说点什么..." id="msg-input" type="text" v-model="msg" />
		<div id="msg-send" @click="send">
			<img src="./img/send.png" alt="" srcset="">
		</div>
		<label id="img-select" for="im-file">
			<img src="./img/img.png" alt="" srcset="">
			<input id="im-file" hidden accept="image/*"  @change="fileChange($event)" type="file" name="" id="">
		</label>
      </div>
    </div>
		`
		//作业
		+'<div id="detail_exercise_content" style="display:none;">'+exerciseText+'</div>'
		+'</div>';
	$("#root").html(text);
	handleDetailTab();
}

function handleDetailTab(){
	var tabArr=['detail_brief', "detail_im", 'detail_exercise'];
	detailTabContentInit('detail_brief',tabArr);
	for(var i=0;i<tabArr.length;i++){
		var item=tabArr[i];
		(function(item){
			$("#"+item).on('tap',function(){
				for(var j=0;j<tabArr.length;j++){
					var itemTarget=tabArr[j];
					if(itemTarget==item){
						$("#"+itemTarget).removeClass('detailTabModelItem').addClass('activeDetailTabModelItem');
						detailTabContentInit(itemTarget,tabArr);
					}else{
						$("#"+itemTarget).removeClass('activeDetailTabModelItem').addClass('detailTabModelItem');
					}
				}
			});
		})(item);
	}
}

function detailTabContentInit(target,tabArr){
	for(var i=0;i<tabArr.length;i++){
		var item=tabArr[i];
		if(item==target){
			$("#"+item+"_content").show();
		}else{
			$("#"+item+"_content").hide();
		}
	}
}