jp-charge/pagesFinance/user/deviceLine.vue

<template>
	<view>
		<ujp-navbar title="设备详情"></ujp-navbar>
		<view style=" padding: 10px 16px;
    font-size: 16px;" >{{detail.deviceName}}<span style="float: right;"><span class="boot" :class="{
		boot2:detail.status
	}"></span>{{detail.status?'在线':'离线'}}</span></view>
		<img src="@/assets/img/gkke02.png" v-if="!detail.status" style="width: 100%;height: 234px;" />
		
		<view class="video-wrap" style="width: 100%;height: 234px;"
		 v-html="html"
		 v-show="detail.status" ref="videoWrapHls">
			
		</view>
		<!--  -->
		<view style="    text-align: center;" v-if="endTime"> 
			<u-button 
			type="primary" size="medium"
			@click="getInfo" >继续播放</u-button>
		</view>
		<view style="padding: 10px ;" v-if="endTime">
			单次播放时间为{{expireTime/60}}分钟；<br/>
			过期后可点击“继续播放”
		</view>

	</view>
</template>

<script>
	import * as API from '@/apis/finance.js'
	
	//import Hls from '@/apis/hls.js';
	//	import  videojs from  '@/apis/video.js'
	 import Hls from 'hls.js'
	export default {
		data() {
			return {
				html:'<video id="myVideo"  autoplay controls  style="width: 100%; height: 234px;"><source id="myVideoSource" type="application/x-mpegURL" /></video>',
				subForm: {},
				liveAddressUrl: "",
				detail: {},
				hls: null,
				player: null,
				expireTime:10*60,
				endTime:0,
			}
		},
		onLoad(op) {
			this.subForm.id=op.id;
		},
		onReady() {
			//uniapp 渲染有问题， 自主渲染
			if(!this.player){
				// var video = document.createElement('video');
				// video.id = 'myVideo';
				// video.style="width: 100%;height: 234px;"
				// this.$refs.videoWrapHls.$el.appendChild(video);					
				// this.player = video;
				var	video=document.getElementById("myVideo")
				this.player = video;
			}
			this.getInfo();
			

		},
		methods: {
			getInfo(){
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				//秒
				this.subForm.expireTime=this.expireTime
				API.cameraDetail(this.subForm).then((res) => {
					this.detail=res.data.cameraInfo;
					this.endTime=0;
					if(this.detail.status&&res.data.liveJson){
						var myVideoSource =document.getElementById("myVideoSource")
						
						myVideoSource.src=this.liveAddressUrl;
						
						this.liveAddressUrl = res.data.liveJson.url
						
						var endTime=new Date(res.data.liveJson.expireTime).getTime()
						var nowTime=new Date().getTime()
						
						setTimeout(()=>{
							this.endTime=1;
						},endTime-nowTime)
						
						this.$nextTick(()=>{
								this.play();
						})
					}
					
					uni.hideLoading()
					
					
				
				}).catch(error => {
					uni.showToast({
				
						title: error
					})
				})
			},
			handlePlay() {

			},
			play() {

				var video=	this.player;
				
				this.liveAddressUrl = this.liveAddressUrl.replace("http:", "https:");				
				var videoSrc = this.liveAddressUrl;
				if (Hls.isSupported()) {
					var hls = new Hls();
					hls.loadSource(videoSrc);
					hls.attachMedia(video);
					hls.on(Hls.Events.MANIFEST_PARSED, () => {
						video.play();
					});
					this.hls = hls;
				} else if (video.canPlayType('application/vnd.apple.mpegurl')) {
					video.src = videoSrc;
					video.addEventListener('loadedmetadata', () => {
						video.play();
					});
				}
				//监听开始播放事件
				//	this.player.addEventListener('play', this.handlePlay);
				
			}
		}
	}
</script>

<style scoped>
	.boot{
		
			display: inline-block;
			width: 12px;
			height: 12px;
			margin-left: 2px;
			background-color: rgba(255, 115, 0, 100);
			border-radius: 999px;
		
	}
	.boot2{
		background-color:rgba(0, 185, 98, 100)
	}
</style>