|
|
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <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/libs/animate.min.css" /> <link rel="stylesheet" type="text/css" href="css/plugins/gridNavigation.css" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <!--[if lt IE 9]>
<script src="js/html5shiv.js"></script> <script src="js/respond.min.js"></script> <![endif]--> <title>场景演示</title> </head><body> <div class="ai-wrapper"> <video class="ai-bg" src="images/bg2.mp4" autoplay="autoplay" loop="loop" muted="muted"></video> <div class="ai-header-wrapper"> <div class="ai-header"> <div class="header-left"> <div class="header-btn header-home" onclick="window.location.href='index.html'; return false;"><span></span><p>首页</p></div> </div> <div class="header-title"> <h2>场景演示</h2> </div> <div class="header-btn header-login"><span></span><p>登录</p></div> </div> </div>
<!-- 编程体验 --> <div class="page-content"> <div id="tj_container" class="tj_container"> <span id="tj_prev" class="page-list-btn tj_prev"></span> <div class="tj_wrapper"> <ul class="tj_gallery"> <li class="tj-list-video"> <a href="javascript:;"> <div class="tj-list-img mask-active"> <img src="images/page1/7.png" alt="" /> <span></span> </div> <p>click ---- 视频 - 颜色识别分类1</p> <input type="hidden" value="media/video/elephant/重磅！大象机器人发布第二代人工智能套装，深度学习协作机器人、先进机器视觉与应用场景，人工智能实验室与职业教育必备.mp4" /> </a> </li> <li> <a href="page-codeVideo.html"> <div class="tj-list-img mask-active"> <img src="images/img-bg.png" alt="" /> <span></span> </div> <p>click ---- 编程工具视频 - uLtraArm套装2</p> </a> </li> <li> <a href="page-pdfVideo.html"> <div class="tj-list-img mask-active"> <img src="images/img-bg.png" alt="" /> <span></span> </div> <p>click --- pdf视频 -颜色识别分类3</p> </a> </li> <li> <a href="page-pdf.html"> <div class="tj-list-img mask-active"> <img src="images/img-bg.png" alt="" /> <span></span> </div> <p>click --- pdf - uLtraArm套装4</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>颜色识别分类5</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套装6</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>颜色识别分类7</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套装8</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>颜色识别分类9</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套装10</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>颜色识别分类11</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套装12</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>颜色识别分类13</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套装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> </a> </li> </ul> </div> <span id="tj_next" class="page-list-btn tj_next"></span> </div> </div>
<!-- 账号：admin 密码：83560792 --> <!-- 登录 --> <div id="form-layer" class="layer-login" style="display: none;"> <h3>账号登录</h3> <ul class="login-form"> <li> <p>账号</p> <input type="text" placeholder="请输入账号" value="admin" /> </li> <li> <p>密码</p> <input type="password" placeholder="请输入密码" value="83560792" /> </li> </ul> <button type="submit" class="login-submit" id="btn-submit-form">立即登录</button> </div> <div id="user-layer" class="layer-login" style="display: none;"> <div class="user-info"> <img src="images/index-img2.png" alt="" /> <p class="user-name">Admin</p> <ul class="user-other"> <li> <p>8个</p> <span>代码上传</span> </li> <li> <p>100</p> <span>积分</span> </li> <li> <p>10</p> <span>获赞</span> </li> </ul> <div class="change-accout-btn">切换账号</div> </div> </div> <!-- 微信登录 --> <div id="wechat-layer" class="layer-login" style="display: none;"> <h3>账号登录</h3> <div class="wechat-login"> <img src="images/wechat.png" alt="" /> <span>请使用微信扫描二维码登录</span> </div> </div> </div></body><script type="text/javascript" src="js/libs/jquery-3.7.1.min.js"></script><script type="text/javascript" src="js/libs/flexible.js"></script><!-- 弹出框 --><script type="text/javascript" src="js/libs/layer/layer.js"></script><!-- 模块切换 --><script type="text/javascript" src="js/plugins/jquery.easing.1.3.js"></script><script type="text/javascript" src="js/plugins/jquery.gridnav.js"></script><script type="text/javascript" src="js/index.js"></script><script type="text/javascript"> $(function () { // 列表切换效果 $('#tj_container').gridnav({ type: { mode: 'disperse', // use def | fade | seqfade | updown | sequpdown | showhide | disperse | rows speed: 500, // for fade, seqfade, updown, sequpdown, showhide, disperse, rows easing: '', // for fade, seqfade, updown, sequpdown, showhide, disperse, rows factor: 50, // for seqfade, sequpdown, rows reverse: false, // for sequpdown }, }) // 点击查看视频 $('.tj-list-video').on('click', function () { 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></html>
|
