siyu_app/pages/course/video/fullVideo.nvue

<template>
  <view :style="'width: '+ windowWidth +'px; height: '+ windowHeight +'px;'" class="container" >
    <video
      id="video"
      :src="videoUrl"
      :controls="true"
	  :autoplay="true"
      @timeupdate="onTimeUpdate"
      @loadedmetadata="onLoadedMetadata"
      @fullscreenchange="onFullscreenChange"
      class="video-player">
	   
	     <cover-view class="toolbar" :style="'width: '+ windowWidth +'px; height: '+ 40 +'px;'" v-if="isFullscreen || !isPlaying">
	       <cover-image
	         :src="isPlaying ? '/static/images/pause.png' : '/static/images/play.png'"
	         class="play-pause-btn"
	         @tap="togglePlay"
	       ></cover-image>
	       <cover-view class="time-display">
	         <text>{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</text>
	       </cover-view>
	       <cover-view class="progress-container">
	         <cover-view class="progress-bar" :style="{ width: progress + '%' }"></cover-view>
	       </cover-view>
	       <cover-view class="fullscreen-btn" @tap="toggleFullscreen" style="margin-right: 30rpx;background-color: red;">
	         <cover-image src="@/static/image/course/full_screen.png"></cover-image>
	       </cover-view>
	     </cover-view>
	  
	  </video>
	  

	
  </view>
</template>

<script>
  export default {
    data() {
      return {
        videoUrl: 'https://1319721001.vod-qcloud.com/3525603bvodcq1319721001/2b3e76ac1253642698811158287/Hmod7JMfAowA.mp4',
        isPlaying: false,
        isFullscreen: false,
        duration: 0,
        currentTime: 0,
        progress: 0,
		videoContext:null,
		windowWidth:0,
		windowHeight:0,
      };
    },
	onLoad() {
		const systemInfo = uni.getSystemInfoSync();
		this.windowWidth = systemInfo.screenWidth //获取屏幕宽度
		this.windowHeight=systemInfo.screenHeight;
	},
	onReady() {
		this.videoContext = uni.createVideoContext('video');
	},
    methods: {
      onLoadedMetadata(event) {
        this.duration = event.target.duration;
      },
      onTimeUpdate(event) {
        this.currentTime = event.target.currentTime;
        this.progress = (this.currentTime / this.duration) * 100;
      },
      togglePlay() {
        
        if (this.isPlaying) {
          this.videoContext.pause();
        } else {
          this.videoContext.play();
        }
        this.isPlaying = !this.isPlaying;
      },
      toggleFullscreen() {
       console.log("toggleFullscreen");
        if (this.isFullscreen) {
          this.videoContext.exitFullScreen();
        } else {
          this.videoContext.requestFullScreen();
        }
      },
      onFullscreenChange(event) {
        this.isFullscreen = event.detail.fullScreen;
      },
      formatTime(seconds) {
        const minutes = Math.floor(seconds / 60);
        const secs = Math.floor(seconds % 60);
        return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
      },
    },
  };
</script>

<style>
	page{
		background: #000;
	}
  .container {
    position: relative;
    width: 375px;
    height: 700px;
    background-color: black;
  }
  
  .video-player {
  	width:300px;
  	height:300px;
  	border-radius: 20rpx;
    background: red;
  	position: relative;
  	background-color: red;
	position: relative;
  }

  .toolbar {
    position: absolute;
    bottom: 0px;
    left: 0;
    
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: space-around;
    z-index: 10;
  }
  .play-pause-btn {
    width: 30px;
    height: 30px;
  }
  .time-display {
    color: #fff;
    font-size: 14px;
  }
  .progress-container {
    flex: 1;
    height: 5px;
    background-color: #ccc;
    margin: 0 10px;
    position: relative;
  }
  .progress-bar {
    position: absolute;
    height: 100%;
    background-color: #ff5722;
  }
  .fullscreen-btn {
    width: 30px;
    height: 30px;
  }
  .fullscreen-btn cover-image {
    width: 100%;
    height: 100%;
  }
  
  
</style>