封装结尾视频

Code/public/myData/myData.js

@@ -11,7 +11,7 @@ const baseUrlAtl = 'xxxxxxxxxxxxxxxxx/staticData/'
 // 一些动态配置的数据
 const myDataTemp = {
   // 每次刷新页面都从首页开始/每次进页面都有加载中动画
-  isLdong: false,
+  isLdong: true,
 
   // 首页(静态资源目录位置：staticData/HH/home)
   home: {

Code/src/components/EndVideo/index.module.scss

@@ -0,0 +1,26 @@
+.EndVideo {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 40;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: all 0.5s;
+  :global {
+    .endVdieoBtn {
+      position: absolute;
+      width: 50px;
+      height: 50px;
+      background-size: 100% 100%;
+      cursor: pointer;
+      bottom: 20px;
+      right: 20px;
+    }
+  }
+}
+.EndVideoAc {
+  opacity: 1;
+  pointer-events: auto;
+}

Code/src/components/EndVideo/index.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useRef } from 'react'
+import styles from './index.module.scss'
+import classNames from 'classnames'
+import { domDelOwnFu } from '@/utils/utilsSome'
+import history from '@/utils/history'
+import useDataUrl from '../ownUse/useDataUrl'
+
+type Props = {
+  lastVideo: boolean
+  delDom: string
+  src: string
+  path: string
+}
+
+// 页面结尾的视频
+function EndVideo({ lastVideo, delDom, src, path }: Props) {
+  const { dataUrlSame } = useDataUrl()
+
+  const videoRefLast = useRef<HTMLVideoElement>(null)
+
+  useEffect(() => {
+    if (lastVideo) {
+      setTimeout(() => {
+        if (videoRefLast.current) {
+          videoRefLast.current.play()
+        }
+      }, 100)
+
+      // 0.5s之后删除自己
+      setTimeout(() => {
+        domDelOwnFu(delDom)
+      }, 500)
+    }
+  }, [delDom, lastVideo])
+
+  return (
+    <div className={classNames(styles.EndVideo, lastVideo ? styles.EndVideoAc : '')}>
+      <video
+        ref={videoRefLast}
+        playsInline
+        muted
+        webkit-playsinline='true'
+        x5-video-player-type='h5'
+        src={src}
+        onEnded={() => history.push(path)}
+      >
+        <source type='video/mp4' />
+        Your browser does not support the video tag.
+      </video>
+
+      <div
+        title='跳过'
+        className='endVdieoBtn'
+        style={{ backgroundImage: `url(${dataUrlSame}home/tiao.png)` }}
+        onClick={() => history.push(path)}
+      ></div>
+    </div>
+  )
+}
+
+const MemoEndVideo = React.memo(EndVideo)
+
+export default MemoEndVideo

Code/src/pages/A1home/index.module.scss

@@ -177,7 +177,13 @@
     .A1last {
       width: 100%;
       height: 100%;
-      position: relative;
+      position: absolute;
+      z-index: 40;
+      top: 0;
+      left: 0;
+      opacity: 0;
+      pointer-events: none;
+      transition: all 0.5s;
       .A1videoLastBtn {
         position: absolute;
         width: 50px;
@@ -189,6 +195,11 @@
       }
     }
 
+    .A1lastAc {
+      opacity: 1;
+      pointer-events: auto;
+    }
+
     // 屏幕>=1200
     @media screen and (min-width: 1200px) {
       .A1base {

Code/src/pages/A1home/index.tsx

@@ -6,6 +6,7 @@ import { myData } from '@/utils/http'
 import classNames from 'classnames'
 import history from '@/utils/history'
 import { domDelOwnFu } from '@/utils/utilsSome'
+import EndVideo from '@/components/EndVideo'
 
 function A1home() {
   const { dataUrlSame } = useDataUrl()
@@ -231,7 +232,10 @@ function A1home() {
       )}
 
       {/* 最后一个过长动画 */}
-      <div className='A1last'>
+
+      {/* <EndVideo lastVideo={lastVideo} delDom='.A1videoBox' src={dataUrlSame + myData.home.lastVideo} path='/visit'/> */}
+
+      <div className={classNames('A1last', lastVideo ? 'A1lastAc' : '')}>
         <video
           ref={videoRefLast}
           playsInline