jp-xpgj-GA-file/src/projects/pension/views/Master/Live/Room.vue

<template>
<div>

	<common @asynCallBack="asynCallBack"></common>
	<top-header :pageTitle="pageTitle"    ></top-header>

	<div class="mui-content vongi-zbfj">
				<div class="mui-content-padded">

					<div class="fyy-video">
						<!--未开播状态-->
						 <div class="mui-media-body" v-if="!detail.status">
							<img src="~$project/assets/img/gkke02.png" width="50"/>
							<h6>该直播间未开播</h6>
						</div>
						<video autoplay controls class="video" ref="myPlayer">
							<source :src="liveAddressUrl" type="application/x-mpegURL" />
						</video>					</div>
					<div class="mui-table-view-cell flew-sp">
						{{detail.roomAddress}}
						<span class="color4fc5f7">[{{detail.status=='1'?'在线':'离线'}}]</span>
					</div>
				</div>
				<div class="mui-table-view-cell flew">
					紧急联系热线
					<button class="mui-btn" type='button'>0716-8121234<span class="iconfont icon-ziyuan1"></span></button>
				</div>
			</div>
			<!--挂机弹窗-->
			 <div class="vongi-popup"  v-if="isLoading2">
				<div class="vongi-popup-bg"></div>
				<div class="vongi-popup-ceter vongi-zbfj-pop" style="top:10%">
					<div class="vongi-popup-inner">
						<div class="vongi-popup-ma">
							<img src="~$project/assets/img/lad.png" width="50%">
							<h3>还在观看吗？</h3>

						</div>
						<div class="vongi-btn vongi-login-btn">
							<button class="mui-btn mui-btn-pink"><spn class="iconfont icon-bofang"></spn>继续观看</button>
							<button class="mui-btn "><spn class="iconfont icon-tuichu4"></spn>结束观看</button>
						</div>
					</div>

				</div>
			</div>
	<loading :visible="isLoading"></loading>

</div>
</template>


<script>
	import * as API_Common from '$project/apis/common'

	import * as API  from '@/apis/Master/live'
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import Hls from 'hls.js'

	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		currentTimeStamp,
		parseUnixTime
	} from '$project/utils'
	export default {
		name: 'GuestFromInfo',
		components: {
			Common,
			Loading,
			TopHeader
		},
		data() {
			return {
				pageTitle: '教室直播间',
				id: this.$route.query.id,
				detail: {
					status: 0
				},

				liveAddressUrl: "",
				player: {},
				list: [],
				isLoading: false,
				sz: ["", "一", "二", "三", "四", "五", "六", "日"],
				plan: "",
				planshow: false,
				hls: null,
				setTimeoutId:null,
				isLoading2:false,
				isLoading3:false,
				banner:null,
				serverList: [],
				bannerList:[],
			}
		},
		created() {
			this.id = this.$route.query.id;
		},
		methods:  {
			getBannerInfo() {

				API_Common.getBannerInfo("4").then(response => {
					//this.bannerList = response;
					for (var i in response) {
						var mod = response[i];
						this.bannerList.push(mod);

					}

					if(this.bannerList.length>0){
						var x=Math.floor(Math.random()*this.bannerList.length);
						this.banner=this.bannerList[x];
					}
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})

			},myback(){
				this.$router.push({
					name: 'Student',
				})
			},
			mystart(){
				if(this.isLoading3){
					window.location.reload();
				}else{
					this.player.play() //开始
					this.isLoading2=false;
				}

			},	handlePlay() {

				console.log("开始播放");
				if(this.player!=null){
					clearTimeout(this.setTimeoutId)
					this.setTimeoutId=setTimeout(()=> {
						console.log("延迟暂停");

						this.player.pause() //暂停

						if(document.exitFullscreen) {
							document.exitFullscreen();
						} else if(document.mozCancelFullScreen) {
							document.mozCancelFullScreen();
						} else if(document.webkitCancelFullScreen) {
							document.webkitCancelFullScreen();
						} else if(document.msExitFullscreen) {
							document.msExitFullscreen();
						}

						this.isLoading2=true;
						if(this.banner!=null){
							var x=Math.floor(Math.random()*this.bannerList.length);
							this.banner=this.bannerList[x];
							console.log(this.bannerList)
							console.log(x)
						}else{
							this.getSchoolServeList();
						}

						setTimeout(()=> {
							if(this.isLoading2){
								this.hls.stopLoad();
								this.isLoading3=true;//需要刷新；
							}
						},1000*60*1)

					},1000*60*10)
				}

			},

			getplan(mod) {
				return "每周" + this.sz[mod.week] + mod.startTime + '-' + mod.endTime + "开播";
			},

			play() {
				this.liveAddressUrl = this.liveAddressUrl.replace("http:", "https:");

				this.player = this.$refs["myPlayer"];


				var userAgent = navigator.userAgent;

				if (/(iPhone|iPad|iPod|iOS)/i.test(userAgent)) {
					//this.player.play();
					console.log("ios原生支持播放m3u8!");
				} else {
					this.player.addEventListener('play', this.handlePlay);

					var hls = new Hls();
					hls.loadSource(this.liveAddressUrl);
					hls.attachMedia(this.player);

					hls.on(Hls.Events.MANIFEST_PARSED, () => {
						this.player.play();
					});
					this.hls = hls;
				}

			},
			cameraDetail(){
				var week = new Date().getDay();
				if (week == 0) {
					week = 7;
				}
				this.isLoading = true;
				API.cameraDetail({
 					id:this.id
				}).then(response => {

					this.isLoading = false;

					this.detail = response.detail;
					var text = this.detail.roomAddress + "(" + this.detail.deviceSerial + ")";




					if (this.detail.status&& response.json) {
						//this.liveAddressUrl = response.json.hdAddress;
						this.liveAddressUrl = response.json.liveAddress;
						this.play();
					} else {
						this.isLoading = false;
					}
				}).catch(error => {
					this.isLoading = false;
					mui.toast(error);
				})
			},asynCallBack(){},
		},
		mounted() {
			console.log("open class living...");
			this.cameraDetail();

		},


		destroyed() {
			this.liveAddressUrl = "";

			console.log("页面销毁");
			if (this.$refs["myPlayer"] != null) {
				//this.player.dispose()
				this.$refs["myPlayer"].pause() //暂停
				this.$refs["myPlayer"].dispose() //销毁
				console.log("关闭视频流");
			}
			if (this.hls != null) {
				this.hls.destroy()
				this.hls.loadSource(this.liveAddressUrl);

			}
		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
			})
		}
	}
</script>

<style scoped src="$project/assets/css/pension.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style>
</style>