From 754865e23efb5e79818a9ff982dbde238333d66a Mon Sep 17 00:00:00 2001
From: chenghuan <chenghuanv587@qq.com>
Date: Fri, 21 Nov 2025 10:54:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=EF=BC=9A=E9=98=BF=E9=87=8C?=
 =?UTF-8?q?=E4=BA=91=E8=A7=86=E9=A2=91=E6=92=AD=E6=94=BE=E5=99=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/modules/user.ts                  |    5 +-
 api/modules/video.ts                 |   68 ++
 components/ali-video/PopupPlayer.vue |  295 ++++++++
 components/ali-video/VideoList.vue   |  123 ++++
 components/ali-video/index.vue       | 1015 ++++++++++++++++++++++++++
 components/course/VideoPlayer.vue    |  612 ++++++++++------
 pages/course/details/chapter.vue     |   42 +-
 style/tailwind.css                   |   12 +-
 types/video.d.ts                     |  210 ++++++
 9 files changed, 2132 insertions(+), 250 deletions(-)
 create mode 100644 api/modules/video.ts
 create mode 100644 components/ali-video/PopupPlayer.vue
 create mode 100644 components/ali-video/VideoList.vue
 create mode 100644 components/ali-video/index.vue
 create mode 100644 types/video.d.ts

diff --git a/api/modules/user.ts b/api/modules/user.ts
index 31174d3..0b1fbd8 100644
--- a/api/modules/user.ts
+++ b/api/modules/user.ts
@@ -11,9 +11,6 @@ import type {
   IPageData
 } from '@/types/user'
 import { SERVICE_MAP } from '@/api/config'
-import { useUserStore } from '@/stores/user'
-
-const userStore = useUserStore()
 
 /**
  * 获取用户信息
@@ -46,7 +43,7 @@ export async function getOrderList(current: number, limit: number, orderStatus:
   const res = await mainClient.request<IApiResponse<{ orders: IPageData<IOrder> }>>({
     url: 'common/buyOrder/commonBuyOrderList',
     method: 'POST',
-    data: { current, limit, orderStatus, come: '10', userId: userStore.id }
+    data: { current, limit, orderStatus, come: '10', userId: uni.getStorageSync('userInfo').id }
   })
   return res
 }
diff --git a/api/modules/video.ts b/api/modules/video.ts
new file mode 100644
index 0000000..a6a284e
--- /dev/null
+++ b/api/modules/video.ts
@@ -0,0 +1,68 @@
+// api/modules/video.ts
+/**
+ * 视频相关 API
+ * 完全保持原项目接口路径和调用方式
+ */
+
+import { createRequestClient } from '../request'
+import { SERVICE_MAP } from '../config'
+import type {
+  ICheckVideoRequest,
+  ICheckVideoResponse,
+  ISaveCoursePositionRequest,
+  ISaveCoursePositionResponse,
+  IAddErrorCourseRequest,
+  IAddErrorCourseResponse
+} from '@/types/video'
+
+const client = createRequestClient({ baseURL: SERVICE_MAP.MAIN })
+
+/**
+ * 视频相关 API
+ */
+export const videoApi = {
+  /**
+   * 检查视频并获取播放凭证
+   * 原接口: sociology/course/checkVideo
+   * 
+   * @param data 视频信息(id, video, courseId, catalogueId, chapterId 等)
+   * @returns 视频详细信息,包含 playAuth, videoId, m3u8Url, videoUrl 等
+   */
+  checkVideo(data: ICheckVideoRequest) {
+    return client.request<ICheckVideoResponse>({
+      url: 'sociology/course/checkVideo',
+      method: 'POST',
+      data
+    })
+  },
+
+  /**
+   * 保存课程播放位置
+   * 原接口: sociology/course/saveCoursePosition
+   * 
+   * @param data 包含 videoId 和 position(秒数)
+   * @returns 保存结果
+   */
+  saveCoursePosition(data: ISaveCoursePositionRequest) {
+    return client.request<ISaveCoursePositionResponse>({
+      url: 'sociology/course/saveCoursePosition',
+      method: 'POST',
+      data
+    })
+  },
+
+  /**
+   * 记录 iOS 不支持的视频
+   * 原接口: medical/course/addErrorCourse
+   * 
+   * @param data 包含 chapterId, videoId, sort
+   * @returns 记录结果
+   */
+  addErrorCourse(data: IAddErrorCourseRequest) {
+    return client.request<IAddErrorCourseResponse>({
+      url: 'medical/course/addErrorCourse',
+      method: 'POST',
+      data
+    })
+  }
+}
diff --git a/components/ali-video/PopupPlayer.vue b/components/ali-video/PopupPlayer.vue
new file mode 100644
index 0000000..c67f708
--- /dev/null
+++ b/components/ali-video/PopupPlayer.vue
@@ -0,0 +1,295 @@
+<template>
+  <view>
+    <u-popup key="1" :show="videoShow" :round="10" @close="closeVideo">
+      <view class="" style="padding: 10px;">
+        <view>
+          <view class="container">
+            <div
+              ref="videoContent"
+              @tap="renderScript.handleClick"
+              id="url-player-test"
+              :videoData="videoData"
+              :opname="opname"
+              :change:opname="renderScript.opnameChange"
+              :change:videoData="renderScript.receiveMsg"
+            ></div>
+          </view>
+        </view>
+        
+        <div class="fullScreenButton-container">
+          <div
+            :class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
+            @tap="renderScript.changeVideoScreen"
+          ></div>
+        </div>
+        
+        <view class="btn" style="text-align: center;">
+          <button type="primary" @click="closeVideo" size="mini">关闭视频</button>
+        </view>
+      </view>
+    </u-popup>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick } from 'vue'
+import type { IVideoData } from '@/types/video'
+
+// Props 定义
+interface Props {
+  videoData: IVideoData
+}
+
+const props = defineProps<Props>()
+
+// Emits 定义
+const emit = defineEmits<{
+  close: []
+}>()
+
+// 响应式数据
+const videoShow = ref(true)
+const isFullScreen = ref(false)
+const opname = ref('')
+
+// 方法: 关闭视频
+const closeVideo = () => {
+  opname.value = 'close'
+  nextTick(() => {
+    emit('close')
+  })
+}
+</script>
+
+<script module="renderScript" lang="renderjs">
+// RenderJS 模块 - 保持 Vue2 写法
+// jQuery 在 RenderJS 中通过全局变量访问
+var $ = window.jQuery || window.$
+
+export default {
+  mounted() {
+    console.log(this.options, '这是monted')
+  },
+  
+  data() {
+    return {
+      player: null,
+      curTime: null,
+      curStatus: null
+    }
+  },
+  
+  watch: {
+    curTime(val) {
+      if (this.curTime !== null && this.curStatus !== null) {
+        // 可以添加逻辑
+      }
+    }
+  },
+  
+  methods: {
+    handleClick(event, ownerInstance) {
+      console.log('event at line 165:', event)
+    },
+    
+    emitData(event, ownerInstance) {
+      ownerInstance.callMethod('recordTime', {
+        time: this.curTime,
+        status: this.curStatus
+      })
+    },
+    
+    changeVideoScreen(event, ownerInstance) {
+      var status = this.player.fullscreenService.getIsFullScreen()
+      
+      ownerInstance.callMethod('screenChange', {
+        status: status,
+        primary: status ? 'portrait' : 'landscape'
+      })
+      
+      if (status) {
+        setTimeout(() => {
+          plus.screen.lockOrientation('portrait-primary')
+          this.player.fullscreenService.cancelFullScreen()
+        }, 100)
+      } else {
+        this.player.fullscreenService.requestFullScreen()
+        setTimeout(() => {
+          plus.screen.lockOrientation('landscape-primary')
+        }, 100)
+      }
+    },
+    
+    endEmitData(event, ownerInstance) {
+      ownerInstance.callMethod('handleEnd')
+    },
+    
+    getLive() {
+      if (this.videoData.type == 1) {
+        var fullScreenButtonComponent = Aliplayer.Component({
+          init: function(status, toAddress) {
+            this.fullScreenStatus = status
+            this.$html = $('.fullScreenButton-container')
+          },
+          
+          createEl: function(el) {
+            this.$html.find('.ad').attr('src', this.adAddress)
+            var $adWrapper = this.$html.find('.ad-wrapper')
+            $adWrapper.attr('href', this.toAddress)
+            $adWrapper.click(function() {})
+            $(el).find('.prism-time-display').after(this.$html)
+          },
+          
+          playing: function(player, e) {
+            this.$html.show()
+          }
+        })
+        
+        console.log('this.currentVideoList at line 456111111111111111111111:', this.videoList)
+        
+        var player = new Aliplayer({
+          id: 'url-player-test',
+          vid: this.videoData.videoId,
+          playauth: this.videoData.playAuth,
+          encryptType: 1,
+          playConfig: {
+            EncryptType: 'AliyunVoDEncryption'
+          },
+          width: '100%',
+          height: '200px',
+          playsinline: true,
+          controlBarVisibility: 'click',
+          cover: '',
+          components: [
+            {
+              name: 'adComponent',
+              type: fullScreenButtonComponent,
+              args: ['http://101.201.146.165:8088/Pf-EH/statics/uploadFile/2024-05-10/b0f420c7-9178-41ad-9dd6-f59a64a6e190.png']
+            }
+          ],
+          skinLayout: [
+            { name: 'bigPlayButton', align: 'blabs', x: 30, y: 80 },
+            { name: 'H5Loading', align: 'cc' },
+            { name: 'errorDisplay', align: 'tlabs', x: 0, y: 0 },
+            { name: 'infoDisplay' },
+            { name: 'tooltip', align: 'blabs', x: 0, y: 56 },
+            { name: 'thumbnail' },
+            {
+              name: 'controlBar',
+              align: 'blabs',
+              x: 0,
+              y: 0,
+              children: [
+                { name: 'progress', align: 'blabs', x: 0, y: 44 },
+                { name: 'playButton', align: 'tl', x: 15, y: 12 },
+                { name: 'timeDisplay', align: 'tl', x: 10, y: 7 },
+                { name: 'prism-speed-selector', align: 'tr', x: 15, y: 12 },
+                { name: 'volume', align: 'tr', x: 5, y: 10 }
+              ]
+            }
+          ]
+        }, function(player) {})
+        
+        this.player = player
+      }
+    },
+    
+    opnameChange(newValue, oldValue, ownerVm, vm) {
+      console.log('opnameChange-----------', newValue)
+      if (newValue == 'close') {
+        if (this.player) {
+          this.player.dispose()
+        }
+      }
+    },
+    
+    receiveMsg(newValue, oldValue, ownerVm, vm) {
+      console.log('数据变化newValue', newValue)
+      if (newValue.playAuth) {
+        this.loadWebPlayerSDK()
+      }
+    },
+    
+    checkValue() {
+      console.log(this.videoData, this.videoData.playAuth, '1111888888')
+      if (!this.videoData.playAuth) {
+        setTimeout(() => {
+          this.checkValue()
+        }, 1000)
+      } else {
+        console.log('this.videoList at line 这是这只只是594:', this.currentVideoList)
+        this.getLive()
+      }
+    },
+    
+    loadWebPlayerSDK() {
+      return new Promise((resolve, reject) => {
+        // 先加载 jQuery
+        if (!window.jQuery && !window.$) {
+          const jquery_tag = document.createElement('script')
+          jquery_tag.type = 'text/javascript'
+          jquery_tag.src = 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'
+          jquery_tag.charset = 'utf-8'
+          jquery_tag.onload = () => {
+            $ = window.jQuery || window.$
+            this.loadAliPlayerSDK(resolve, reject)
+          }
+          jquery_tag.onerror = () => {
+            console.error('jQuery 加载失败')
+            reject(new Error('jQuery 加载失败'))
+          }
+          document.body.appendChild(jquery_tag)
+        } else {
+          $ = window.jQuery || window.$
+          this.loadAliPlayerSDK(resolve, reject)
+        }
+      })
+    },
+    
+    loadAliPlayerSDK(resolve, reject) {
+      const s_tag = document.createElement('script')
+      s_tag.type = 'text/javascript'
+      s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js'
+      s_tag.charset = 'utf-8'
+      s_tag.onload = () => {
+        const s_tag1 = document.createElement('script')
+        s_tag1.type = 'text/javascript'
+        s_tag1.src = 'https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js'
+        s_tag1.charset = 'utf-8'
+        s_tag1.onload = () => {
+          this.checkValue()
+          resolve()
+        }
+        s_tag1.onerror = () => {
+          console.error('阿里云播放器组件加载失败')
+          reject(new Error('阿里云播放器组件加载失败'))
+        }
+        document.body.appendChild(s_tag1)
+      }
+      s_tag.onerror = () => {
+        console.error('阿里云播放器 SDK 加载失败')
+        reject(new Error('阿里云播放器 SDK 加载失败'))
+      }
+      document.body.appendChild(s_tag)
+      
+      const l_tag = document.createElement('link')
+      l_tag.rel = 'stylesheet'
+      l_tag.href = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css'
+      document.body.appendChild(l_tag)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.fullScreenButton-container {
+  color: #fff;
+  float: right;
+  height: 35px;
+  margin-top: 6px;
+  margin-right: 5px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+</style>
diff --git a/components/ali-video/VideoList.vue b/components/ali-video/VideoList.vue
new file mode 100644
index 0000000..6666325
--- /dev/null
+++ b/components/ali-video/VideoList.vue
@@ -0,0 +1,123 @@
+<template>
+  <view class="richDetail">
+    <view
+      scroll-x="true"
+      class="detail_title video_box"
+      style="background-color: #fff"
+    >
+      <view
+        v-for="(v, i) in dataList"
+        :key="v.id"
+        :class="`video_item ${currentVideo && currentVideo.id == v.id ? 'hot' : ''}`"
+        @click="handleClick(v, i)"
+      >
+        【{{ v.type == '2' ? '音频' : '视频' }}】{{ getNumber(i + 1) }}
+      </view>
+    </view>
+
+    <slot name="richHeadImg"></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { IVideoInfo, IChapterDetail } from '@/types/video'
+
+// Props 定义
+interface Props {
+  detailInfo: IChapterDetail
+  dataList: IVideoInfo[]
+  currentVideo: IVideoInfo | null
+  changeVideoLock: boolean
+}
+
+const props = defineProps<Props>()
+
+// Emits 定义
+const emit = defineEmits<{
+  open: [video: IVideoInfo]
+}>()
+
+// 方法: 格式化序号为两位数
+const getNumber = (num: number): string => {
+  if (num >= 10) {
+    return num.toString()
+  } else {
+    return `0${num}`
+  }
+}
+
+// 方法: 处理视频点击
+const handleClick = (data: IVideoInfo, index: number) => {
+  if (props.changeVideoLock) {
+    return
+  }
+  console.log('data at line 35:', data)
+  emit('open', data)
+}
+</script>
+
+<style lang="scss" scoped>
+.commonPageBox {
+  padding: 40rpx 0;
+}
+
+.contentBox {
+  .headImage {
+    margin-bottom: 20rpx;
+  }
+
+  .detail_title {
+    padding: 0 20rpx 0;
+    font-size: 26rpx;
+    line-height: 65rpx;
+    font-weight: bold;
+    text-align: center;
+    box-sizing: border-box;
+    margin-bottom: 20rpx;
+    overflow: hidden;
+  }
+
+  .rich_box {
+    padding: 20rpx;
+    box-sizing: border-box;
+
+    p {
+      display: block;
+      text-indent: 2em;
+      letter-spacing: 2px !important;
+      line-height: 46rpx;
+    }
+  }
+}
+
+.richDetail {
+  width: 100%;
+  height: 100%;
+}
+
+.video_box {
+  width: 100%;
+  
+  .video_item {
+    width: 23%;
+    margin-right: 10rpx;
+    margin-bottom: 20rpx;
+    float: left;
+    border: 2rpx solid #2979ff;
+    background: #fff;
+    color: #2979ff;
+    text-align: center;
+    border-radius: 10rpx;
+    box-shadow: 0px 0px 6rpx 0px rgba(255, 255, 255, 1);
+  }
+
+  .video_item:nth-child(4n) {
+    margin-right: 0;
+  }
+}
+
+.hot {
+  background-color: #2979ff !important;
+  color: #fff !important;
+}
+</style>
diff --git a/components/ali-video/index.vue b/components/ali-video/index.vue
new file mode 100644
index 0000000..a89c7d3
--- /dev/null
+++ b/components/ali-video/index.vue
@@ -0,0 +1,1015 @@
+<template>
+  <view class="container" style="background-color: #000; position: relative">
+    <view style="width: 100%; height: 200px">
+      <!-- 倒计时提示 -->
+      <view v-if="showCountDown" class="showCountDownd">
+        <view class="">
+          <text class="nextText">{{ secondCountDown }} 秒后播放下一个视频</text><br />
+          <view>
+            <text class="cancelNext" @click="hideNextVideo">取消下一个</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 错误提示 -->
+      <view
+        v-if="show"
+        style="height: 100%;display: flex;align-items:center;justify-content:center;color: #fff;font-size: 38rpx;text-align: center;"
+      >
+        {{ errorTxt }}
+      </view>
+
+      <!-- 视频播放器容器 -->
+      <div
+        v-else
+        style="background-color: #000"
+        ref="videoContent"
+        @tap="renderScript.handleClick"
+        id="url-player-test"
+        :videoData="videoData"
+        :winWidth="winWidth"
+        :winHeight="winHeight"
+        :currentVideoList="currentVideoList"
+        :firstTime="firstTime"
+        :isfresh="isfresh"
+        :platform="platform"
+        :isSetFirstTime="isSetFirstTime"
+        :isChange="isChange"
+        :change:videoData="renderScript.receiveMsg"
+        :replayVideoFlag="replayVideoFlag"
+        :change:winWidth="renderScript.receiveWinWidth"
+        :change:winHeight="renderScript.receiveWinHeight"
+        :change:firstTime="renderScript.receiveFirstTime"
+        :change:replayVideoFlag="renderScript.receiveReplayVideoFlag"
+        :change:isSetFirstTime="renderScript.receiveisSetFirstTime"
+        :change:isfresh="renderScript.receiveIsfresh"
+        :change:platform="renderScript.receiveplatform"
+        :change:isChange="renderScript.receiveIsChange"
+        :change:currentVideoList="renderScript.receiveVideoList"
+      ></div>
+
+      <!-- 隐藏的通信元素 -->
+      <div @tap="renderScript.emitData" ref="videoContent1" v-show="false" class="videoContent1">
+        直接调用renderjs中的emitData的方法,传递当前播放时长
+      </div>
+      <div @tap="renderScript.endEmitData" ref="videoContent2" v-show="false" class="videoContent2">
+        监听结束方法，记录播放时长
+      </div>
+      <div @tap="renderScript.changeVideoData" ref="videoContent3" v-show="false" class="videoContent3">
+        监听切换视频方法
+      </div>
+      <div @tap="renderScript.emitSetData" ref="videoContent4" v-show="false" class="videoContent4">
+        监听切换视频方法
+      </div>
+      <div @tap="renderScript.emitopenShow" ref="videoContent5" v-show="false" class="videoContent5">
+        打开视频提示
+      </div>
+      <div @tap="renderScript.emitLoadNextVideo" ref="videoContent6" v-show="false" class="videoContent6">
+        播放下一条
+      </div>
+      <div @tap="renderScript.emitHideNextVideo" ref="videoContent7" v-show="false" class="videoContent7">
+        隐藏播放下一条界面
+      </div>
+      <div @tap="renderScript.emitReplayVideoFlagFalse" ref="videoContent8" v-show="false" class="videoContent8">
+        隐藏播放下一条界面
+      </div>
+      <div @tap="renderScript.emitUnlockChangeVideo" ref="videoContent9" v-show="false" class="videoContent9">
+        释放切换键锁
+      </div>
+
+      <!-- 全屏按钮 -->
+      <div class="fullScreenButton-container">
+        <div
+          :class="`prism-fullscreen-btn ${isFullScreen ? 'fullscreen' : ''}`"
+          @tap="renderScript.changeVideoScreen"
+        ></div>
+      </div>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue'
+import { videoApi } from '@/api/modules/video'
+import type {
+  IVideoInfo,
+  IVideoData,
+  IRecordTimeData,
+  IScreenChangeData,
+  IOpenShowData,
+  PlatformType
+} from '@/types/video'
+
+// Props 定义
+interface Props {
+  currentVideo?: IVideoInfo
+  currentVideoList?: IVideoInfo[]
+  videoTitle?: string
+  secondCountDown?: number
+  noRecored?: boolean
+}
+
+const props = defineProps<Props>()
+
+// 使用 computed 来处理默认值
+const secondCountDown = computed(() => props.secondCountDown ?? 10)
+const noRecored = computed(() => props.noRecored ?? false)
+
+// Emits 定义
+const emit = defineEmits<{
+  'child-event': [timer: any]
+  'changeScreen': [isFullScreen: boolean]
+  'changeScreenLoading': [loading: boolean]
+  'hideNextVideo': []
+  'startNextVideoCountDown': []
+  'unlockChangeVideo': []
+}>()
+
+// 获取当前实例
+const instance = getCurrentInstance()
+
+// 响应式数据
+// 响应式数据
+const reaquestFlag = ref(false)
+const show = ref(false)
+const platform = ref<PlatformType>(null)
+const isFullScreen = ref(false)
+const isfresh = ref(false)
+const isChange = ref(false)
+const isControl = ref(true)
+const timer = ref<any>(null)
+const replayVideoFlag = ref(false)
+const showCountDown = ref(false)
+const playEndBlank = ref(false)
+const videoList = ref<any[]>([])
+const replayVideoLock = ref(false)
+const firstTime = ref(0)
+const options = ref<any>({})
+const playAuth = ref('')
+const currentTime = ref<string>('')
+const videoId = ref('')
+const videoData = ref<IVideoData>({} as IVideoData)
+const isSetFirstTime = ref(false)
+const screenType = ref<any>(null)
+const videoUrl = ref<string | null>(null)
+const errorTxt = ref('此设备暂不支持观看当前视频请移步到安卓手机进行学习！')
+const winWidth = ref(0)
+const winHeight = ref(0)
+const changeVideoLock = ref(false)
+
+// 方法: 重播视频
+const replayVideo = () => {
+  if (!replayVideoLock.value) {
+    replayVideoLock.value = true
+    getLive(true, props.currentVideo)
+    console.log('重播视频:', props.currentVideo.id)
+    hideNextVideo()
+    replayVideoFlag.value = true
+    setTimeout(() => {
+      replayVideoLock.value = false
+    }, 1000)
+  }
+}
+
+// 方法: 重置重播标志
+const replayVideoFlagFalse = () => {
+  console.log('复原replayVideoFlag', replayVideoFlag.value)
+  replayVideoFlag.value = false
+}
+
+// 方法: 解锁视频切换
+const UnlockChangeVideo = () => {
+  emit('unlockChangeVideo')
+}
+
+// 方法: 隐藏下一个视频提示
+const hideNextVideo = () => {
+  console.log(11111111111111)
+  showCountDown.value = false
+  playEndBlank.value = false
+  emit('hideNextVideo')
+}
+
+// 方法: 加载下一个视频
+const loadNextVideo = () => {
+  playEndBlank.value = true
+  const _list = [...props.currentVideoList].map(item => item.id)
+  
+  const thisIndex = _list.findIndex(item => item == props.currentVideo.id)
+  console.log('播放列表', _list, props.currentVideo.id, thisIndex)
+  
+  if (thisIndex < props.currentVideoList.length - 1) {
+    showCountDown.value = true
+    emit('startNextVideoCountDown')
+  }
+}
+
+// 方法: 显示错误提示
+const openShow = (data: IOpenShowData) => {
+  errorTxt.value = data.msg || '此设备暂不支持观看当前视频请移步到安卓手机进行学习'
+  show.value = true
+}
+
+// 方法: 切换视频数据
+const changeVideoData = () => {
+  show.value = false
+  isChange.value = false
+}
+
+// 方法: 切换视频
+const changeVideo = async (data: IVideoInfo) => {
+  console.log('changeVideo+++++++++', data)
+  currentTime.value = ''
+  firstTime.value = 0
+  isSetFirstTime.value = false
+  
+  // 先设置为 false，然后在 getData 中切换为 true 来触发 renderjs
+  isChange.value = false
+  
+  await getLive(true, data)
+}
+
+// 方法: 屏幕状态改变
+const screenChange = (data: IScreenChangeData) => {
+  console.log('status at line 这是当前的状态158:', data.status, data.primary)
+  isFullScreen.value = !data.status
+  emit('changeScreen', isFullScreen.value)
+}
+
+// 方法: 控制器显示隐藏
+const controlChange = (e: any) => {
+  isControl.value = e.detail.show
+}
+
+// 方法: 播放器初始化
+const init = async (data: any, isChangeParam: boolean) => {
+  try {
+    console.log('===== init() 方法被调用 =====', data)
+    show.value = false
+    
+    // 获取平台信息
+    // @ts-ignore
+    platform.value = (typeof uni !== 'undefined' && uni.getSystemInfoSync) 
+      ? uni.getSystemInfoSync().platform === 'ios' ? 'ios' : 'android'
+      : 'h5'
+    
+    isfresh.value = true
+    isChange.value = false  // 先设置为 false，后面切换时才能触发 change
+    console.log('初始化播放器, 平台:', platform.value)
+    
+    // 获取本地存储的播放记录
+    try {
+      const storedList = uni.getStorageSync('videoOssList')
+      if (storedList) {
+        videoList.value = JSON.parse(storedList)
+      }
+    } catch (e) {
+      console.warn('读取本地播放记录失败:', e)
+      videoList.value = []
+    }
+    
+    options.value = data.currentVideo || {}
+    videoId.value = options.value.video || options.value.videoId || ''
+    console.log('视频ID:', videoId.value)
+    
+    await getLive(isChangeParam, options.value)
+  } catch (error) {
+    console.error('初始化播放器失败:', error)
+    show.value = true
+    errorTxt.value = '播放器初始化失败'
+  }
+}
+
+// 方法: 配置播放项
+const getData = async (data: IVideoData, isChangeParam: boolean) => {
+  try {
+    if (!isSetFirstTime.value) {
+      const netWork = data.userCourseVideoPositionEntity?.position || 0
+      let list: any[] = []
+      
+      // 安全地获取本地存储
+      try {
+        const storedList = uni.getStorageSync('videoOssList')
+        if (storedList) {
+          list = JSON.parse(storedList)
+        }
+      } catch (e) {
+        console.warn('读取本地播放记录失败:', e)
+        list = []
+      }
+      
+      const index = list.findIndex((e) => e.id == data.id)
+      console.log('视频ID:', data.id, '本地记录索引:', index)
+      
+      // 计算初始播放时间(取本地和服务器的最大值)
+      if (netWork > 0) {
+        if (index >= 0) {
+          firstTime.value = Math.max(list[index].time || 0, netWork)
+        } else {
+          firstTime.value = netWork
+        }
+      } else {
+        if (index >= 0) {
+          firstTime.value = list[index].time || 0
+        } else {
+          firstTime.value = 0
+        }
+      }
+      
+      videoData.value = {
+        ...data,
+        firstTime: firstTime.value
+      }
+      
+      console.log('初始播放时间:', firstTime.value)
+      console.log('videoData 已设置:', videoData.value)
+      console.log('videoData.value.playAuth:', videoData.value.playAuth)
+      console.log('videoData.value.videoId:', videoData.value.videoId)
+      
+      // 触发 renderjs 更新 - 切换 isChange 的值（从 false 到 true）
+      isChange.value = true
+      console.log('触发 isChange:', isChange.value)
+      
+      // 强制更新以触发 renderjs 响应
+      if (instance?.proxy) {
+        instance.proxy.$forceUpdate()
+        console.log('已调用 $forceUpdate()')
+      }
+      
+      // 安全地保存到本地存储
+      try {
+        uni.setStorageSync('videoOssList', JSON.stringify(list))
+      } catch (e) {
+        console.warn('保存本地播放记录失败:', e)
+      }
+    }
+    isSetFirstTime.value = true
+  } catch (error) {
+    console.error('配置播放数据失败:', error)
+    // 设置默认值
+    videoData.value = { ...data, firstTime: 0 }
+    firstTime.value = 0
+    isSetFirstTime.value = true
+  }
+}
+
+// 方法: 记录播放时间到本地
+const recordTime = (data: IRecordTimeData) => {
+  currentTime.value = data.time
+  
+  let list: any[] = []
+  if (uni.getStorageSync('videoOssList')) {
+    list = JSON.parse(uni.getStorageSync('videoOssList'))
+  }
+  
+  const index = list.findIndex((e) => e.id == videoData.value.id)
+  
+  if (list.length > 0 && index >= 0) {
+    list[index] = {
+      ...videoData.value,
+      time: data.time
+    }
+  } else {
+    list.push({
+      ...videoData.value,
+      time: data.time
+    })
+  }
+  
+  uni.setStorageSync('videoOssList', JSON.stringify(list))
+}
+
+// 方法: 获取播放凭证
+const getLive = async (isChangeParam: boolean, newVideoData?: IVideoInfo) => {
+  if (reaquestFlag.value) {
+    uni.showToast({
+      title: '操作太快了,歇一下吧',
+      icon: 'none'
+    })
+    return
+  }
+  
+  reaquestFlag.value = true
+  isfresh.value = false
+  
+  let data: any = { ...options.value }
+  if (isChangeParam && newVideoData) {
+    data = { ...newVideoData }
+  }
+  
+  try {
+    const res = await videoApi.checkVideo(data)
+    console.log('获取播放凭证成功', res.video)
+    reaquestFlag.value = false
+    
+    // iOS 兼容性处理
+    if (platform.value === 'ios') {
+      if (res.video.type == '1' && (!res.video.m3u8Url || res.video.m3u8Url === '')) {
+        show.value = true
+        errorTxt.value = '抱歉，苹果手机不支持此加密视频格式'
+        
+        // 记录 iOS 不支持的视频
+        try {
+          await videoApi.addErrorCourse({
+            chapterId: res.video.chapterId || 0,
+            videoId: res.video.id,
+            sort: res.video.sort || 0
+          })
+          console.log('记录iOS不支持的视频成功')
+        } catch (error) {
+          console.log('记录iOS不支持的视频失败:', error)
+        }
+        
+        UnlockChangeVideo()
+        
+        uni.showModal({
+          content: '抱歉，苹果手机不支持此加密视频格式，您可以在安卓端观看本视频',
+          confirmText: '知道了',
+          showCancel: false
+        })
+        return
+      }
+    }
+    
+    let videoDataTemp: any = { ...res.video }
+    
+    if (res.video.type == '1') {
+      const playAuthValue = (res.video.playAuth || '').replace(/=/g, '')
+      videoDataTemp = {
+        ...videoDataTemp,
+        videoId: res.video.video || res.video.videoId,
+        playAuth: playAuthValue
+      }
+      playAuth.value = playAuthValue
+      await getData(videoDataTemp, isChangeParam)
+    } else {
+      console.log('普通视频处理', res.video)
+      videoDataTemp = {
+        ...videoDataTemp,
+        playAuth: String(new Date().getTime())
+      }
+      await getData(videoDataTemp, isChangeParam)
+    }
+    
+    console.log('视频数据处理完成', videoDataTemp)
+  } catch (e) {
+    console.error('获取播放凭证失败:', e)
+    reaquestFlag.value = false
+    show.value = true
+    errorTxt.value = '获取播放地址失败'
+  }
+}
+
+// 方法: 处理播放结束
+const handleEnd = async () => {
+  const list = JSON.parse(uni.getStorageSync('videoOssList'))
+  const data = list.find((e: any) => e.id == videoData.value.id)
+  currentTime.value = data.time
+  console.log('this.currentTime at line 这是结束的时候掉的存储视频:', currentTime.value)
+  await setVideoTime()
+}
+
+// 方法: 保存播放时间到服务器
+const setVideoTime = async (time?: number) => {
+  console.log('是否走了存储视屏,' + videoData.value.id, time, currentTime.value)
+  const _time = time || currentTime.value
+  
+  const data = {
+    videoId: videoData.value.id,
+    position: _time
+  }
+  
+  try {
+    const res = await videoApi.saveCoursePosition(data)
+    console.log('存储视屏时长接口返回信息', res)
+  } catch (e) {
+    console.log('存储进度报错', e)
+  }
+}
+
+// 方法: 设置初始播放时间
+const setVideoFirtsetTime = async (data: { time: number }) => {
+  currentTime.value = firstTime.value
+  console.log('setVideoFirtsetTime播放时间:', data.time)
+  await setVideoTime(data.time)
+}
+
+// 监听 timer 变化
+watch(timer, (newValue) => {
+  emit('child-event', newValue)
+})
+
+// 生命周期: 挂载
+onMounted(() => {
+  console.log('视频播放器组件已挂载')
+  
+  // 获取窗口尺寸
+  try {
+    const systemInfo = uni.getSystemInfoSync()
+    winWidth.value = systemInfo.windowWidth
+    winHeight.value = systemInfo.windowHeight
+  } catch (e) {
+    console.warn('获取系统信息失败:', e)
+  }
+})
+
+// 生命周期: 卸载前
+onBeforeUnmount(async () => {
+  console.log('视频播放器组件即将卸载')
+  
+  try {
+    // 保存播放进度
+    await handleEnd()
+    
+    // 清除定时器
+    if (timer.value) {
+      clearInterval(timer.value)
+      timer.value = null
+    }
+    
+    // 恢复屏幕方向
+    if (typeof plus !== 'undefined' && plus.screen) {
+      plus.screen.lockOrientation('portrait-primary')
+    }
+  } catch (error) {
+    console.error('组件卸载处理失败:', error)
+  }
+})
+
+// 暴露方法给父组件
+defineExpose({
+  init,
+  changeVideo,
+  replayVideo,
+  hideNextVideo,
+  loadNextVideo
+})
+</script>
+
+
+<script module="renderScript" lang="renderjs">
+// RenderJS 模块 - 保持 Vue2 写法
+var videoData = null
+var currentVideoList = null
+var _seconds = 0
+var ReplayVideoFlag = false
+var curStatus = null
+var diff = 0
+var pauseTime = 0
+var myplayer = undefined
+
+// jQuery 在 RenderJS 中通过全局变量访问
+var $ = window.jQuery || window.$
+
+export default {
+  mounted() {
+    console.log(this.options, '这是monted')
+    this.loadWebPlayerSDK()
+  },
+  
+  data() {
+    return {
+      player: null,
+      videoTimer: null
+    }
+  },
+  
+  methods: {
+    handleClick(event, ownerInstance) {
+      console.log('是否了走了点击video事件', event)
+    },
+    
+    emitData(event, ownerInstance) {
+      ownerInstance.callMethod('recordTime', {
+        time: _seconds,
+        status: curStatus
+      })
+    },
+    
+    receiveReplayVideoFlag(newValue, oldValue, ownerVm, vm) {
+      console.log('newValue重新播放', newValue, myplayer)
+      ReplayVideoFlag = newValue
+      if (newValue) {
+        $('.videoContent8').click()
+      }
+    },
+    
+    emitReplayVideoFlagFalse(event, ownerInstance) {
+      ownerInstance.callMethod('replayVideoFlagFalse')
+    },
+    
+    emitUnlockChangeVideo(event, ownerInstance) {
+      ownerInstance.callMethod('UnlockChangeVideo')
+    },
+    
+    async receiveFirstTime(newValue, oldValue, ownerVm, vm) {
+      // 接收 firstTime 变化
+    },
+    
+    async receiveisSetFirstTime(newValue, oldValue, ownerVm, vm) {
+      console.log('是否刚开始设置播放时间', newValue, this.firstTime, myplayer)
+    },
+    
+    emitSetData(event, ownerInstance) {
+      ownerInstance.callMethod('setVideoFirtsetTime', {
+        time: _seconds
+      })
+    },
+    
+    emitHideNextVideo(event, ownerInstance) {
+      ownerInstance.callMethod('hideNextVideo')
+    },
+    
+    emitLoadNextVideo(event, ownerInstance) {
+      ownerInstance.callMethod('loadNextVideo')
+    },
+    
+    emitopenShow(event, ownerInstance) {
+      ownerInstance.callMethod('openShow', {
+        msg: '播放出错啦！'
+      })
+    },
+    
+    // 全屏切换事件
+    changeVideoScreen(event, ownerInstance) {
+      var status = myplayer.fullscreenService.getIsFullScreen()
+      console.log('this.$platform--------', this.platform)
+      
+      if (this.platform != 'ios') {
+        ownerInstance.callMethod('screenChange', {
+          status: status,
+          primary: status ? 'portrait' : 'landscape'
+        })
+      }
+      
+      if (status) {
+        if (this.platform != 'ios') {
+          console.log('恢复竖版')
+          setTimeout(() => {
+            plus.screen.lockOrientation('portrait-primary')
+            myplayer.fullscreenService.cancelFullScreen()
+          }, 100)
+        }
+      } else {
+        myplayer.fullscreenService.requestFullScreen()
+        if (this.platform != 'ios') {
+          setTimeout(() => {
+            plus.screen.lockOrientation('landscape-primary')
+          }, 100)
+        } else {
+          console.log('不要旋转, 使用原生全屏')
+        }
+      }
+    },
+    
+    changeVideoData(event, ownerInstance) {
+      ownerInstance.callMethod('changeVideoData')
+    },
+    
+    endEmitData(event, ownerInstance) {
+      ownerInstance.callMethod('handleEnd')
+    },
+    
+    // renderjs阿里云播放器引入与配置
+    getLive() {
+      console.log('阿里云播放器引入与配置:', this.firstTime, videoData)
+      
+      $('#url-player-test').empty()
+      pauseTime = 0
+      
+      var fullScreenButtonComponent = Aliplayer.Component({
+        init: function(status, toAddress) {
+          this.fullScreenStatus = status
+          this.$html = $('.fullScreenButton-container')
+        },
+        
+        createEl: function(el) {
+          this.$html.find('.ad').attr('src', this.adAddress)
+          var $adWrapper = this.$html.find('.ad-wrapper')
+          $adWrapper.attr('href', this.toAddress)
+          $adWrapper.click(function() {})
+          $(el).find('.prism-time-display').after(this.$html)
+        },
+        
+        playing: function(player, e) {
+          this.$html.show()
+        }
+      })
+      
+      var playerOptions = {
+        id: 'url-player-test',
+        width: '100%',
+        height: '100%',
+        qualitySort: 'asc',
+        cover: '',
+        autoplay: true,
+        isLive: false,
+        rePlay: false,
+        playsinline: true,
+        controlBarVisibility: 'hover',
+        useH5Prism: true,
+        components: [
+          {
+            name: 'adComponent',
+            type: fullScreenButtonComponent,
+            args: ['http://101.201.146.165:8088/Pf-EH/statics/uploadFile/2024-05-10/b0f420c7-9178-41ad-9dd6-f59a64a6e190.png']
+          },
+          {
+            name: 'RateComponent',
+            type: AliPlayerComponent.RateComponent
+          }
+        ],
+        skinLayout: [
+          { name: 'bigPlayButton', align: 'blabs', x: 30, y: 80 },
+          { name: 'H5Loading', align: 'cc' },
+          { name: 'errorDisplay', align: 'tlabs', x: 0, y: 0 },
+          { name: 'infoDisplay' },
+          { name: 'tooltip', align: 'blabs', x: 0, y: 56 },
+          { name: 'thumbnail' },
+          {
+            name: 'controlBar',
+            align: 'blabs',
+            x: 0,
+            y: 0,
+            children: [
+              { name: 'progress', align: 'blabs', x: 0, y: 44 },
+              { name: 'playButton', align: 'tl', x: 15, y: 12 },
+              { name: 'timeDisplay', align: 'tl', x: 10, y: 7 },
+              { name: 'prism-speed-selector', align: 'tr', x: 15, y: 12 },
+              { name: 'volume', align: 'tr', x: 5, y: 10 }
+            ]
+          }
+        ]
+      }
+      
+      // 根据视频类型配置播放器
+      console.log('视频类型判断:', 'type=', videoData.type, 'm3u8Url=', videoData.m3u8Url, 'videoUrl=', videoData.videoUrl)
+      
+      if (videoData.type == 1) {
+        if (videoData.m3u8Url == null || videoData.m3u8Url == '') {
+          console.log('这是私有加密的视频')
+          if (this.platform == 'ios') {
+            $('.videoContent5').click()
+          } else {
+            playerOptions = {
+              ...playerOptions,
+              vid: videoData.videoId,
+              playauth: videoData.playAuth,
+              encryptType: 1,
+              playConfig: {
+                EncryptType: 'AliyunVoDEncryption'
+              }
+            }
+            console.log('配置私有加密播放器:', playerOptions)
+          }
+        } else if (videoData.m3u8Url != null && videoData.m3u8Url != '') {
+          playerOptions = {
+            ...playerOptions,
+            source: videoData.m3u8Url
+          }
+          console.log('这是标准加密的视频', videoData.id, videoData.m3u8Url)
+          console.log('播放器配置:', playerOptions)
+        }
+      } else {
+        playerOptions = {
+          ...playerOptions,
+          source: videoData.videoUrl
+        }
+        console.log('这是没有加密的视频')
+      }
+      
+      var player = new Aliplayer(playerOptions, function(player) {})
+      this.player = player
+      myplayer = player
+      
+      // 播放器事件监听
+      player.on('ready', function() {
+        console.log('播放器准备就绪，开始播放')
+        player.play()
+        $('.videoContent9').click()
+      })
+      
+      player.on('play', function() {
+        var videoDurationTimes = parseInt(player.getDuration())
+        console.log('开始播放------', videoDurationTimes, pauseTime)
+        $('.videoContent7').click()
+        
+        if (pauseTime > 0) {
+          if (pauseTime == videoDurationTimes) {
+            return
+          } else {
+            player.seek(pauseTime)
+          }
+        }
+      })
+      
+      player.one('canplay', function() {
+        var videoDurationTimes = parseInt(player.getDuration())
+        console.log('视频总长度', parseInt(player.getDuration()), parseInt(player.getCurrentTime()))
+        if (videoData.firstTime < videoDurationTimes) {
+          player.seek(videoData.firstTime)
+        } else {
+          player.seek(0)
+        }
+      })
+      
+      myplayer.on('playing', function() {
+        console.log('正在播放...')
+      })
+      
+      myplayer.on('timeupdate', function() {
+        var _time = parseInt(player.getCurrentTime())
+        curStatus = player.getStatus()
+        
+        if (_seconds != _time) {
+          _seconds = _time
+          diff++
+          if (diff % 60 === 0) {
+            console.log('符合---------')
+            $('.videoContent4').click()
+            diff = 0
+          }
+          $('.videoContent1').click()
+        }
+      })
+      
+      myplayer.on('ended', function() {
+        console.log('播放完毕')
+        $('.videoContent2').click()
+        $('.videoContent6').click()
+      })
+      
+      player.on('pause', function() {
+        pauseTime = parseInt(player.getCurrentTime())
+        player.pause(true)
+        console.log('触发暂停', pauseTime)
+      })
+      
+      myplayer.on('error', function() {
+        console.log('播放出错')
+        $('.videoContent5').click()
+      })
+    },
+    
+    async receiveIsfresh(newValue) {
+      console.log('是否走了刷新销毁方法:', myplayer)
+      if (myplayer) {
+        myplayer.dispose()
+      }
+    },
+    
+    async receiveplatform(newValue) {
+      // 接收 platform 变化
+    },
+    
+    async receiveIsChange(newValue) {
+      console.log('receiveIsChange 触发:', newValue, 'videoData:', videoData, 'currentVideoList:', currentVideoList)
+      if (newValue) {
+        // 检查数据是否准备好
+        if (videoData && videoData.playAuth && currentVideoList) {
+          console.log('数据已准备好，开始播放')
+          this.getLive()
+        } else {
+          console.log('数据未准备好，等待...', 'videoData:', !!videoData, 'playAuth:', !!videoData?.playAuth, 'currentVideoList:', !!currentVideoList)
+        }
+      }
+    },
+    
+    receiveVideoList(newValue, oldValue, ownerVm, vm) {
+      console.log('receiveVideoList 接收到视频列表:', newValue)
+      currentVideoList = newValue
+      // 只赋值，不触发播放，等待 isChange 触发
+    },
+    
+    receiveMsg(newValue, oldValue, ownerVm, vm) {
+      console.log('receiveMsg 接收到新数据:', newValue)
+      videoData = newValue
+      // 只赋值，不触发播放，等待 isChange 触发
+    },
+    
+    receiveWinWidth(newValue, oldValue, ownerVm, vm) {
+      console.log('newValue', newValue)
+    },
+    
+    receiveWinHeight(newValue, oldValue, ownerVm, vm) {
+      console.log('newValue', newValue)
+    },
+    
+    checkValue() {
+      console.log('checkValue 检查:', 'videoData=', videoData, 'currentVideoList=', currentVideoList)
+      // 不再无限循环检查，而是等待 receiveMsg 和 receiveVideoList 触发
+      if (videoData && videoData.playAuth && currentVideoList && currentVideoList.length > 0) {
+        console.log('数据已准备好，开始播放')
+        this.getLive()
+      } else {
+        console.log('等待数据准备...')
+      }
+    },
+    
+    loadWebPlayerSDK() {
+      return new Promise((resolve, reject) => {
+        // 先加载 jQuery
+        if (!window.jQuery && !window.$) {
+          const jquery_tag = document.createElement('script')
+          jquery_tag.type = 'text/javascript'
+          jquery_tag.src = 'https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js'
+          jquery_tag.charset = 'utf-8'
+          jquery_tag.onload = () => {
+            // jQuery 加载完成后,更新全局变量
+            $ = window.jQuery || window.$
+            this.loadAliPlayerSDK(resolve, reject)
+          }
+          jquery_tag.onerror = () => {
+            console.error('jQuery 加载失败')
+            reject(new Error('jQuery 加载失败'))
+          }
+          document.body.appendChild(jquery_tag)
+        } else {
+          // jQuery 已存在
+          $ = window.jQuery || window.$
+          this.loadAliPlayerSDK(resolve, reject)
+        }
+      })
+    },
+    
+    loadAliPlayerSDK(resolve, reject) {
+      const s_tag = document.createElement('script')
+      s_tag.type = 'text/javascript'
+      s_tag.src = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js'
+      s_tag.charset = 'utf-8'
+      s_tag.onload = () => {
+        const s_tag1 = document.createElement('script')
+        s_tag1.type = 'text/javascript'
+        s_tag1.src = 'https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js'
+        s_tag1.charset = 'utf-8'
+        s_tag1.onload = () => {
+          this.checkValue()
+          resolve()
+        }
+        s_tag1.onerror = () => {
+          console.error('阿里云播放器组件加载失败')
+          reject(new Error('阿里云播放器组件加载失败'))
+        }
+        document.body.appendChild(s_tag1)
+      }
+      s_tag.onerror = () => {
+        console.error('阿里云播放器 SDK 加载失败')
+        reject(new Error('阿里云播放器 SDK 加载失败'))
+      }
+      document.body.appendChild(s_tag)
+      
+      const l_tag = document.createElement('link')
+      l_tag.rel = 'stylesheet'
+      l_tag.href = 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css'
+      document.body.appendChild(l_tag)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.cancelNext {
+  display: inline-block;
+  margin-right: 20rpx;
+  border-radius: 10rpx;
+  margin-top: 10rpx;
+  padding: 10rpx 20rpx !important;
+  background-color: #fff !important;
+  color: #000;
+  text-align: center;
+  line-height: 50rpx;
+}
+
+.showCountDownd {
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.6);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  color: #fff;
+  font-size: 38rpx;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  right: 10rpx;
+  z-index: 4;
+}
+
+.container {
+  width: 100vw;
+  height: auto;
+}
+
+.fullScreenButton-container {
+  color: #fff;
+  float: right;
+  height: 35px;
+  margin-top: 6px;
+  margin-right: 5px;
+  display: flex;
+  align-items: center;
+  position: relative;
+}
+</style>
diff --git a/components/course/VideoPlayer.vue b/components/course/VideoPlayer.vue
index fc17685..d14fb91 100644
--- a/components/course/VideoPlayer.vue
+++ b/components/course/VideoPlayer.vue
@@ -1,242 +1,394 @@
 <template>
-  <view class="video-player">
-    <!-- 视频播放器 -->
-    <video
-      v-if="currentVideo"
-      :id="videoId"
-      :src="currentVideo.url"
-      :title="currentVideo.title"
-      :controls="true"
-      :show-fullscreen-btn="true"
-      :show-play-btn="true"
-      :enable-progress-gesture="true"
-      :object-fit="objectFit"
-      class="video-element"
-      @fullscreenchange="handleFullscreenChange"
-      @ended="handleVideoEnd"
-      @error="handleVideoError"
-    />
-    
-    <!-- 自动播放下一个提示 -->
-    <view v-if="showCountDown && hasNext" class="countdown-overlay">
-      <view class="countdown-content">
-        <text class="countdown-text">{{ countDownSeconds }}秒后自动播放下一个</text>
-        <wd-button size="small" @click="cancelAutoPlay">
-          取消自动播放
-        </wd-button>
-      </view>
-    </view>
-  </view>
+  <div class="ali-player-wrapper" :style="{ background: '#000' }">
+    <div v-if="showError" class="player-error">{{ errorText }}</div>
+
+    <div ref="playerContainer" class="player-container" :style="{ width: '100%', height: playerHeight }"></div>
+
+    <!-- 倒计时覆盖（可选，父层也可以自行实现） -->
+    <div v-if="showCountDown" class="countdown-overlay">
+      <div class="countdown-text">{{ countDownSeconds }} 秒后播放下一个视频</div>
+      <button class="btn-cancel" @click="cancelNext">取消下一个</button>
+    </div>
+
+    <!-- 控制按钮示例（父层应该控制 UI，我仅提供常用API按钮用于调试） -->
+    <div class="player-controls" style="display:none;">
+      <button @click="play()">播放</button>
+      <button @click="pause()">暂停</button>
+      <button @click="replay()">重播</button>
+      <button @click="enterFullscreen()">全屏</button>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts">
-import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
-import type { IVideo } from '@/types/course'
+<script lang="ts">
+import { defineComponent, ref, onMounted, onBeforeUnmount, watch, PropType, nextTick } from 'vue';
 
-interface Props {
-  videoList: IVideo[]
-  currentIndex: number
-  noRecored?: boolean  // 是否为试听（不记录进度）
-}
+type Platform = 'web' | 'app-ios' | 'app-android';
 
-const props = defineProps<Props>()
+export default defineComponent({
+  name: 'AliyunPlayer',
+  props: {
+    // videoData: should include fields similar to original: type, m3u8Url, videoUrl, videoId, playAuth, firstTime, id...
+    videoData: { type: Object as PropType<Record<string, any>>, required: true },
+    // platform hint: affects screen lock behavior; default web
+    platform: { type: String as PropType<Platform>, default: 'web' },
+    // height for player area
+    height: { type: String, default: '200px' },
+    // auto start playback
+    autoplay: { type: Boolean, default: true },
+    // how often to auto-save progress in seconds (default 60)
+    autoSaveInterval: { type: Number, default: 60 },
+    // localStorage key prefix for resume data
+    storageKeyPrefix: { type: String, default: 'videoOssList' },
+    // flag: in APP environment should use WebView (true) or try to run player directly in page (false)
+    useWebViewForApp: { type: Boolean, default: false },
+    // urls for loading Aliplayer (allow overriding if needed)
+    playerScriptUrl: { type: String, default: 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/aliplayer-min.js' },
+    playerComponentsUrl: { type: String, default: 'https://player.alicdn.com/aliplayer/presentation/js/aliplayercomponents.min.js' },
+    playerCssUrl: { type: String, default: 'https://g.alicdn.com/apsara-media-box/imp-web-player/2.20.3/skins/default/aliplayer-min.css' },
+  },
+  emits: [
+    'ready',
+    'play',
+    'pause',
+    'timeupdate',
+    'progress-save', // payload: { videoId, position }
+    'ended',
+    'error',
+    'request-playauth', // in case parent wants to fetch playAuth separately
+    'change-screen',
+    'load-next' // when ended and parent should load next
+  ],
+  setup(props, { emit, expose }) {
+    const playerContainer = ref<HTMLElement | null>(null);
+    const playerInstance = ref<any | null>(null);
+    const scriptLoaded = ref(false);
+    const timerDiff = ref(0);
+    const currentSeconds = ref(0);
+    const pauseTime = ref(0);
+    const saveCounter = ref(0);
+    const autoSaveIntervalId = ref<number | null>(null);
+    const showCountDown = ref(false);
+    const countDownSeconds = ref(5);
+    const countdownTimerId = ref<number | null>(null);
+    const showError = ref(false);
+    const errorText = ref('');
 
-const emit = defineEmits<{
-  end: []
-  fullscreen: [isFullScreen: boolean]
-  change: [index: number]
-}>()
+    const playerHeight = props.height;
 
-const videoId = 'course-video-player'
-const videoContext = ref<any>(null)
-const objectFit = ref<'contain' | 'fill' | 'cover'>('contain')
-const showCountDown = ref(false)
-const countDownSeconds = ref(10)
-const countDownTimer = ref<any>(null)
-
-/**
- * 当前视频
- */
-const currentVideo = computed(() => {
-  if (props.videoList.length === 0) return null
-  return props.videoList[props.currentIndex] || null
-})
-
-/**
- * 是否有下一个视频
- */
-const hasNext = computed(() => {
-  return props.currentIndex < props.videoList.length - 1
-})
-
-/**
- * 初始化视频上下文
- */
-const initVideoContext = () => {
-  videoContext.value = uni.createVideoContext(videoId)
-}
-
-/**
- * 视频播放结束
- */
-const handleVideoEnd = () => {
-  emit('end')
-  
-  // 如果有下一个视频，开始倒计时
-  if (hasNext.value) {
-    startCountDown()
-  }
-}
-
-/**
- * 开始倒计时
- */
-const startCountDown = () => {
-  showCountDown.value = true
-  countDownSeconds.value = 10
-  
-  countDownTimer.value = setInterval(() => {
-    countDownSeconds.value--
-    
-    if (countDownSeconds.value <= 0) {
-      stopCountDown()
-      playNext()
-    }
-  }, 1000)
-}
-
-/**
- * 停止倒计时
- */
-const stopCountDown = () => {
-  if (countDownTimer.value) {
-    clearInterval(countDownTimer.value)
-    countDownTimer.value = null
-  }
-  showCountDown.value = false
-}
-
-/**
- * 取消自动播放
- */
-const cancelAutoPlay = () => {
-  stopCountDown()
-}
-
-/**
- * 播放下一个视频
- */
-const playNext = () => {
-  if (hasNext.value) {
-    emit('change', props.currentIndex + 1)
-  }
-}
-
-/**
- * 全屏变化
- */
-const handleFullscreenChange = (e: any) => {
-  const isFullScreen = e.detail.fullScreen
-  emit('fullscreen', isFullScreen)
-  
-  // 全屏时使用 cover 模式
-  objectFit.value = isFullScreen ? 'cover' : 'contain'
-}
-
-/**
- * 视频错误
- */
-const handleVideoError = (e: any) => {
-  console.error('视频播放错误:', e)
-  uni.showToast({
-    title: '课程视频播放组件正在开发中，现在还不能播放视频',
-    icon: 'none'
-  })
-}
-
-/**
- * 播放视频
- */
-const play = () => {
-  if (videoContext.value) {
-    videoContext.value.play()
-  }
-}
-
-/**
- * 暂停视频
- */
-const pause = () => {
-  if (videoContext.value) {
-    videoContext.value.pause()
-  }
-}
-
-/**
- * 停止视频
- */
-const stop = () => {
-  if (videoContext.value) {
-    videoContext.value.stop()
-  }
-}
-
-// 监听视频变化，重新播放
-watch(() => props.currentIndex, () => {
-  stopCountDown()
-  // 延迟播放，确保视频元素已更新
-  setTimeout(() => {
-    play()
-  }, 300)
-})
-
-onMounted(() => {
-  initVideoContext()
-})
-
-onUnmounted(() => {
-  stopCountDown()
-  stop()
-})
-
-// 暴露方法给父组件
-defineExpose({
-  play,
-  pause,
-  stop,
-  cancelAutoPlay: stopCountDown
-})
-</script>
-
-<style lang="scss" scoped>
-.video-player {
-  position: relative;
-  width: 100%;
-  background-color: #000;
-  
-  .video-element {
-    width: 100%;
-    height: 400rpx;
-  }
-  
-  .countdown-overlay {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background: rgba(0, 0, 0, 0.7);
-    padding: 20rpx;
-    
-    .countdown-content {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      
-      .countdown-text {
-        color: #fff;
-        font-size: 28rpx;
+    // helper: localStorage save/load (simple array of {id, time})
+    function loadResumeList(): Array<any> {
+      try {
+        const raw = localStorage.getItem(props.storageKeyPrefix);
+        return raw ? JSON.parse(raw) : [];
+      } catch (e) {
+        return [];
       }
     }
+    function saveResumeItem(videoId: any, time: number) {
+      try {
+        const list = loadResumeList();
+        const idx = list.findIndex((i: any) => i.id === videoId);
+        if (idx >= 0) list[idx].time = time;
+        else list.push({ id: videoId, time });
+        localStorage.setItem(props.storageKeyPrefix, JSON.stringify(list));
+      } catch (e) { /* ignore */ }
+    }
+
+    // dynamic load aliplayer script + css
+    function loadAliplayer(): Promise<void> {
+      if ((window as any).Aliplayer) {
+        scriptLoaded.value = true;
+        return Promise.resolve();
+      }
+      return new Promise((resolve, reject) => {
+        // css
+        const link = document.createElement('link');
+        link.rel = 'stylesheet';
+        link.href = props.playerCssUrl;
+        document.head.appendChild(link);
+
+        // main script
+        const s = document.createElement('script');
+        s.src = props.playerScriptUrl;
+        s.onload = () => {
+          // components script
+          const s2 = document.createElement('script');
+          s2.src = props.playerComponentsUrl;
+          s2.onload = () => {
+            scriptLoaded.value = true;
+            resolve();
+          };
+          s2.onerror = () => reject(new Error('aliplayer components load failed'));
+          document.body.appendChild(s2);
+        };
+        s.onerror = () => reject(new Error('aliplayer load failed'));
+        document.body.appendChild(s);
+      });
+    }
+
+    // initialize player with videoData
+    async function initPlayer() {
+      showError.value = false;
+      if (props.useWebViewForApp && props.platform !== 'web') {
+        // In-app recommended to use WebView. Emit event so parent can take over.
+        emit('error', { message: 'App environment required WebView. Set useWebViewForApp=false to attempt in-page' });
+        showError.value = true;
+        errorText.value = 'App environment recommended to use WebView for Aliplayer';
+        return;
+      }
+
+      await loadAliplayer();
+
+      // choose options
+      const v = props.videoData || {};
+      let options: Record<string, any> = {
+        id: (playerContainer.value as HTMLElement).id || 'ali-player-' + Math.random().toString(36).slice(2),
+        width: '100%',
+        height: '100%',
+        autoplay: props.autoplay,
+        isLive: false,
+        rePlay: false,
+        playsinline: true,
+        controlBarVisibility: 'hover',
+        useH5Prism: true,
+        // skinLayout can be extended if needed
+        skinLayout: [
+          { name: 'bigPlayButton', align: 'cc' },
+          { name: 'H5Loading', align: 'cc' },
+          { name: 'errorDisplay', align: 'tlabs' },
+          { name: 'controlBar', align: 'blabs', children: [
+            { name: 'progress', align: 'blabs' },
+            { name: 'playButton', align: 'tl' },
+            { name: 'timeDisplay', align: 'tl' },
+            { name: 'prism-speed-selector', align: 'tr' },
+            { name: 'volume', align: 'tr' }
+          ] }
+        ]
+      };
+
+      // decide source mode
+      if (v.type === 1) {
+        if (!v.m3u8Url) {
+          // private encrypted: require vid+playAuth
+          if (!v.videoId || !v.playAuth) {
+            // parent might need to request playAuth
+            emit('request-playauth', v);
+            showError.value = true;
+            errorText.value = '播放凭证缺失';
+            return;
+          }
+          options = {
+            ...options,
+            vid: v.videoId,
+            playauth: v.playAuth,
+            encryptType: 1,
+            playConfig: { EncryptType: 'AliyunVoDEncryption' }
+          };
+        } else {
+          options = { ...options, source: v.m3u8Url };
+        }
+      } else {
+        // not encrypted
+        options = { ...options, source: v.videoUrl };
+      }
+
+      // add rate component by default
+      options.components = [
+        { name: 'RateComponent', type: (window as any).AliPlayerComponent?.RateComponent }
+      ];
+
+      // create player
+      try {
+        // ensure container has an id
+        if (playerContainer.value && !(playerContainer.value as HTMLElement).id) {
+          (playerContainer.value as HTMLElement).id = 'ali-player-' + Math.random().toString(36).slice(2);
+        }
+        const player = new (window as any).Aliplayer(options, function (p: any) {
+          // ready
+        });
+        playerInstance.value = player;
+
+        // event binds
+        player.on('ready', () => {
+          emit('ready');
+          if (props.autoplay) player.play();
+        });
+
+        player.on('play', () => {
+          emit('play');
+        });
+
+        player.on('pause', () => {
+          pauseTime.value = Math.floor(player.getCurrentTime() || 0);
+          emit('pause');
+        });
+
+        player.on('timeupdate', () => {
+          const t = Math.floor(player.getCurrentTime() || 0);
+          if (currentSeconds.value !== t) {
+            currentSeconds.value = t;
+            emit('timeupdate', { time: t, status: player.getStatus?.() });
+            saveCounter.value++;
+            // every autoSaveInterval seconds -> emit progress-save
+            if (saveCounter.value >= props.autoSaveInterval) {
+              saveCounter.value = 0;
+              emit('progress-save', { videoId: props.videoData.id, position: currentSeconds.value });
+              // also local save
+              saveResumeItem(props.videoData.id, currentSeconds.value);
+            }
+          }
+        });
+
+        player.on('ended', () => {
+          emit('ended', { videoId: props.videoData.id });
+          // default behavior: start countdown then emit load-next
+          startNextCountdown();
+        });
+
+        player.on('error', (e: any) => {
+          showError.value = true;
+          errorText.value = '播放出错';
+          emit('error', e);
+        });
+
+        // seek to resume pos if present
+        nextTick(() => {
+          const list = loadResumeList();
+          const idx = list.findIndex(item => item.id === props.videoData.id);
+          const resumeTime = idx >= 0 ? list[idx].time : (props.videoData.firstTime || 0);
+          const dur = player.getDuration ? Math.floor(player.getDuration() || 0) : 0;
+          if (resumeTime && dur && resumeTime < dur) {
+            player.seek(resumeTime);
+          } else if (resumeTime && !dur) {
+            // if duration unknown yet, attempt seek once canplay
+            player.one && player.one('canplay', () => {
+              const d2 = Math.floor(player.getDuration() || 0);
+              if (resumeTime < d2) player.seek(resumeTime);
+            });
+          }
+        });
+
+        // periodic autosave fallback (in case events miss)
+        if (autoSaveIntervalId.value) window.clearInterval(autoSaveIntervalId.value);
+        autoSaveIntervalId.value = window.setInterval(() => {
+          if (currentSeconds.value > 0) {
+            emit('progress-save', { videoId: props.videoData.id, position: currentSeconds.value });
+            saveResumeItem(props.videoData.id, currentSeconds.value);
+          }
+        }, props.autoSaveInterval * 1000);
+
+      } catch (err) {
+        showError.value = true;
+        errorText.value = '播放器初始化失败';
+        emit('error', err);
+      }
+    }
+
+    // start next countdown
+    function startNextCountdown(seconds = 5) {
+      showCountDown.value = true;
+      countDownSeconds.value = seconds;
+      if (countdownTimerId.value) window.clearInterval(countdownTimerId.value);
+      countdownTimerId.value = window.setInterval(() => {
+        countDownSeconds.value -= 1;
+        if (countDownSeconds.value <= 0) {
+          // trigger parent to load next
+          window.clearInterval(countdownTimerId.value!);
+          showCountDown.value = false;
+          emit('load-next', { videoId: props.videoData.id });
+        }
+      }, 1000);
+    }
+
+    function cancelNext() {
+      showCountDown.value = false;
+      if (countdownTimerId.value) window.clearInterval(countdownTimerId.value);
+      emit('change-screen', { action: 'cancel-next' });
+    }
+
+    // control API exposed
+    function play() {
+      playerInstance.value && playerInstance.value.play && playerInstance.value.play();
+    }
+    function pause() {
+      playerInstance.value && playerInstance.value.pause && playerInstance.value.pause();
+    }
+    function seek(sec: number) {
+      playerInstance.value && playerInstance.value.seek && playerInstance.value.seek(sec);
+    }
+    function replay() {
+      if (playerInstance.value) {
+        playerInstance.value.seek(0);
+        playerInstance.value.play();
+      }
+    }
+    function enterFullscreen() {
+      if (!playerInstance.value) return;
+      const status = playerInstance.value.fullscreenService.getIsFullScreen && playerInstance.value.fullscreenService.getIsFullScreen();
+      if (status) {
+        playerInstance.value.fullscreenService.cancelFullScreen && playerInstance.value.fullscreenService.cancelFullScreen();
+        emit('change-screen', { status: false });
+        // example: lock portrait if in app (needs plus.* or native)
+      } else {
+        playerInstance.value.fullscreenService.requestFullScreen && playerInstance.value.fullscreenService.requestFullScreen();
+        emit('change-screen', { status: true });
+      }
+    }
+
+    // watch videoData changes
+    watch(() => props.videoData, async (nv) => {
+      // dispose old player
+      if (playerInstance.value && playerInstance.value.dispose) {
+        try { playerInstance.value.dispose(); } catch (e) { console.warn(e); }
+        playerInstance.value = null;
+      }
+      // reset states
+      currentSeconds.value = 0;
+      pauseTime.value = 0;
+      showError.value = false;
+      // init new
+      await initPlayer();
+    }, { immediate: true, deep: true });
+
+    onMounted(() => {
+      // ensure container has unique id for Aliplayer
+      if (playerContainer.value && !(playerContainer.value as HTMLElement).id) {
+        (playerContainer.value as HTMLElement).id = 'ali-player-' + Math.random().toString(36).slice(2);
+      }
+    });
+
+    onBeforeUnmount(() => {
+      if (playerInstance.value && playerInstance.value.dispose) {
+        try { playerInstance.value.dispose(); } catch (e) { /* ignore */ }
+      }
+      if (autoSaveIntervalId.value) window.clearInterval(autoSaveIntervalId.value);
+      if (countdownTimerId.value) window.clearInterval(countdownTimerId.value);
+    });
+
+    // expose methods to parent via ref
+    expose({
+      play, pause, seek, replay, startNextCountdown
+    });
+
+    return {
+      playerContainer,
+      playerHeight,
+      play, pause, seek, replay,
+      showCountDown, countDownSeconds, cancelNext,
+      showError, errorText
+    };
   }
+});
+</script>
+
+<style scoped>
+.ali-player-wrapper { position: relative; width: 100%; }
+.player-container { background: #000; }
+.countdown-overlay {
+  position: absolute; top: 0; right: 10px; z-index: 50;
+  background: rgba(0,0,0,0.6); color: #fff; padding: 10px; border-radius: 6px;
 }
+.btn-cancel { margin-top: 8px; background: #fff; color: #000; border: none; padding:6px 12px; border-radius:4px; }
+.player-error { color: #fff; text-align:center; padding: 20px; }
 </style>
diff --git a/pages/course/details/chapter.vue b/pages/course/details/chapter.vue
index d529689..41d8299 100644
--- a/pages/course/details/chapter.vue
+++ b/pages/course/details/chapter.vue
@@ -7,7 +7,7 @@
     <view class="page-content" :style="{ height: contentHeight }">
       <!-- 视频播放器 -->
       <view v-if="videoList.length > 0" class="video-section">
-        <VideoPlayer
+        <!-- <VideoPlayer
           ref="videoPlayerRef"
           :videoList="videoList"
           :currentIndex="currentVideoIndex"
@@ -15,6 +15,12 @@
           @end="handleVideoEnd"
           @fullscreen="handleFullscreen"
           @change="handleVideoChange"
+        /> -->
+        <AliyunPlayer
+          ref="videoPlayerRef"
+          :currentVideo="videoList[currentVideoIndex]"
+          :currentVideoList="videoList"
+          @unlockChangeVideo="changeVideoLock = false"
         />
       </view>
       
@@ -107,10 +113,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
 import { onLoad, onShow, onHide, onUnload } from '@dcloudio/uni-app'
 import { courseApi } from '@/api/modules/course'
-import VideoPlayer from '@/components/course/VideoPlayer.vue'
+// import VideoPlayer from '@/components/course/VideoPlayer.vue'
+import AliyunPlayer from '@/components/ali-video/index.vue'
 import type { IChapterDetail, IVideo } from '@/types/course'
 
 // 页面参数
@@ -166,14 +173,12 @@ onLoad((options: any) => {
  * 加载章节详情
  */
 const loadChapterDetail = async () => {
-  try {
-    uni.showLoading({ title: '加载中...' })
-    
+  try {    
     const res = await courseApi.getChapterDetail(chapterId.value)
     if (res.code === 0 && res.data) {
       chapterDetail.value = res.data.detail
       videoList.value = res.data.videos || []
-      
+
       // 如果有历史播放记录，定位到对应视频
       if (res.data.current) {
         const index = videoList.value.findIndex(v => v.id === res.data.current)
@@ -181,20 +186,37 @@ const loadChapterDetail = async () => {
           currentVideoIndex.value = index
         }
       }
+
+      // 使用 nextTick 确保组件已经渲染完成
+      await nextTick()
+      if (videoPlayerRef.value) {
+        console.log('准备调用 init 方法')
+        await videoPlayerRef.value.init({
+          currentVideo: videoList.value[currentVideoIndex.value],
+          currentVideoList: videoList.value
+        }, false)
+      } else {
+        console.error('videoPlayerRef.value 为空，无法初始化播放器')
+      }
     }
   } catch (error) {
     console.error('加载章节详情失败:', error)
-  } finally {
-    uni.hideLoading()
   }
 }
 
 /**
  * 选择视频
  */
-const selectVideo = (index: number) => {
+const selectVideo = async (index: number) => {
   if (index === currentVideoIndex.value) return
+  
+  console.log('切换视频:', index, videoList.value[index])
   currentVideoIndex.value = index
+  
+  // 调用播放器的 changeVideo 方法
+  if (videoPlayerRef.value) {
+    await videoPlayerRef.value.changeVideo(videoList.value[index])
+  }
 }
 
 /**
diff --git a/style/tailwind.css b/style/tailwind.css
index e5fed6a..9c44bd8 100644
--- a/style/tailwind.css
+++ b/style/tailwind.css
@@ -237,6 +237,9 @@
   .flex-shrink {
     flex-shrink: 1;
   }
+  .border-collapse {
+    border-collapse: collapse;
+  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -259,15 +262,9 @@
   .bg-\[transparent\] {
     background-color: transparent;
   }
-  .pt-\[5px\] {
-    padding-top: 5px;
-  }
   .pt-\[40px\] {
     padding-top: 40px;
   }
-  .pb-2\.5 {
-    padding-bottom: calc(var(--spacing) * 2.5);
-  }
   .text-center {
     text-align: center;
   }
@@ -290,6 +287,9 @@
     --tw-ordinal: ordinal;
     font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
   }
+  .underline {
+    text-decoration-line: underline;
+  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
diff --git a/types/video.d.ts b/types/video.d.ts
new file mode 100644
index 0000000..7e1fa4b
--- /dev/null
+++ b/types/video.d.ts
@@ -0,0 +1,210 @@
+// types/video.d.ts
+/**
+ * 视频相关类型定义
+ * 完全基于原项目 medicine_app 的数据结构
+ */
+
+import type { IApiResponse } from './book'
+
+/**
+ * 视频基本信息
+ * 对应原项目中的视频数据结构
+ */
+export interface IVideoInfo {
+  id: number                         // 视频 ID
+  title: string                      // 视频标题
+  type: '1' | '2' | string           // 类型: 1-视频 2-音频
+  video?: string                     // 阿里云视频 ID(原始)
+  videoId?: string                   // 阿里云视频 ID(处理后,移除等号)
+  videoUrl?: string                  // 视频 URL(普通视频)
+  m3u8Url?: string | null            // M3U8 地址(标准加密)
+  playAuth?: string                  // 播放凭证
+  sort?: number                      // 排序
+  chapterId?: number                 // 章节 ID
+  courseId?: number                  // 课程 ID
+  catalogueId?: number               // 目录 ID
+  userCourseVideoPositionEntity?: {
+    position: number                 // 服务器记录的播放位置(秒)
+  }
+  [key: string]: any                 // 允许其他字段
+}
+
+/**
+ * 视频数据(扩展)
+ * 包含播放时间等额外信息
+ */
+export interface IVideoData extends IVideoInfo {
+  firstTime?: number                 // 初始播放时间(秒)
+  time?: number                      // 当前播放时间(秒)
+}
+
+/**
+ * 本地存储的视频列表项
+ * 存储在 localStorage 的 videoOssList 中
+ */
+export interface IVideoStorageItem {
+  id: number                         // 视频 ID
+  time: number                       // 播放时间(秒)
+  [key: string]: any                 // 其他视频信息
+}
+
+/**
+ * 检查视频请求参数
+ * 对应 sociology/course/checkVideo 接口
+ */
+export interface ICheckVideoRequest {
+  id?: number                        // 视频 ID
+  video?: string                     // 视频标识
+  courseId?: number                  // 课程 ID
+  catalogueId?: number               // 目录 ID
+  chapterId?: number                 // 章节 ID
+  [key: string]: any                 // 允许其他参数
+}
+
+/**
+ * 检查视频响应
+ * 对应 sociology/course/checkVideo 接口返回
+ */
+export interface ICheckVideoResponse extends IApiResponse {
+  video: IVideoInfo                  // 视频信息
+}
+
+/**
+ * 保存播放位置请求参数
+ * 对应 sociology/course/saveCoursePosition 接口
+ */
+export interface ISaveCoursePositionRequest {
+  videoId: number                    // 视频 ID
+  position: number                   // 播放位置(秒)
+}
+
+/**
+ * 保存播放位置响应
+ * 对应 sociology/course/saveCoursePosition 接口返回
+ */
+export interface ISaveCoursePositionResponse extends IApiResponse {
+  // 继承基础响应结构
+}
+
+/**
+ * 记录错误视频请求参数
+ * 对应 medical/course/addErrorCourse 接口
+ * 用于记录 iOS 不支持的视频
+ */
+export interface IAddErrorCourseRequest {
+  chapterId: number                  // 章节 ID
+  videoId: number                    // 视频 ID
+  sort: number                       // 排序
+}
+
+/**
+ * 记录错误视频响应
+ * 对应 medical/course/addErrorCourse 接口返回
+ */
+export interface IAddErrorCourseResponse extends IApiResponse {
+  // 继承基础响应结构
+}
+
+/**
+ * 章节详情
+ * 用于视频列表组件
+ */
+export interface IChapterDetail {
+  id: number                         // 章节 ID
+  title: string                      // 章节标题
+  imgUrl?: string                    // 章节图片
+  content?: string                   // 章节内容
+  questions?: string                 // 思考题
+  [key: string]: any                 // 其他字段
+}
+
+/**
+ * 平台类型
+ */
+export type PlatformType = 'ios' | 'android' | 'h5' | null
+
+/**
+ * 屏幕方向类型
+ */
+export type ScreenOrientationType = 'portrait-primary' | 'landscape-primary'
+
+/**
+ * 播放器配置选项
+ * 对应阿里云播放器配置
+ */
+export interface IPlayerOptions {
+  id: string                         // 容器 ID
+  width: string                      // 宽度
+  height: string                     // 高度
+  autoplay?: boolean                 // 自动播放
+  playsinline?: boolean              // 内联播放
+  controlBarVisibility?: 'hover' | 'click' | 'always'  // 控制栏显示方式
+  useH5Prism?: boolean               // 使用 H5 播放器
+  qualitySort?: 'asc' | 'desc'       // 清晰度排序
+  isLive?: boolean                   // 是否直播
+  rePlay?: boolean                   // 是否重播
+  cover?: string                     // 封面图
+  
+  // 私有加密视频配置
+  vid?: string                       // 视频 ID
+  playauth?: string                  // 播放凭证
+  encryptType?: number               // 加密类型: 1-私有加密
+  playConfig?: {
+    EncryptType: string              // 加密类型名称
+  }
+  
+  // 标准加密/普通视频配置
+  source?: string                    // 视频地址
+  
+  // 组件配置
+  components?: Array<{
+    name: string
+    type: any
+    args?: any[]
+  }>
+  
+  // 皮肤布局
+  skinLayout?: Array<{
+    name: string
+    align?: string
+    x?: number
+    y?: number
+    children?: Array<{
+      name: string
+      align?: string
+      x?: number
+      y?: number
+    }>
+  }>
+}
+
+/**
+ * 全屏状态变化数据
+ */
+export interface IScreenChangeData {
+  status: boolean                    // 全屏状态
+  primary: ScreenOrientationType     // 屏幕方向
+}
+
+/**
+ * 播放时间记录数据
+ */
+export interface IRecordTimeData {
+  time: number                       // 播放时间(秒)
+  status?: string                    // 播放状态
+}
+
+/**
+ * 错误提示数据
+ */
+export interface IOpenShowData {
+  msg?: string                       // 错误消息
+}
+
+/**
+ * 初始化数据
+ */
+export interface IInitData {
+  currentVideo: IVideoInfo           // 当前视频
+  currentVideoList?: IVideoInfo[]    // 视频列表
+}