课件播放重构0.2

src/views/coursewarePlay/component/video-play.tsx

@@ -34,7 +34,6 @@ export default defineComponent({
     const togglePlay = (e: Event) => {
       e.stopPropagation()
       videoItem.value?.togglePlay()
-      emit('togglePlay', videoItem.value?.paused)
     }
     const toggleLoop = (e: Event) => {
       const loopBtn = document.getElementById(loopBtnId)
@@ -115,6 +114,7 @@ export default defineComponent({
           }
           if (!item.value.isprepare) return
           changePlayBtn('')
+          emit('togglePlay', videoItem.value?.paused)
         })
         videoItem.value.on('pause', () => changePlayBtn('play'))
         videoItem.value.on('ended', (e: Event) => {

src/views/coursewarePlay/index.tsx

@@ -563,6 +563,7 @@ export default defineComponent({
       }
     ]
     const swiperType = ref(effects[3])
+    console.log("🚀 ~ swiperType:", swiperType.value)
     // 上一个知识点, 下一个知识点
     const handlePreAndNext = (type: string) => {
       setTimeout(() => {

src/views/coursewarePlay/play.module.less

@@ -5,21 +5,17 @@
   overflow: hidden;
   --plyr-color-main: var(--van-primary);
   --plyr-range-track-height: 3px;
-  // :global {
-  //   // 更改动画样式
-  //   .van-swipe__track {
-  //     height: 100% !important;
-  //     transform: translateY(0px) !important;
-  //     position: relative;
-  //   }
-  // }
 }
+
 .coursewarePlay {
   position: relative;
   height: 100vh;
   margin: 0 auto;
-  overflow: hidden;
+  transform-style: preserve-3d;
+  perspective: (32rem);
+  transition-timing-function: initial;
 }
+
 .playModel {
   position: absolute;
   left: 0;
@@ -29,6 +25,7 @@
   box-shadow: inset 0px 0px 164px 0px rgba(0, 0, 0, 1);
   pointer-events: none;
 }
+
 .headerContainer {
   position: fixed;
   top: 0;
@@ -41,6 +38,7 @@
   background: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent);
   transition: transform 0.5s;
 }
+
 .backBtn {
   color: #fff;
   height: 26px;
@@ -49,12 +47,14 @@
   align-items: center;
   z-index: 10;
   padding: 4px 10px 4px 15px;
+
   :global {
     .van-icon {
       margin-right: 8px;
     }
   }
 }
+
 .menu {
   position: absolute;
   width: 100%;
@@ -65,22 +65,27 @@
   font-size: 12px;
   color: #fff;
 }
+
 .tabsContent {
   width: 100vw;
   height: 100vh;
+
   :global {
     .van-tabs__wrap {
       display: none !important;
     }
+
     .van-tabs__content {
       width: 100%;
       height: 100%;
     }
   }
 }
+
 .swipeItem {
   overflow: hidden;
 }
+
 .itemDiv {
   position: absolute;
   left: 0;
@@ -88,11 +93,16 @@
   width: 100%;
   height: 100%;
   background-color: #000;
-  transition: all 3s;
+  transition-duration: .8s;
+  transform-style: preserve-3d;
+  transition-property: transform, opacity, height;
+  backface-visibility: hidden;
+  overflow: hidden;
   video {
     width: 100%;
     height: 100%;
   }
+
   img {
     display: block;
     width: 100%;
@@ -100,6 +110,7 @@
     object-fit: contain;
   }
 }
+
 .fullBtn {
   width: 38px;
   height: 46px;
@@ -110,31 +121,36 @@
   justify-content: space-evenly;
   overflow: hidden;
   white-space: nowrap;
+
   &:active {
     background: rgba(255, 255, 255, 0.2);
   }
 }
+
 .rightFixedBtns {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   right: 12px;
   z-index: 10;
-  
+
   .btnsBottom {
     margin-top: 10px;
   }
 }
+
 .leftFixedBtns {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 12px;
   z-index: 10;
+
   .prePoint {
     margin-bottom: 8px;
   }
 }
+
 .btnsWrap {
   background: rgba(51, 51, 51, 0.4);
   border-radius: 6px;
@@ -149,6 +165,7 @@
   z-index: 10;
   background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), transparent);
   transition: transform 0.5s;
+
   .time {
     display: flex;
     justify-content: space-between;
@@ -156,14 +173,17 @@
     font-size: 10px;
     padding: 4px 20px;
   }
+
   .slider {
     padding: 8px 20px;
+
     :global {
       .van-slider__button {
         background: var(--van-primary);
       }
     }
   }
+
   .actions {
     display: flex;
     justify-content: space-between;
@@ -171,10 +191,12 @@
     font-size: 12px;
     padding: 0 10px 4px 20px;
     align-items: center;
+
     .actionBtn {
       display: flex;
     }
-    .actionBtn > img {
+
+    .actionBtn>img {
       width: 30px;
       height: 30px;
       display: block;
@@ -182,17 +204,22 @@
     }
   }
 }
+
 .popup {
   background: rgba(0, 0, 0, 0.5);
 }
+
 .overlayClass {
   --van-overlay-background: transparent;
 }
+
 :global {
+
   .top-enter-active,
   .top-leave-active {
     transition: transform 0.5s;
   }
+
   .top-enter-from,
   .top-leave-to {
     transform: translateY(-100%);
@@ -202,6 +229,7 @@
   .left-leave-active {
     transition: all 0.5s;
   }
+
   .left-enter-from,
   .left-leave-to {
     left: -60px;
@@ -241,6 +269,7 @@
   justify-content: center;
   align-items: center;
 }
+
 .playRecordTime {
   width: 90px;
   margin-right: 10px;
@@ -252,6 +281,7 @@
   align-items: center;
   justify-content: center;
   color: #fff;
+
   .timeLoad {
     width: 5px;
     height: 5px;
@@ -267,21 +297,27 @@
   0% {
     opacity: 0;
   }
+
   50% {
     opacity: 0.5;
   }
+
   100% {
     opacity: 1;
   }
 }
-.swiperContainer{
-  :global{
-    .swiper-wrapper{
+
+.swiperContainer {
+  :global {
+    .swiper-wrapper {
       height: 100vh;
     }
   }
 }
 
-.noActive{
-  transform: rotate(-180deg) translate3d(0, 0, -800px);
+.nextItem {
+  transform: translate3d(0, 0, -800px) rotateX(-180deg);
 }
+.preItem{
+  transform: translate3d(0, 0, -800px) rotateX(180deg);
+}

src/views/coursewarePlay/play.tsx

@@ -467,27 +467,29 @@ export default defineComponent({
       handleStop(popupData.activeIndex)
       console.log('轮播切换')
       popupData.activeIndex = index
-      const item = data.itemList[index]
-      if (item) {
-        popupData.tabActive = item.knowledgePointId
-        popupData.itemActive = item.id
-        popupData.itemName = item.name
-        popupData.tabName = item.tabName
-        if (item.type == 'SONG') {
-          activeData.model = true
-        }
-        console.log('🚀 ~ VIDEO', item, item.type === 'VIDEO' && item.videoEle)
-        if (item.type === 'VIDEO') {
-          console.log("🚀 ~ item:",item, item.autoPlay, popupData.activeIndex)
-          // 自动播放下一个视频
-          clearTimeout(activeData.timer)
-          closeToast()
-          item.autoPlay = true
-          nextTick(() => {
-            item.videoEle?.play()
-          })
+      setTimeout(() => {
+        const item = data.itemList[index]
+        if (item) {
+          popupData.tabActive = item.knowledgePointId
+          popupData.itemActive = item.id
+          popupData.itemName = item.name
+          popupData.tabName = item.tabName
+          if (item.type == 'SONG') {
+            activeData.model = true
+          }
+          // console.log('🚀 ~ VIDEO', item, item.type === 'VIDEO' && item.videoEle)
+          if (item.type === 'VIDEO') {
+            // console.log("🚀 ~ item:",item, item.autoPlay, popupData.activeIndex)
+            // 自动播放下一个视频
+            clearTimeout(activeData.timer)
+            closeToast()
+            item.autoPlay = true
+            nextTick(() => {
+              item.videoEle?.play()
+            })
+          }
         }
-      }
+      }, 850)
     }
 
     const swiperType = ref(effects[3])
@@ -518,7 +520,7 @@ export default defineComponent({
               return isRender ? (
                 <div
                   key={'index' + mIndex}
-                  class={[styles.itemDiv, popupData.activeIndex == mIndex ? '' : styles.noActive]}
+                  class={[styles.itemDiv, mIndex < popupData.activeIndex && styles.preItem, mIndex > popupData.activeIndex && styles.nextItem]}
                   style={{ zIndex: popupData.activeIndex == mIndex ? 10 : 1 }}
                   onClick={(e: Event) => {
                     e.stopPropagation()
@@ -547,6 +549,7 @@ export default defineComponent({
                           m.isprepare = true
                         }}
                         onTogglePlay={(paused: boolean) => {
+                          console.log('paused', paused)
                           m.autoPlay = false
                           if (paused) {
                             clearTimeout(activeData.timer)