cma_search/client_mp/pages/vod/watchPage.vue

<template>
	<view>
		<!-- <view v-show="already" class="markBlock" ref="mydom"> -->
		<view v-show="already" :style="{height:ReadyHeight+'px'}" class="markBlock">
			<view style="">
				<view class="">
					<view class="spinner">
					  <view class="spinner-container container1">
						<view class="circle1"></view>
						<view class="circle2"></view>
						<view class="circle3"></view>
						<view class="circle4"></view>
					  </view>
					  <view class="spinner-container container2">
						<view class="circle1"></view>
						<view class="circle2"></view>
						<view class="circle3"></view>
						<view class="circle4"></view>
					  </view>
					  <view class="spinner-container container3">
						<view class="circle1"></view>
						<view class="circle2"></view>
						<view class="circle3"></view>
						<view class="circle4"></view>
					  </view>
					</view>
				</view>
				资源缓冲中，请稍后...
			</view>
			 
		</view>
		<video class="video" :src="url" controls object-fit="cover"
			id="videoPlayer" :poster="item.coverurl" @play="doPlay($event)"
			 @loadedmetadata="alreadyLoad"
			:initial-time="current" style="width: 100%;" @timeupdate="timeupdate($event)"
			@pause="doPlay($event)" @ended="doPlay($event)">
		</video>
	</view>
</template>

<script>
export default {
		data() {
			return {
				url:'',
				item: {},
				ReadyHeight:0,
				videoId:0,
				current:0,
				currentTime:0,
				already:true,
				alreadyPlay:false,
			}
		},
		onLoad(options) {
			// debugger;
			 let that=this;
			that.videoId = options.id;
			that.url = options.url;
			if(options.current){
				that.current = options.current;
			}else{
				that.$u.api.getVideoRecord(options.id).then(res => {
					that.current = res.data.current;
				})	
			}
			that.changeHeight();
		},
		methods:{
			changeHeight(){
				 let that=this;
				let obj = uni.createSelectorQuery().select('.video')
				obj.boundingClientRect(function (data) { // data - 各种参数
				  console.log(data)
				  that.ReadyHeight=data.height;
				}).exec()
			},
			alreadyLoad(){
				this.already = false;
			},
			doPlay(e) {
				if(this.alreadyPlay){}else{
					// debugger;
					this.alreadyPlay =true;
					this.$u.api.putMyVideoView(this.videoId).then(res=>{})
				}
				// videoContextPrev.pause();
			},
			timeupdate(e){
				let currentTime = Math.floor(e.detail.currentTime);
				this.currentTime =currentTime;
			},
		},
		beforeDestroy(){
			// debugger;
			let params = {'current':this.currentTime};
			this.$u.api.putMyVideoView(this.videoId,params).then(res => {
			})
		},
	}
</script>

<style>
	.markBlock{
		color:#ffffff;
		text-align:center;
		 width: 100%;
		 position: fixed;
		 top: 0;
		 left: 0;
		 background: rgba(0,0,0,0.8);
		 z-index: 100;
	}
	 .spinner {
	     margin: 200upx auto 80upx;
		 width: 100upx;
		 height: 100upx;
		 position: relative;
	    }
	     
	    .container1 > view, .container2 > view, .container3 > view {
	      width: 20upx;
	      height: 20upx;
	      background-color: #fff;
	     
	      border-radius: 100%;
	      position: absolute;
	      -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
	      animation: bouncedelay 1.2s infinite ease-in-out;
	      -webkit-animation-fill-mode: both;
	      animation-fill-mode: both;
	    }
	     
	    .spinner .spinner-container {
	      position: absolute;
	      width: 100%;
	      height: 100%;
	    }
	     
	    .container2 {
	      -webkit-transform: rotateZ(45deg);
	      transform: rotateZ(45deg);
	    }
	     
	    .container3 {
	      -webkit-transform: rotateZ(90deg);
	      transform: rotateZ(90deg);
	    }
	     
	    .circle1 { top: 0; left: 0; }
	    .circle2 { top: 0; right: 0; }
	    .circle3 { right: 0; bottom: 0; }
	    .circle4 { left: 0; bottom: 0; }
	     
	    .container2 .circle1 {
	      -webkit-animation-delay: -1.1s;
	      animation-delay: -1.1s;
	    }
	     
	    .container3 .circle1 {
	      -webkit-animation-delay: -1.0s;
	      animation-delay: -1.0s;
	    }
	     
	    .container1 .circle2 {
	      -webkit-animation-delay: -0.9s;
	      animation-delay: -0.9s;
	    }
	     
	    .container2 .circle2 {
	      -webkit-animation-delay: -0.8s;
	      animation-delay: -0.8s;
	    }
	     
	    .container3 .circle2 {
	      -webkit-animation-delay: -0.7s;
	      animation-delay: -0.7s;
	    }
	     
	    .container1 .circle3 {
	      -webkit-animation-delay: -0.6s;
	      animation-delay: -0.6s;
	    }
	     
	    .container2 .circle3 {
	      -webkit-animation-delay: -0.5s;
	      animation-delay: -0.5s;
	    }
	     
	    .container3 .circle3 {
	      -webkit-animation-delay: -0.4s;
	      animation-delay: -0.4s;
	    }
	     
	    .container1 .circle4 {
	      -webkit-animation-delay: -0.3s;
	      animation-delay: -0.3s;
	    }
	     
	    .container2 .circle4 {
	      -webkit-animation-delay: -0.2s;
	      animation-delay: -0.2s;
	    }
	     
	    .container3 .circle4 {
	      -webkit-animation-delay: -0.1s;
	      animation-delay: -0.1s;
	    }
	     
	    @-webkit-keyframes bouncedelay {
	      0%, 80%, 100% { -webkit-transform: scale(0.0) }
	      40% { -webkit-transform: scale(1.0) }
	    }
	     
	    @keyframes bouncedelay {
	      0%, 80%, 100% {
	        transform: scale(0.0);
	        -webkit-transform: scale(0.0);
	      } 40% {
	        transform: scale(1.0);
	        -webkit-transform: scale(1.0);
	      }
	    }
</style>