<template>
  <div class="video-box" :style="{
	  'background-image': 'url(' + (video.backgroundimage ? video.backgroundimage : '') + ')', backgroundSize: '100% 100%'
  }">
  <view class="video-xbox" :style="{
	  'paddingLeft':video.left+'rpx',
	  'paddingRight':video.right+'rpx',
	  'paddingTop':video.top+'rpx',
	  'paddingBottom':video.bottom+'rpx',
	  
  }">
	      <video :src="video.url" 
		  :style="{'width':'100%','height':'100%','border-radius':video.radius+'px'}"
		   :poster="video.pic_url" 
		   :show-center-play-btn='false'
		   
		   :id="'myVideo'+index"
		   @fullscreenchange='videoControl'
		   >
		   </video>
		  <view v-if="show==true" class="zzao" 
		  :style="{
		  	  'paddingLeft':video.left+'rpx',
		  	  'paddingRight':video.right+'rpx',
		  	  'paddingTop':video.top+'rpx',
		  	  'paddingBottom':video.bottom+'rpx',
		  	  
		  }"
		   @click="enlarge()">
		  	<u-icon name="play-circle-o" :size="50" color="#FFF"></u-icon>
		  </view>
  </view>

  </div>
</template>

<script>
export default {
  props: ["video",'index'],
  data(){
	  return{
		  show:true
	  }
  },
  created() {
  	
  },
  mounted() {
  	this.videoContext = uni.createVideoContext('myVideo'+this.index,this);
  },
  methods:{
	  enlarge(){
		  
		  console.log(this.videoContext)
		  this.show = false;
		  console.log(this.video.isfullscreen)
		  if(this.video.isfullscreen == true){
			  console.log('进入全屏')
			  this.videoContext.requestFullScreen({
			  	direction:0,
			  })
		  }else{
			  console.log('不是全屏播放')
			  this.videoContext.play()
		  }
	  },
	  videoControl(e){
	  	if(e.detail.fullScreen==false){
	  		this.videoContext.stop()
			if(this.video.isfullscreen==true){
				 this.show = true;
			}
	  	}else{
	  		this.videoContext.play()
	  		
	  	}
	  }
	  
  }
};
</script>

<style>
.video-box {
  width: 100%;
  height: 60vw;
  background: #333;
}
.video-xbox{
	width: 100%;
	height: 100%;
	position: relative;
	
}
.zzao{
	width: 100%;height: 100%;position: absolute;left: 0;top: 0;display: flex;align-items: center;justify-content: center;
}
</style>