0822-last

ai_chat.html

@@ -8,7 +8,6 @@
   <meta http-equiv="Pragma" content="no-cache" />
   <meta http-equiv="Expires" content="0" />
   <link rel="stylesheet" type="text/css" href="css/libs/reset.css">
-  <link rel="stylesheet" type="text/css" href="css/common.css">
   <link rel="stylesheet" type="text/css" href="css/index.css">  
   <title>AI数字人</title>
   <!--[if lt IE 9]>
@@ -38,6 +37,10 @@
         <textarea cols="50" rows="7" placeholder="请输入你想咨询的问题"></textarea>
         <!-- <div class="send-button">send</div> -->
         <div class="send-button-container">
+          <div class="hot-word">
+            <span>什么是“人工智能”？</span>
+            <span>什么是“AI大模型”？</span>
+          </div>
           <span class="send-button">发送</span>
           <!-- <input type="button" value="发送" class="send-button"> -->
         </div>
@@ -189,6 +192,13 @@
               },
               error: function (err) {
                 console.log(err);
+                layer.msg('因网络原因，您的问题暂时无法解答，请稍后再试！', {
+                  offset: [$(window).height()/2-100, $(window).width() /2 + 100],
+                  anim: 5
+                });
+                $('.loading').parent().remove();
+                isBotTyping = false;
+                isBotReplying = false;
               }
             });
           }
@@ -196,13 +206,13 @@
           console.log('isBotTyping',isBotTyping)
           // 输入中
           layer.msg('请等待当前对话完成，稍后再试。', {
-            offset: 50,
+            offset: [$(window).height()/2-100, $(window).width() /2 + 100],
             anim: 6
           });
         } else if (isBotReplying) {
           // loading中
           layer.msg('请等待当前对话完成，稍后再试。', {
-            offset: 50,
+            offset: [$(window).height()/2-100, $(window).width() /2 + 100],
             anim: 6
           });
         }
@@ -216,6 +226,13 @@
         }
       });
 
+      // 热搜词提问
+      $('.hot-word span').click(function() {
+        const hotMessage = $(this).html()
+        $textArea.val(hotMessage)
+        $sendButton.click();
+      })
+
       function appendMessage(content, isUserMessage, isLoading, isWelcomeMessage) {
         const className = isUserMessage ? 'user-message' : 'bot-message';
         // const avatarSrc = isUserMessage ? 'images/other/pic1.jpg' : 'images/other/pic2.jpg';

css/index.css

@@ -600,10 +600,9 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
 
 .chat-content {
   width: 100%;
-  height: calc(100% - 2.8rem);
+  height: calc(100% - 2.925rem);
   overflow: hidden;
   overflow-y: scroll;
-  /* border: 1px solid red; */
 }
 
 .chat-message {
@@ -611,15 +610,16 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
   justify-content: flex-end;
   font-size: .35rem;
   color: #fff;
+  margin-bottom: .2rem;
 }
 
 .chat-message p {
   position: relative;
-  line-height: .825rem;
-  padding: 0 .2rem;
-  margin-right: .125rem;
+  line-height: .625rem;
+  padding: .125rem .2rem;
   background: rgba(0,0,0,0.2);
   border-radius: .35rem .1rem .35rem .35rem;
+  max-width: 90%;
 }
 
 .chat-message p span{
@@ -685,8 +685,7 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
 }
 
 .bot-message p {
-  line-height: .825rem;
-  margin-left: .125rem;
+  line-height: .6rem;
   background-color: rgb(255,255,255,0.2);
   border-radius: .1rem .35rem .35rem .35rem;
 }
@@ -741,7 +740,7 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
 
 .chat-send {
   width: 100%;
-  height: 2.5rem;
+  height: 2.625rem;
   margin-top: .3rem;
   background: linear-gradient( 90deg, #2C509B 0%, rgba(44,80,155,0.6) 100%);
   border-radius: .2rem;
@@ -752,17 +751,48 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
   width: calc(100% - .5rem);
   height: 1rem;
   font-size: .3rem;
-  line-height: .375rem;
+  line-height: .45rem;
   border: none;
   padding: .25rem;
   background-color: transparent;
   color: #fff;
-  /* border: 1px solid red; */
 }
 
 .send-button-container {
-  text-align: right;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
   padding: 0 .25rem 0 0;
+  margin-top: .2rem;
+}
+
+.hot-word span{
+  position: relative;
+  display: inline-block;
+  font-size: .25rem;
+  color: #fff;
+  line-height: .625rem;
+  margin: 0 .125rem;
+  padding: .075rem .2rem .075rem .6rem;
+  background: rgba(0,0,0,0.2);
+  border-radius: .35rem .1rem .35rem .35rem;
+}
+
+.hot-word span::before{
+  content: "";
+  position: absolute;
+  left: .15rem;
+  top: 50%;
+  width: .375rem;
+  height: .375rem;
+  background: url("../images/wenhao.png") no-repeat left top;
+  background-size: 100% 100%;
+  transform: translateY(-50%);
+}
+
+.hot-word span:hover{
+  background-color: rgba(0,0,0,0.6);
+  cursor: pointer;
 }
 
 .send-button {
@@ -853,11 +883,23 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
 .layui-layer-video .layui-layer-content{
   padding: .3rem !important;
 }
+.layui-layer-video .layui-layer-content .empty-data{
+  width: 50%;
+}
+.layui-layer-video .layui-layer-content .empty-data img{
+  width: 2.125rem;
+  margin: 0 auto;
+}
 
 .layui-layer-video.layui-layer-iframe iframe{
   height: 8.75rem !important;
 }
 
+#videoBox{
+  width: 100%;
+  height: 100%;
+}
+
 /* pdf页面 */
 .perview-wrapper{
   background: linear-gradient( 180deg, #183375 0%, #122050 100%);
@@ -867,7 +909,7 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
   width: 100%;
   height: .05rem;
   background: linear-gradient( 90deg, rgba(91, 157, 255, 0.8) 0%, rgba(91, 157, 255, 0.1) 60%);
-  /* box-shadow: 0px 0px 5px 0px #1766FF, 0px 0px 12px 0px #1766FF, 0px 0px 20px 0px #1766FF; */
+  box-shadow: 0px 0px 5px 0px #1766FF, 0px 0px 12px 0px #1766FF, 0px 0px 20px 0px #1766FF;
 }
 .perview-wrapper .ai-header-wrapper{
   height: 1rem;
@@ -919,7 +961,7 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
   position: absolute;
   left: 50%;
   top: 50%;
-  width: 170px;
+  width: 2.125rem;
   text-align: center;
   font-size: .35rem;
   color: #fff;
@@ -1122,3 +1164,12 @@ textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
   border: none;
   margin: 0 auto;
 }
+
+.page-cont-title{
+  font-family: 'PingFang';
+  font-size: .3rem;
+  font-weight: 500;
+  color: #fff;
+  line-height: .7rem;
+  text-shadow: 0px 0px 20px #0B88FC, 0px 0px 35px #0B0B88, 0px 0px 51px #0B88FC;
+}

page-codeVideo.html

@@ -23,6 +23,7 @@
         <div class="header-left">
           <div class="header-btn header-home" onclick="window.location.href='index.html'; return false;"><span></span><p>首页</p></div>
           <div class="header-btn header-return" onclick="history.go(-1); return false;"><span></span><p>返回</p></div>
+          <h3 class="page-cont-title">标题标题标题标题标题标题</h3>
         </div>
         <div class="header-btn header-login"><span></span><p>登录</p></div>
       </div>
@@ -38,8 +39,8 @@
       </div>
       <div class="perview-video">
         <div class="video-content">
-          <video width="592" height="360" controls>
-            <source  src="media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4" type="video/mp4">
+          <video id="myPageVideo" width="592" height="360" controls autoplay>
+            <source src="media/video/elephant/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4" type="video/mp4">
           </video>
         </div>
         <ul class="perview-info">

page-pdf.html

@@ -23,6 +23,7 @@
         <div class="header-left">
           <div class="header-btn header-home" onclick="window.location.href='index.html'; return false;"><span></span><p>首页</p></div>
           <div class="header-btn header-return" onclick="history.go(-1); return false;"><span></span><p>返回</p></div>
+          <h3 class="page-cont-title">标题标题标题标题标题标题</h3>
         </div>
         <div class="header-btn header-login"><span></span><p>登录</p></div>
       </div>

page-pdfVideo.html

@@ -23,6 +23,7 @@
         <div class="header-left">
           <div class="header-btn header-home" onclick="window.location.href='index.html'; return false;"><span></span><p>首页</p></div>
           <div class="header-btn header-return" onclick="history.go(-1); return false;"><span></span><p>返回</p></div>
+          <h3 class="page-cont-title">标题标题标题标题标题标题</h3>
         </div>
         <div class="header-btn header-login"><span></span><p>登录</p></div>
       </div>
@@ -39,8 +40,8 @@
       </div>
       <div class="perview-video">
         <div class="video-content">
-          <video width="592" height="360" controls>
-            <source  src="media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4" type="video/mp4">
+          <video width="592" height="360" controls autoplay>
+            <source src="media/video/elephant/重磅！大象机器人发布第二代人工智能套装，深度学习协作机器人、先进机器视觉与应用场景，人工智能实验室与职业教育必备.mp4" type="video/mp4">
           </video>
         </div>
         <!-- <ul class="perview-info">

page2.html

@@ -45,6 +45,7 @@
                   <span></span>
                 </div>
                 <p>click ---- 视频 - 颜色识别分类1</p>
+                <input type="hidden" value="media/video/elephant/重磅！大象机器人发布第二代人工智能套装，深度学习协作机器人、先进机器视觉与应用场景，人工智能实验室与职业教育必备.mp4" />
               </a>
             </li>
             <li>
@@ -275,15 +276,46 @@
     })
     // 点击查看视频
     $('.tj-list-video').on('click', function () {
-      layer.open({
-        type: 2,
-        skin: 'layui-layer-video',
-        title: '视频标题',   // 视频标题部分 - 修改
-        area: ['15rem', '10rem'],
-        shade: 0.8,
-        shadeClose: true,
-        content: 'media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4' // 视频资源路径 - 修改
+      var title = $(this).find('p').html()
+      var videoSrc = $(this).find('input').val();
+
+      // 创建一个临时的 video 元素 测试视频地址
+      var videoElement = document.createElement('video');
+      videoElement.src = videoSrc;
+      videoElement.style.display = 'none';
+      document.body.appendChild(videoElement);
+
+      videoElement.play()
+      .then(() => {
+        // 视频成功
+        layer.open({
+          type: 1,
+          skin: 'layui-layer-video',
+          title: title, // 视频标题部分 - 修改
+          area: ['15rem', '10rem'],
+          shade: 0.8,
+          shadeClose: true,
+          content: '<div id="videoBox">'
+                     +'<video id="myVideo" width="100%" height="100%" controls autoplay>'
+                         +'<source src="'+videoSrc+'" type="video/mp4">'
+                     +'</video>'
+                  +' </div>',
+        });
       })
+      .catch(error => {
+        layer.open({
+          type: 1,
+          skin: 'layui-layer-video', 
+          title: title, // 视频标题部分 - 修改
+          area: ['15rem', '10rem'],
+          shade: 0.8,
+          shadeClose: true,
+          content: '<div class="empty-data">'
+                    +'<img src="images/index-img9.png" alt="" />'
+                    +'<p>视频无法播放，请检查视频源</p>'
+                  +'</div>',
+        });
+      });
     })
   })
 </script>

page3-1.html

@@ -64,6 +64,7 @@
                   <span></span>
                 </div>
                 <p>click --- 视频 -辽宁省青少年机器人竞赛</p>
+                <input type="hidden" value="media/video/elephant/重磅！大象机器人发布第二代人工智能套装，深度学习协作机器人、先进机器视觉与应用场景，人工智能实验室与职业教育必备.mp4" />
               </a>
             </li>
             <li>
@@ -276,15 +277,46 @@
     })
     // 点击查看视频
     $('.perviewVideo').on('click', function () {
-      layer.open({
-        type: 2,
-        skin: 'layui-layer-video',
-        title: '视频标题',   // 视频标题部分 - 修改
-        area: ['15rem', '10rem'],
-        shade: 0.8,
-        shadeClose: true,
-        content: 'media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4' // 视频资源路径 - 修改
+      var title = $(this).find('p').html()
+      var videoSrc = $(this).find('input').val();
+
+      // 创建一个临时的 video 元素 测试视频地址
+      var videoElement = document.createElement('video');
+      videoElement.src = videoSrc;
+      videoElement.style.display = 'none';
+      document.body.appendChild(videoElement);
+
+      videoElement.play()
+      .then(() => {
+        // 视频成功
+        layer.open({
+          type: 1,
+          skin: 'layui-layer-video',
+          title: title, // 视频标题部分 - 修改
+          area: ['15rem', '10rem'],
+          shade: 0.8,
+          shadeClose: true,
+          content: '<div id="videoBox">'
+                     +'<video id="myVideo" width="100%" height="100%" controls autoplay>'
+                         +'<source src="'+videoSrc+'" type="video/mp4">'
+                     +'</video>'
+                  +' </div>',
+        });
       })
+      .catch(error => {
+        layer.open({
+          type: 1,
+          skin: 'layui-layer-video', 
+          title: title, // 视频标题部分 - 修改
+          area: ['15rem', '10rem'],
+          shade: 0.8,
+          shadeClose: true,
+          content: '<div class="empty-data">'
+                    +'<img src="images/index-img9.png" alt="" />'
+                    +'<p>视频无法播放，请检查视频源</p>'
+                  +'</div>',
+        });
+      });
     })
   })
 </script>

page3-2.html

@@ -64,6 +64,7 @@
                   <span></span>
                 </div>
                 <p>click --- 视频 -辽宁省青少年机器人竞赛</p>
+                <input type="hidden" value="media/video/elephant/入门级开源机械臂ultraArm套装.mp4" />
               </a>
             </li>
             <li>
@@ -276,15 +277,46 @@
     })
     // 点击查看视频
     $('.perviewVideo').on('click', function () {
-      layer.open({
-        type: 2,
-        skin: 'layui-layer-video',
-        title: '视频标题',   // 视频标题部分 - 修改
-        area: ['15rem', '10rem'],
-        shade: 0.8,
-        shadeClose: true,
-        content: 'media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4' // 视频资源路径 - 修改
+      var title = $(this).find('p').html()
+      var videoSrc = $(this).find('input').val();
+
+      // 创建一个临时的 video 元素 测试视频地址
+      var videoElement = document.createElement('video');
+      videoElement.src = videoSrc;
+      videoElement.style.display = 'none';
+      document.body.appendChild(videoElement);
+
+      videoElement.play()
+      .then(() => {
+        // 视频成功
+        layer.open({
+          type: 1,
+          skin: 'layui-layer-video',
+          title: title, // 视频标题部分 - 修改
+          area: ['15rem', '10rem'],
+          shade: 0.8,
+          shadeClose: true,
+          content: '<div id="videoBox">'
+                     +'<video id="myVideo" width="100%" height="100%" controls autoplay>'
+                         +'<source src="'+videoSrc+'" type="video/mp4">'
+                     +'</video>'
+                  +' </div>',
+        });
       })
+      .catch(error => {
+        layer.open({
+          type: 1,
+          skin: 'layui-layer-video', 
+          title: title, // 视频标题部分 - 修改
+          area: ['15rem', '10rem'],
+          shade: 0.8,
+          shadeClose: true,
+          content: '<div class="empty-data">'
+                    +'<img src="images/index-img9.png" alt="" />'
+                    +'<p>视频无法播放，请检查视频源</p>'
+                  +'</div>',
+        });
+      });
     })
   })
 </script>

page3-3.html

@@ -64,6 +64,7 @@
                   <span></span>
                 </div>
                 <p>click --- 视频-辽宁省青少年机器人竞赛</p>
+                <input type="hidden" value="media/video/lejurobot/1.CRAIC决赛现场惊现蛄蛹者.mp4" />
               </a>
             </li>
             <li>
@@ -276,15 +277,46 @@
     })
     // 点击查看视频
     $('.perviewVideo').on('click', function () {
-      layer.open({
-        type: 2,
-        skin: 'layui-layer-video',
-        title: '视频标题',   // 视频标题部分 - 修改
-        area: ['15rem', '10rem'],
-        shade: 0.8,
-        shadeClose: true,
-        content: 'media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4' // 视频资源路径 - 修改
+      var title = $(this).find('p').html()
+      var videoSrc = $(this).find('input').val();
+
+      // 创建一个临时的 video 元素 测试视频地址
+      var videoElement = document.createElement('video');
+      videoElement.src = videoSrc;
+      videoElement.style.display = 'none';
+      document.body.appendChild(videoElement);
+
+      videoElement.play()
+      .then(() => {
+        // 视频成功
+        layer.open({
+          type: 1,
+          skin: 'layui-layer-video',
+          title: title, // 视频标题部分 - 修改
+          area: ['15rem', '10rem'],
+          shade: 0.8,
+          shadeClose: true,
+          content: '<div id="videoBox">'
+                     +'<video id="myVideo" width="100%" height="100%" controls autoplay>'
+                         +'<source src="'+videoSrc+'" type="video/mp4">'
+                     +'</video>'
+                  +' </div>',
+        });
       })
+      .catch(error => {
+        layer.open({
+          type: 1,
+          skin: 'layui-layer-video', 
+          title: title, // 视频标题部分 - 修改
+          area: ['15rem', '10rem'],
+          shade: 0.8,
+          shadeClose: true,
+          content: '<div class="empty-data">'
+                    +'<img src="images/index-img9.png" alt="" />'
+                    +'<p>视频无法播放，请检查视频源</p>'
+                  +'</div>',
+        });
+      });
     })
   })
 </script>

page4.html

@@ -45,6 +45,7 @@
                   <span></span>
                 </div>
                 <p>全国大学生机器人大赛</p>
+                <input type="hidden" value="media/video/elephant/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4" />
               </a>
             </li>
             <li>
@@ -53,7 +54,8 @@
                   <img src="images/img-bg.png" alt="" />
                   <span></span>
                 </div>
-                <p>全国青少年人工智能创新挑战赛</p>
+                <p>地址错误 - 全国青少年人工智能创新挑战赛</p>
+                <input type="hidden" value="media/video/elephant/入门级开源机械臂ultraArm套装2.mp4" />
               </a>
             </li>
             <li>
@@ -63,6 +65,7 @@
                   <span></span>
                 </div>
                 <p>辽宁省青少年机器人竞赛</p>
+                <input type="hidden" value="media/video/elephant/重磅！大象机器人发布第二代人工智能套装，深度学习协作机器人、先进机器视觉与应用场景，人工智能实验室与职业教育必备.mp4" />
               </a>
             </li>
             <li>
@@ -72,6 +75,7 @@
                   <span></span>
                 </div>
                 <p>世界青少年机器人奥林匹克竞赛</p>
+                <input type="hidden" value="media/video/lejurobot/1.CRAIC决赛现场惊现蛄蛹者.mp4" />
               </a>
             </li>
             <li>
@@ -81,6 +85,7 @@
                   <span></span>
                 </div>
                 <p>2023世界机器人大赛</p>
+                <input type="hidden" value="media/video/lejurobot/2.乐聚人形机器人任务挑战赛.mp4" />
               </a>
             </li>
             <li>
@@ -90,6 +95,7 @@
                   <span></span>
                 </div>
                 <p>全国青少年人工智能创新挑战赛</p>
+                <input type="hidden" value="media/video/lejurobot/乐聚机器人.mp4" />
               </a>
             </li>
             <li>
@@ -99,6 +105,7 @@
                   <span></span>
                 </div>
                 <p>颜色识别分类7</p>
+                <input type="hidden" value="media/video/lejurobot/乐聚机器人—最炫民族风.mp4" />
               </a>
             </li>
             <li>
@@ -108,6 +115,7 @@
                   <span></span>
                 </div>
                 <p>uLtraArm套装8</p>
+                <input type="hidden" value="media/video/lejurobot/乐聚机器人—江南style.mp4" />
               </a>
             </li>
             <li>
@@ -117,6 +125,7 @@
                   <span></span>
                 </div>
                 <p>颜色识别分类9</p>
+                <input type="hidden" value="media/video/elephant/入门级开源机械臂ultraArm套装.mp4" />
               </a>
             </li>
             <li>
@@ -126,6 +135,7 @@
                   <span></span>
                 </div>
                 <p>uLtraArm套装10</p>
+                <input type="hidden" value="media/video/elephant/重磅！大象机器人发布第二代人工智能套装，深度学习协作机器人、先进机器视觉与应用场景，人工智能实验室与职业教育必备.mp4" />
               </a>
             </li>
             <li>
@@ -135,6 +145,7 @@
                   <span></span>
                 </div>
                 <p>颜色识别分类11</p>
+                <input type="hidden" value="media/video/lejurobot/2.乐聚人形机器人任务挑战赛.mp4" />
               </a>
             </li>
             <li>
@@ -144,6 +155,7 @@
                   <span></span>
                 </div>
                 <p>uLtraArm套装12</p>
+                <input type="hidden" value="media/video/lejurobot/2.乐聚人形机器人任务挑战赛.mp4" />
               </a>
             </li>
             <li>
@@ -153,6 +165,7 @@
                   <span></span>
                 </div>
                 <p>颜色识别分类13</p>
+                <input type="hidden" value="media/video/lejurobot/乐聚机器人—最炫民族风.mp4" />
               </a>
             </li>
             <li>
@@ -162,42 +175,7 @@
                   <span></span>
                 </div>
                 <p>uLtraArm套装14</p>
-              </a>
-            </li>
-            <li>
-              <a href="javascript:;">
-                <div class="tj-list-img mask-active">
-                  <img src="images/img-bg.png" alt="" />
-                  <span></span>
-                </div>
-                <p>颜色识别分类15</p>
-              </a>
-            </li>
-            <li>
-              <a href="javascript:;">
-                <div class="tj-list-img mask-active">
-                  <img src="images/img-bg.png" alt="" />
-                  <span></span>
-                </div>
-                <p>uLtraArm套装16</p>
-              </a>
-            </li>
-            <li>
-              <a href="javascript:;">
-                <div class="tj-list-img mask-active">
-                  <img src="images/img-bg.png" alt="" />
-                  <span></span>
-                </div>
-                <p>颜色识别分类17</p>
-              </a>
-            </li>
-            <li>
-              <a href="javascript:;">
-                <div class="tj-list-img mask-active">
-                  <img src="images/img-bg.png" alt="" />
-                  <span></span>
-                </div>
-                <p>uLtraArm套装18</p>
+                <input type="hidden" value="media/video/elephant/重磅！大象机器人发布第二代人工智能套装，深度学习协作机器人、先进机器视觉与应用场景，人工智能实验室与职业教育必备.mp4" />
               </a>
             </li>
           </ul>
@@ -275,15 +253,46 @@
     })
     // 点击查看视频
     $('.tj_gallery li').on('click', function () {
-      layer.open({
-        type: 2,
-        skin: 'layui-layer-video',
-        title: '视频标题',   // 视频标题部分 - 修改
-        area: ['15rem', '10rem'],
-        shade: 0.8,
-        shadeClose: true,
-        content: 'media/video/ROS桌面多功能机械臂myCobot_280_Pi颜色识别分类.mp4' // 视频资源路径 - 修改
+      var title = $(this).find('p').html()
+      var videoSrc = $(this).find('input').val();
+
+      // 创建一个临时的 video 元素 测试视频地址
+      var videoElement = document.createElement('video');
+      videoElement.src = videoSrc;
+      videoElement.style.display = 'none';
+      document.body.appendChild(videoElement);
+
+      videoElement.play()
+      .then(() => {
+        // 视频成功
+        layer.open({
+          type: 1,
+          skin: 'layui-layer-video',
+          title: title, // 视频标题部分 - 修改
+          area: ['15rem', '10rem'],
+          shade: 0.8,
+          shadeClose: true,
+          content: '<div id="videoBox">'
+                     +'<video id="myVideo" width="100%" height="100%" controls autoplay>'
+                         +'<source src="'+videoSrc+'" type="video/mp4">'
+                     +'</video>'
+                  +' </div>',
+        });
       })
+      .catch(error => {
+        layer.open({
+          type: 1,
+          skin: 'layui-layer-video', 
+          title: title, // 视频标题部分 - 修改
+          area: ['15rem', '10rem'],
+          shade: 0.8,
+          shadeClose: true,
+          content: '<div class="empty-data">'
+                    +'<img src="images/index-img9.png" alt="" />'
+                    +'<p>视频无法播放，请检查视频源</p>'
+                  +'</div>',
+        });
+      });
     })
   })
 </script>