// pages/training/videoDetail/videoDetail.js import http from '../../../utils/api' const baseUrl = require('../../../utils/baseUrl') Page({ data: { baseUrl: baseUrl, video: {}, videoUrl: '', loading: true, fullScreen: false, isPlaying: false, isMuted: false, loop: false, playbackRate: 1, currentTime: 0, duration: 0, videoTags: [], videoError: false, autoplay: false, controlsVisible: true, controlsTimer: null, lastTouchTime: 0, }, onLoad(options) { console.log('页面参数:', options) this.getVideoDetails(options.id) }, onReady() { this.videoContext = wx.createVideoContext('videoPlayer', this) console.log('视频上下文创建成功') }, onUnload() { // 清除定时器 if (this.data.controlsTimer) { clearTimeout(this.data.controlsTimer) } // 页面卸载时停止播放 if (this.videoContext) { this.videoContext.pause() } }, // 获取视频详情 getVideoDetails(id) { this.setData({ loading: true, videoError: false }) http.videoDetails({ data: { id }, success: res => { console.log('视频详情响应:', res) if (res.code === 200 && res.data) { const video = res.data console.log('视频数据:', video) // 处理视频URL let videoUrl = '' if (video.videoUrl) { videoUrl = this.data.baseUrl + video.videoUrl console.log('视频完整URL:', videoUrl) } // 处理视频标签 const tags = video.tags ? video.tags.split(',').filter(tag => tag.trim()) : [] this.setData({ video: video, videoUrl: videoUrl, videoTags: tags, loading: false }) // 设置页面标题 wx.setNavigationBarTitle({ title: video.title.substring(0, 12) + (video.title.length > 12 ? '...' : '') }) } else { wx.showToast({ title: res.msg || '视频不存在', icon: 'none', duration: 2000 }) setTimeout(() => { wx.navigateBack() }, 2000) } }, fail: err => { console.error('获取视频详情失败:', err) this.setData({ loading: false, videoError: true }) wx.showToast({ title: '加载失败,请重试', icon: 'none', duration: 2000 }) } }) }, // 返回上一页 goBack() { wx.navigateBack() }, // 视频加载完成 onVideoLoaded(e) { console.log('视频元数据加载完成:', e.detail) this.setData({ duration: e.detail.duration || 0, videoError: false }) }, // 视频播放错误 onVideoError(e) { console.error('视频播放错误详情:', e.detail) this.setData({ videoError: true, isPlaying: false }) wx.showModal({ title: '播放错误', content: '视频加载失败,请检查网络或视频链接', showCancel: true, confirmText: '重试', success: (res) => { if (res.confirm) { this.retryVideo() } } }) }, // 视频播放事件 onVideoPlay(e) { console.log('视频开始播放') this.setData({ isPlaying: true, videoError: false }) // 播放时隐藏控制栏 if (this.data.fullScreen) { this.hideControls() } }, // 视频暂停事件 onVideoPause(e) { console.log('视频暂停') this.setData({ isPlaying: false }) // 暂停时显示控制栏 if (this.data.fullScreen) { this.showControls() } }, // 视频播放结束 onVideoEnded(e) { console.log('视频播放结束') this.setData({ isPlaying: false, currentTime: 0 }) // 结束播放时显示控制栏 if (this.data.fullScreen) { this.showControls() } }, // 时间更新事件 onTimeUpdate(e) { const currentTime = e.detail.currentTime const duration = e.detail.duration // 更新当前时间和总时长 this.setData({ currentTime: currentTime, duration: duration > 0 ? duration : this.data.duration }) }, // 全屏切换事件 onFullScreenChange(e) { const fullScreen = e.detail.fullScreen console.log('全屏状态变化:', fullScreen) this.setData({ fullScreen: fullScreen, controlsVisible: !fullScreen }) if (fullScreen) { wx.setKeepScreenOn({ keepScreenOn: true }) // 进入全屏后自动播放 setTimeout(() => { this.videoContext.play() }, 300) } else { wx.setKeepScreenOn({ keepScreenOn: false }) // 退出全屏时暂停 this.videoContext.pause() } }, // 进入全屏 enterFullScreen() { this.videoContext.requestFullScreen({ direction: 90 }) }, // 退出全屏 exitFullScreen() { this.videoContext.exitFullScreen() }, // 切换播放状态 togglePlay() { console.log('切换播放状态,当前状态:', this.data.isPlaying) if (this.data.videoError) { this.retryVideo() return } if (this.data.isPlaying) { this.videoContext.pause() } else { this.videoContext.play() } }, // 切换静音 toggleMute() { const isMuted = !this.data.isMuted this.setData({ isMuted: isMuted }) this.videoContext.muted(isMuted) wx.showToast({ title: isMuted ? '已静音' : '已取消静音', icon: 'none', duration: 800 }) }, // 切换循环 toggleLoop() { const loop = !this.data.loop this.setData({ loop: loop }) this.videoContext.loop(loop) wx.showToast({ title: loop ? '开启循环播放' : '关闭循环播放', icon: 'none', duration: 800 }) }, // 切换播放速度 toggleSpeed() { const speeds = [0.5, 0.75, 1, 1.25, 1.5, 2] const currentIndex = speeds.indexOf(this.data.playbackRate) const nextIndex = (currentIndex + 1) % speeds.length const nextSpeed = speeds[nextIndex] this.setData({ playbackRate: nextSpeed }) this.videoContext.playbackRate(nextSpeed) wx.showToast({ title: `播放速度 ${nextSpeed}x`, icon: 'none', duration: 800 }) }, // 重试播放 retryVideo() { console.log('重试播放视频') this.setData({ videoError: false, loading: true }) // 重新加载视频 setTimeout(() => { this.setData({ loading: false }) if (this.videoContext) { this.videoContext.seek(0) this.videoContext.play() } }, 500) }, // 触摸控制 onTouchControl(e) { const type = e.currentTarget.dataset.type const currentTime = this.data.currentTime const duration = this.data.duration if (type === 'backward') { const newTime = Math.max(0, currentTime - 10) this.setData({ currentTime: newTime }) this.videoContext.seek(newTime) wx.showToast({ title: '-10秒', icon: 'none', duration: 500 }) } else if (type === 'forward') { const newTime = Math.min(duration, currentTime + 10) this.setData({ currentTime: newTime }) this.videoContext.seek(newTime) wx.showToast({ title: '+10秒', icon: 'none', duration: 500 }) } }, // 触摸移动 onTouchMove() { if (this.data.fullScreen) { this.showControls() this.hideControls() } }, // 显示控制栏 showControls() { this.setData({ controlsVisible: true }) // 清除之前的定时器 if (this.data.controlsTimer) { clearTimeout(this.data.controlsTimer) } // 3秒后自动隐藏控制栏 const timer = setTimeout(() => { if (this.data.isPlaying && this.data.fullScreen) { this.setData({ controlsVisible: false }) } }, 3000) this.setData({ controlsTimer: timer }) }, // 隐藏控制栏 hideControls() { if (this.data.controlsTimer) { clearTimeout(this.data.controlsTimer) } const timer = setTimeout(() => { if (this.data.isPlaying && this.data.fullScreen) { this.setData({ controlsVisible: false }) } }, 3000) this.setData({ controlsTimer: timer }) }, })