myxiaowei
/
fanruan-edu-cas
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity
Browse Source

feat 静态页面无缓存

pull/3/head
Wangwei 2 years ago
parent
6eab2a3a63
commit
112ba13326
4 changed files with 1449 additions and 1538 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 265
      public/index.html
  2. 162
      src/views/class/play.vue
  3. 2
      src/views/studypath/jiandaoyun.vue
  4. 212
      src/views/video/play.vue

265
public/index.html
Unescape View File

@ -1,67 +1,65 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --> <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
<title>帆软学院-培养企业亟需的数据人才</title> <title>帆软学院-培养企业亟需的数据人才</title>
<meta name="keywords" content="帆软学院,帆软培训,帆软视频,帆软教程,帆软课程,数据分析培训,大数据培训" /> <meta name="keywords" content="帆软学院,帆软培训,帆软视频,帆软教程,帆软课程,数据分析培训,大数据培训" />
<meta name="description" <meta name="description" content="帆软学院专注于培养企业亟需的数据人才。课程方向包括FineReport、FineBI、简道云、FineDataLink、数知鸟、阿米巴、数据分析、python、Linux、数据库、java、JavaScript等。" />
content="帆软学院专注于培养企业亟需的数据人才。课程方向包括FineReport、FineBI、简道云、FineDataLink、数知鸟、阿米巴、数据分析、python、Linux、数据库、java、JavaScript等。" /> <link rel="stylesheet" href="//at.alicdn.com/t/font_2400577_ckl19e6hyau.css" />
<link rel="stylesheet" href="//at.alicdn.com/t/font_2400577_ckl19e6hyau.css">
<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" />
<script type="text/javascript" src="https://cdn.fanruanclub.com/prod/dist/js/fineClubSDK.js"></script> <script type="text/javascript" src="https://cdn.fanruanclub.com/prod/dist/js/fineClubSDK.js"></script>
<!-- <script type="text/javascript" src="<%= BASE_URL %>js/ckplayer/ckplayer.min.js"></script> --> <!-- <script type="text/javascript" src="<%= BASE_URL %>js/ckplayer/ckplayer.min.js"></script> -->
</head> </head>
<body> <body>
<noscript> <noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
Please enable it to continue.</strong>
</noscript> </noscript>
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
<!-- seo --> <!-- seo -->
<ul class="left-wrapper" style="display: none;"> <ul class="left-wrapper" style="display: none;">
<li><a href="https://edu.fanruan.com/video?class1=16" <li>
target="_blank"><span>FineReport</span><i class="arrow el-icon-arrow-right"></i></a> <a href="https://edu.fanruan.com/video?class1=16" target="_blank"><span>FineReport</span><i class="arrow el-icon-arrow-right"></i></a>
<div class="child-nav"> <div class="child-nav">
<div class="child-wrapper"> <div class="child-wrapper">
<ul> <ul>
<li><a href="https://edu.fanruan.com/video?class1=16&amp;class2=7" class="c2a" <li><a href="https://edu.fanruan.com/video?class1=16&amp;class2=7" class="c2a" target="_blank">报表制作</a></li>
target="_blank">报表制作</a></li> <li><a href="https://edu.fanruan.com/video?class1=16&amp;class2=89" class="c2a" target="_blank">数据大屏</a></li>
<li><a href="https://edu.fanruan.com/video?class1=16&amp;class2=89" class="c2a" <li><a href="https://edu.fanruan.com/video?class1=16&amp;class2=56" class="c2a" target="_blank">移动端</a></li>
target="_blank">数据大屏</a></li> <li><a href="https://edu.fanruan.com/video?class1=16&amp;class2=92" class="c2a" target="_blank">二次开发</a></li>
<li><a href="https://edu.fanruan.com/video?class1=16&amp;class2=56" class="c2a" <li><a href="https://edu.fanruan.com/video?class1=16&amp;class2=113" class="c2a" target="_blank">部署集群</a></li>
target="_blank">移动端</a></li> <li><a href="https://edu.fanruan.com/video?class1=16&amp;class2=104" class="c2a" target="_blank">行业案例</a></li>
<li><a href="https://edu.fanruan.com/video?class1=16&amp;class2=92" class="c2a" <div class="amore">
target="_blank">二次开发</a></li> <a href="https://edu.fanruan.com/video?class1=16" class="mra flex-1" target="_blank"><span>查看FineReport全部课程</span><i class="arrow el-icon-arrow-right"></i></a>
<li><a href="https://edu.fanruan.com/video?class1=16&amp;class2=113" class="c2a" </div>
target="_blank">部署集群</a></li>
<li><a href="https://edu.fanruan.com/video?class1=16&amp;class2=104" class="c2a"
target="_blank">行业案例</a></li>
<div class="amore"><a href="https://edu.fanruan.com/video?class1=16" class="mra flex-1"
target="_blank"><span>查看FineReport全部课程</span><i class="arrow el-icon-arrow-right"></i></a></div>
</ul> </ul>
<div class="hot"> <div class="hot">
<h2 class="col617">热门推荐</h2> <h2 class="col617">热门推荐</h2>
<ul> <ul>
<li><a href="https://edu.fanruan.com/video/85" class="lk hide-txt" target="_blank">JavaScript 基础入门</a> <li>
<a href="https://edu.fanruan.com/video/85" class="lk hide-txt" target="_blank">JavaScript 基础入门</a>
<p><span>共24课时</span><em>3642人学习</em></p> <p><span>共24课时</span><em>3642人学习</em></p>
</li> </li>
<li><a href="https://edu.fanruan.com/video/98" class="lk hide-txt" target="_blank">JAVA <li>
基础入门</a> <a href="https://edu.fanruan.com/video/98" class="lk hide-txt" target="_blank">JAVA 基础入门</a>
<p><span>共16课时</span><em>1785人学习</em></p> <p><span>共16课时</span><em>1785人学习</em></p>
</li> </li>
<li><a href="https://edu.fanruan.com/video/106" class="lk hide-txt" <li>
target="_blank">Python基础入门-给零基础小白的Python入门课</a> <a href="https://edu.fanruan.com/video/106" class="lk hide-txt" target="_blank">Python基础入门-给零基础小白的Python入门课</a>
<p><span>共2课时</span><em>1476人学习</em></p> <p><span>共2课时</span><em>1476人学习</em></p>
</li> </li>
<li><a href="https://edu.fanruan.com/video/166" class="lk hide-txt" <li>
target="_blank">Linux7.6基础入门课程（CentOS7.6）</a> <a href="https://edu.fanruan.com/video/166" class="lk hide-txt" target="_blank">Linux7.6基础入门课程（CentOS7.6）</a>
<p><span>共112课时</span><em>1人学习</em></p> <p><span>共112课时</span><em>1人学习</em></p>
</li> </li>
</ul> </ul>
@ -69,36 +67,35 @@
</div> </div>
</div> </div>
</li> </li>
<li><a href="https://edu.fanruan.com/video?class1=17" <li>
target="_blank"><span>FineBI</span><i class="arrow el-icon-arrow-right"></i></a> <a href="https://edu.fanruan.com/video?class1=17" target="_blank"><span>FineBI</span><i class="arrow el-icon-arrow-right"></i></a>
<div class="child-nav"> <div class="child-nav">
<div class="child-wrapper"> <div class="child-wrapper">
<ul> <ul>
<li><a href="https://edu.fanruan.com/video?class1=17&amp;class2=8" class="c2a" <li><a href="https://edu.fanruan.com/video?class1=17&amp;class2=8" class="c2a" target="_blank">基础操作</a></li>
target="_blank">基础操作</a></li> <li><a href="https://edu.fanruan.com/video?class1=17&amp;class2=90" class="c2a" target="_blank">数据分析</a></li>
<li><a href="https://edu.fanruan.com/video?class1=17&amp;class2=90" class="c2a" <li><a href="https://edu.fanruan.com/video?class1=17&amp;class2=103" class="c2a" target="_blank">数据可视化</a></li>
target="_blank">数据分析</a></li> <div class="amore">
<li><a href="https://edu.fanruan.com/video?class1=17&amp;class2=103" class="c2a" <a href="https://edu.fanruan.com/video?class1=17" class="mra flex-1" target="_blank"><span>查看FineBI全部课程</span><i class="arrow el-icon-arrow-right"></i></a>
target="_blank">数据可视化</a></li> </div>
<div class="amore"><a href="https://edu.fanruan.com/video?class1=17" class="mra flex-1"
target="_blank"><span>查看FineBI全部课程</span><i class="arrow el-icon-arrow-right"></i></a></div>
</ul> </ul>
<div class="hot"> <div class="hot">
<h2 class="col617">热门推荐</h2> <h2 class="col617">热门推荐</h2>
<ul> <ul>
<li><a href="https://edu.fanruan.com/video/85" class="lk hide-txt" target="_blank">JavaScript 基础入门</a> <li>
<a href="https://edu.fanruan.com/video/85" class="lk hide-txt" target="_blank">JavaScript 基础入门</a>
<p><span>共24课时</span><em>3642人学习</em></p> <p><span>共24课时</span><em>3642人学习</em></p>
</li> </li>
<li><a href="https://edu.fanruan.com/video/98" class="lk hide-txt" target="_blank">JAVA <li>
基础入门</a> <a href="https://edu.fanruan.com/video/98" class="lk hide-txt" target="_blank">JAVA 基础入门</a>
<p><span>共16课时</span><em>1785人学习</em></p> <p><span>共16课时</span><em>1785人学习</em></p>
</li> </li>
<li><a href="https://edu.fanruan.com/video/106" class="lk hide-txt" <li>
target="_blank">Python基础入门-给零基础小白的Python入门课</a> <a href="https://edu.fanruan.com/video/106" class="lk hide-txt" target="_blank">Python基础入门-给零基础小白的Python入门课</a>
<p><span>共2课时</span><em>1476人学习</em></p> <p><span>共2课时</span><em>1476人学习</em></p>
</li> </li>
<li><a href="https://edu.fanruan.com/video/166" class="lk hide-txt" <li>
target="_blank">Linux7.6基础入门课程（CentOS7.6）</a> <a href="https://edu.fanruan.com/video/166" class="lk hide-txt" target="_blank">Linux7.6基础入门课程（CentOS7.6）</a>
<p><span>共112课时</span><em>1人学习</em></p> <p><span>共112课时</span><em>1人学习</em></p>
</li> </li>
</ul> </ul>
@ -106,38 +103,36 @@
</div> </div>
</div> </div>
</li> </li>
<li><a href="https://edu.fanruan.com/video?class1=18" target="_blank"><span>简道云</span><i <li>
class="arrow el-icon-arrow-right"></i></a> <a href="https://edu.fanruan.com/video?class1=18" target="_blank"><span>简道云</span><i class="arrow el-icon-arrow-right"></i></a>
<div class="child-nav"> <div class="child-nav">
<div class="child-wrapper"> <div class="child-wrapper">
<ul> <ul>
<li><a href="https://edu.fanruan.com/video?class1=18&amp;class2=102" class="c2a" <li><a href="https://edu.fanruan.com/video?class1=18&amp;class2=102" class="c2a" target="_blank">基础操作</a></li>
target="_blank">基础操作</a></li> <li><a href="https://edu.fanruan.com/video?class1=18&amp;class2=98" class="c2a" target="_blank">业务场景</a></li>
<li><a href="https://edu.fanruan.com/video?class1=18&amp;class2=98" class="c2a" <li><a href="https://edu.fanruan.com/video?class1=18&amp;class2=109" class="c2a" target="_blank">专题教学</a></li>
target="_blank">业务场景</a></li> <li><a href="https://edu.fanruan.com/video?class1=18&amp;class2=110" class="c2a" target="_blank">直播分享</a></li>
<li><a href="https://edu.fanruan.com/video?class1=18&amp;class2=109" class="c2a" <div class="amore">
target="_blank">专题教学</a></li> <a href="https://edu.fanruan.com/video?class1=18" class="mra flex-1" target="_blank"><span>查看简道云全部课程</span><i class="arrow el-icon-arrow-right"></i></a>
<li><a href="https://edu.fanruan.com/video?class1=18&amp;class2=110" class="c2a" </div>
target="_blank">直播分享</a></li>
<div class="amore"><a href="https://edu.fanruan.com/video?class1=18" class="mra flex-1"
target="_blank"><span>查看简道云全部课程</span><i class="arrow el-icon-arrow-right"></i></a></div>
</ul> </ul>
<div class="hot"> <div class="hot">
<h2 class="col617">热门推荐</h2> <h2 class="col617">热门推荐</h2>
<ul> <ul>
<li><a href="https://edu.fanruan.com/video/85" class="lk hide-txt" target="_blank">JavaScript 基础入门</a> <li>
<a href="https://edu.fanruan.com/video/85" class="lk hide-txt" target="_blank">JavaScript 基础入门</a>
<p><span>共24课时</span><em>3642人学习</em></p> <p><span>共24课时</span><em>3642人学习</em></p>
</li> </li>
<li><a href="https://edu.fanruan.com/video/98" class="lk hide-txt" target="_blank">JAVA <li>
基础入门</a> <a href="https://edu.fanruan.com/video/98" class="lk hide-txt" target="_blank">JAVA 基础入门</a>
<p><span>共16课时</span><em>1785人学习</em></p> <p><span>共16课时</span><em>1785人学习</em></p>
</li> </li>
<li><a href="https://edu.fanruan.com/video/106" class="lk hide-txt" <li>
target="_blank">Python基础入门-给零基础小白的Python入门课</a> <a href="https://edu.fanruan.com/video/106" class="lk hide-txt" target="_blank">Python基础入门-给零基础小白的Python入门课</a>
<p><span>共2课时</span><em>1476人学习</em></p> <p><span>共2课时</span><em>1476人学习</em></p>
</li> </li>
<li><a href="https://edu.fanruan.com/video/166" class="lk hide-txt" <li>
target="_blank">Linux7.6基础入门课程（CentOS7.6）</a> <a href="https://edu.fanruan.com/video/166" class="lk hide-txt" target="_blank">Linux7.6基础入门课程（CentOS7.6）</a>
<p><span>共112课时</span><em>1人学习</em></p> <p><span>共112课时</span><em>1人学习</em></p>
</li> </li>
</ul> </ul>
@ -145,36 +140,35 @@
</div> </div>
</div> </div>
</li> </li>
<li><a href="https://edu.fanruan.com/video?class1=19" target="_blank"><span>数知鸟</span><i <li>
class="arrow el-icon-arrow-right"></i></a> <a href="https://edu.fanruan.com/video?class1=19" target="_blank"><span>数知鸟</span><i class="arrow el-icon-arrow-right"></i></a>
<div class="child-nav"> <div class="child-nav">
<div class="child-wrapper"> <div class="child-wrapper">
<ul> <ul>
<li><a href="https://edu.fanruan.com/video?class1=19&amp;class2=111" class="c2a" <li><a href="https://edu.fanruan.com/video?class1=19&amp;class2=111" class="c2a" target="_blank">基础操作</a></li>
target="_blank">基础操作</a></li> <li><a href="https://edu.fanruan.com/video?class1=19&amp;class2=112" class="c2a" target="_blank">大咖分享</a></li>
<li><a href="https://edu.fanruan.com/video?class1=19&amp;class2=112" class="c2a" <li><a href="https://edu.fanruan.com/video?class1=19&amp;class2=91" class="c2a" target="_blank">解决方案</a></li>
target="_blank">大咖分享</a></li> <div class="amore">
<li><a href="https://edu.fanruan.com/video?class1=19&amp;class2=91" class="c2a" <a href="https://edu.fanruan.com/video?class1=19" class="mra flex-1" target="_blank"><span>查看数知鸟全部课程</span><i class="arrow el-icon-arrow-right"></i></a>
target="_blank">解决方案</a></li> </div>
<div class="amore"><a href="https://edu.fanruan.com/video?class1=19" class="mra flex-1"
target="_blank"><span>查看数知鸟全部课程</span><i class="arrow el-icon-arrow-right"></i></a></div>
</ul> </ul>
<div class="hot"> <div class="hot">
<h2 class="col617">热门推荐</h2> <h2 class="col617">热门推荐</h2>
<ul> <ul>
<li><a href="https://edu.fanruan.com/video/85" class="lk hide-txt" target="_blank">JavaScript 基础入门</a> <li>
<a href="https://edu.fanruan.com/video/85" class="lk hide-txt" target="_blank">JavaScript 基础入门</a>
<p><span>共24课时</span><em>3642人学习</em></p> <p><span>共24课时</span><em>3642人学习</em></p>
</li> </li>
<li><a href="https://edu.fanruan.com/video/98" class="lk hide-txt" target="_blank">JAVA <li>
基础入门</a> <a href="https://edu.fanruan.com/video/98" class="lk hide-txt" target="_blank">JAVA 基础入门</a>
<p><span>共16课时</span><em>1785人学习</em></p> <p><span>共16课时</span><em>1785人学习</em></p>
</li> </li>
<li><a href="https://edu.fanruan.com/video/106" class="lk hide-txt" <li>
target="_blank">Python基础入门-给零基础小白的Python入门课</a> <a href="https://edu.fanruan.com/video/106" class="lk hide-txt" target="_blank">Python基础入门-给零基础小白的Python入门课</a>
<p><span>共2课时</span><em>1476人学习</em></p> <p><span>共2课时</span><em>1476人学习</em></p>
</li> </li>
<li><a href="https://edu.fanruan.com/video/166" class="lk hide-txt" <li>
target="_blank">Linux7.6基础入门课程（CentOS7.6）</a> <a href="https://edu.fanruan.com/video/166" class="lk hide-txt" target="_blank">Linux7.6基础入门课程（CentOS7.6）</a>
<p><span>共112课时</span><em>1人学习</em></p> <p><span>共112课时</span><em>1人学习</em></p>
</li> </li>
</ul> </ul>
@ -182,34 +176,34 @@
</div> </div>
</div> </div>
</li> </li>
<li><a href="https://edu.fanruan.com/video?class1=20" target="_blank"><span>阿米巴</span><i <li>
class="arrow el-icon-arrow-right"></i></a> <a href="https://edu.fanruan.com/video?class1=20" target="_blank"><span>阿米巴</span><i class="arrow el-icon-arrow-right"></i></a>
<div class="child-nav"> <div class="child-nav">
<div class="child-wrapper"> <div class="child-wrapper">
<ul> <ul>
<li><a href="https://edu.fanruan.com/video?class1=20&amp;class2=96" class="c2a" <li><a href="https://edu.fanruan.com/video?class1=20&amp;class2=96" class="c2a" target="_blank">解决方案</a></li>
target="_blank">解决方案</a></li> <li><a href="https://edu.fanruan.com/video?class1=20&amp;class2=105" class="c2a" target="_blank">大咖分享</a></li>
<li><a href="https://edu.fanruan.com/video?class1=20&amp;class2=105" class="c2a" <div class="amore">
target="_blank">大咖分享</a></li> <a href="https://edu.fanruan.com/video?class1=20" class="mra flex-1" target="_blank"><span>查看阿米巴全部课程</span><i class="arrow el-icon-arrow-right"></i></a>
<div class="amore"><a href="https://edu.fanruan.com/video?class1=20" class="mra flex-1" </div>
target="_blank"><span>查看阿米巴全部课程</span><i class="arrow el-icon-arrow-right"></i></a></div>
</ul> </ul>
<div class="hot"> <div class="hot">
<h2 class="col617">热门推荐</h2> <h2 class="col617">热门推荐</h2>
<ul> <ul>
<li><a href="https://edu.fanruan.com/video/85" class="lk hide-txt" target="_blank">JavaScript 基础入门</a> <li>
<a href="https://edu.fanruan.com/video/85" class="lk hide-txt" target="_blank">JavaScript 基础入门</a>
<p><span>共24课时</span><em>3642人学习</em></p> <p><span>共24课时</span><em>3642人学习</em></p>
</li> </li>
<li><a href="https://edu.fanruan.com/video/98" class="lk hide-txt" target="_blank">JAVA <li>
基础入门</a> <a href="https://edu.fanruan.com/video/98" class="lk hide-txt" target="_blank">JAVA 基础入门</a>
<p><span>共16课时</span><em>1785人学习</em></p> <p><span>共16课时</span><em>1785人学习</em></p>
</li> </li>
<li><a href="https://edu.fanruan.com/video/106" class="lk hide-txt" <li>
target="_blank">Python基础入门-给零基础小白的Python入门课</a> <a href="https://edu.fanruan.com/video/106" class="lk hide-txt" target="_blank">Python基础入门-给零基础小白的Python入门课</a>
<p><span>共2课时</span><em>1476人学习</em></p> <p><span>共2课时</span><em>1476人学习</em></p>
</li> </li>
<li><a href="https://edu.fanruan.com/video/166" class="lk hide-txt" <li>
target="_blank">Linux7.6基础入门课程（CentOS7.6）</a> <a href="https://edu.fanruan.com/video/166" class="lk hide-txt" target="_blank">Linux7.6基础入门课程（CentOS7.6）</a>
<p><span>共112课时</span><em>1人学习</em></p> <p><span>共112课时</span><em>1人学习</em></p>
</li> </li>
</ul> </ul>
@ -217,40 +211,37 @@
</div> </div>
</div> </div>
</li> </li>
<li><a href="https://edu.fanruan.com/video?class1=21" target="_blank"><span>热门技术</span><i <li>
class="arrow el-icon-arrow-right"></i></a> <a href="https://edu.fanruan.com/video?class1=21" target="_blank"><span>热门技术</span><i class="arrow el-icon-arrow-right"></i></a>
<div class="child-nav"> <div class="child-nav">
<div class="child-wrapper"> <div class="child-wrapper">
<ul> <ul>
<li><a href="https://edu.fanruan.com/video?class1=21&amp;class2=100" class="c2a" <li><a href="https://edu.fanruan.com/video?class1=21&amp;class2=100" class="c2a" target="_blank">Python</a></li>
target="_blank">Python</a></li> <li><a href="https://edu.fanruan.com/video?class1=21&amp;class2=101" class="c2a" target="_blank">Linux</a></li>
<li><a href="https://edu.fanruan.com/video?class1=21&amp;class2=101" class="c2a" <li><a href="https://edu.fanruan.com/video?class1=21&amp;class2=94" class="c2a" target="_blank">数据库</a></li>
target="_blank">Linux</a></li> <li><a href="https://edu.fanruan.com/video?class1=21&amp;class2=108" class="c2a" target="_blank">Java</a></li>
<li><a href="https://edu.fanruan.com/video?class1=21&amp;class2=94" class="c2a" <li><a href="https://edu.fanruan.com/video?class1=21&amp;class2=97" class="c2a" target="_blank">JavaScript</a></li>
target="_blank">数据库</a></li> <div class="amore">
<li><a href="https://edu.fanruan.com/video?class1=21&amp;class2=108" class="c2a" <a href="https://edu.fanruan.com/video?class1=21" class="mra flex-1" target="_blank"><span>查看热门技术全部课程</span><i class="arrow el-icon-arrow-right"></i></a>
target="_blank">Java</a></li> </div>
<li><a href="https://edu.fanruan.com/video?class1=21&amp;class2=97" class="c2a"
target="_blank">JavaScript</a></li>
<div class="amore"><a href="https://edu.fanruan.com/video?class1=21" class="mra flex-1"
target="_blank"><span>查看热门技术全部课程</span><i class="arrow el-icon-arrow-right"></i></a></div>
</ul> </ul>
<div class="hot"> <div class="hot">
<h2 class="col617">热门推荐</h2> <h2 class="col617">热门推荐</h2>
<ul> <ul>
<li><a href="https://edu.fanruan.com/video/85" class="lk hide-txt" target="_blank">JavaScript 基础入门</a> <li>
<a href="https://edu.fanruan.com/video/85" class="lk hide-txt" target="_blank">JavaScript 基础入门</a>
<p><span>共24课时</span><em>3642人学习</em></p> <p><span>共24课时</span><em>3642人学习</em></p>
</li> </li>
<li><a href="https://edu.fanruan.com/video/98" class="lk hide-txt" target="_blank">JAVA <li>
基础入门</a> <a href="https://edu.fanruan.com/video/98" class="lk hide-txt" target="_blank">JAVA 基础入门</a>
<p><span>共16课时</span><em>1785人学习</em></p> <p><span>共16课时</span><em>1785人学习</em></p>
</li> </li>
<li><a href="https://edu.fanruan.com/video/106" class="lk hide-txt" <li>
target="_blank">Python基础入门-给零基础小白的Python入门课</a> <a href="https://edu.fanruan.com/video/106" class="lk hide-txt" target="_blank">Python基础入门-给零基础小白的Python入门课</a>
<p><span>共2课时</span><em>1476人学习</em></p> <p><span>共2课时</span><em>1476人学习</em></p>
</li> </li>
<li><a href="https://edu.fanruan.com/video/166" class="lk hide-txt" <li>
target="_blank">Linux7.6基础入门课程（CentOS7.6）</a> <a href="https://edu.fanruan.com/video/166" class="lk hide-txt" target="_blank">Linux7.6基础入门课程（CentOS7.6）</a>
<p><span>共112课时</span><em>1人学习</em></p> <p><span>共112课时</span><em>1人学习</em></p>
</li> </li>
</ul> </ul>
@ -258,20 +249,16 @@
</div> </div>
</div> </div>
</li> </li>
<li><a href="javascript:;" ><span>学习路径</span><i class="arrow el-icon-arrow-right"></i></a> <li>
<a href="javascript:;"><span>学习路径</span><i class="arrow el-icon-arrow-right"></i></a>
<div class="child-nav"> <div class="child-nav">
<div class="child-wrapper"> <div class="child-wrapper">
<ul> <ul>
<li><a href="https://bbs.fanruan.com/edu/guide/finereport" target="_blank"> <li><a href="https://bbs.fanruan.com/edu/guide/finereport" target="_blank"> FR新手入门 </a></li>
FR新手入门 </a></li> <li><a href="https://bbs.fanruan.com/thread-77147-1-1.html" target="_blank"> FR学习计划 </a></li>
<li><a href="https://bbs.fanruan.com/thread-77147-1-1.html" target="_blank"> <li><a href="https://bbs.fanruan.com/edu/guide/finebi" target="_blank"> FineBI新手入门 </a></li>
FR学习计划 </a></li> <li><a href="https://bbs.fanruan.com/thread-123036-1-1.html" target="_blank"> FineBI学习计划 </a></li>
<li><a href="https://bbs.fanruan.com/edu/guide/finebi" target="_blank"> <li><a href="https://bbs.fanruan.com/thread-133123-1-1.html" target="_blank"> 简道云学习计划 </a></li>
FineBI新手入门 </a></li>
<li><a href="https://bbs.fanruan.com/thread-123036-1-1.html" target="_blank">
FineBI学习计划 </a></li>
<li><a href="https://bbs.fanruan.com/thread-133123-1-1.html" target="_blank">
简道云学习计划 </a></li>
</ul> </ul>
</div> </div>
</div> </div>
@ -281,11 +268,11 @@
<script> <script>
var _hmt = _hmt || []; var _hmt = _hmt || [];
(function() { (function() {
var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?f4d7d83c565e698bd7cedfe9c6297055"; var hm = document.createElement("script");
var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); hm.src = "https://hm.baidu.com/hm.js?f4d7d83c565e698bd7cedfe9c6297055";
} var s = document.getElementsByTagName("script")[0];
)(); s.parentNode.insertBefore(hm, s);
})();
</script> </script>
</body> </body>
</html> </html>

162
src/views/class/play.vue
Unescape View File

@ -2,16 +2,13 @@
<div v-wechat-title="'正在播放：' + play_title"></div> <div v-wechat-title="'正在播放：' + play_title"></div>
<appHeader /> <appHeader />
<div v-if="!com_user_token"> <div v-if="!com_user_token">
<el-empty :image-size="200" description=" ">无权限查看，当前页面需要 <a <el-empty :image-size="200" description=" ">无权限查看，当前页面需要 <a :href="com_login_url" class="col008">登录</a></el-empty>
:href="com_login_url" class="col008">登录</a></el-empty>
</div> </div>
<div v-if="isAuth"> <div v-if="isAuth">
<div class="main"> <div class="main">
<div class="videoBox flex-2"> <div class="videoBox flex-2">
<div class="viewtil" style="min-height:8%"> <div class="viewtil" style="min-height:8%">
<el-page-header @back="goBack" title="返回班级" :content="video.title"> <el-page-header @back="goBack" title="返回班级" :content="video.title"> </el-page-header>
</el-page-header>
</div> </div>
<div id="VideoPlay" style=" width:100%; height: 92%; margin-top: auto;"></div> <div id="VideoPlay" style=" width:100%; height: 92%; margin-top: auto;"></div>
@ -21,29 +18,27 @@
<div class="txt">本节视频已看完</div> <div class="txt">本节视频已看完</div>
<div v-if="playThisId != playNextId && playNextId != 0"> <div v-if="playThisId != playNextId && playNextId != 0">
<div class="txt_next">下一节：<span class="fw600">{{playNextTitle}}</span></div> <div class="txt_next">
下一节：<span class="fw600">{{ playNextTitle }}</span>
</div>
<div class="sel_btn_box flex-3"> <div class="sel_btn_box flex-3">
<div class="btn_sty" @click="getvideo_click(playThisId,1);">重播</div> <div class="btn_sty" @click="getvideo_click(playThisId, 1)">重播</div>
<div class="btn_sty" @click="getvideo_click(playNextId);">播放下一节</div> <div class="btn_sty" @click="getvideo_click(playNextId)">播放下一节</div>
</div> </div>
</div> </div>
<div v-else> <div v-else>
<div class="txt_next">已是最后一节</div> <div class="txt_next">已是最后一节</div>
<div class="sel_btn_box flex-3"> <div class="sel_btn_box flex-3">
<div class="btn_sty" style="margin: 0 auto;" @click="getvideo_click(playThisId,1);">重播</div> <div class="btn_sty" style="margin: 0 auto;" @click="getvideo_click(playThisId, 1)">重播</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="navbox" id="videoList"> <div class="navbox" id="videoList">
<div class="classtil"> <div class="classtil">
<router-link :to="'/class/' + classid">{{ video.className }}</router-link> <router-link :to="'/class/' + classid">{{ video.className }}</router-link>
</div> </div>
@ -54,7 +49,6 @@
</div> </div>
<el-scrollbar style="height: 86%; overflow: hidden;" ref="myscroll"> <el-scrollbar style="height: 86%; overflow: hidden;" ref="myscroll">
<div style="padding-bottom: 40px;"> <div style="padding-bottom: 40px;">
<div class="looplist" v-for="(item, i) in lessonList" :key="i"> <div class="looplist" v-for="(item, i) in lessonList" :key="i">
<div class="otile hide-txt">{{ item.title }}</div> <div class="otile hide-txt">{{ item.title }}</div>
@ -63,42 +57,33 @@
<ul class="vlist"> <ul class="vlist">
<li class="item" v-for="(item, i) in item.video" :key="i"> <li class="item" v-for="(item, i) in item.video" :key="i">
<!-- <el-tooltip :content="item.title" placement="left" effect="light"> --> <!-- <el-tooltip :content="item.title" placement="left" effect="light"> -->
<a class="a-play flex-1" href="javascript:;" @click="getvideo_click(item.id)" <a class="a-play flex-1" href="javascript:;" @click="getvideo_click(item.id)" :class="{ playcur: playcur == item.id }">
:class="{playcur : playcur == item.id}"> <img src="@/assets/img/playing.gif" width="18" v-if="playcur == item.id" />
<img src="@/assets/img/playing.gif" width="18" v-if="playcur == item.id">
<i class="iconfont icon-bofang2" v-else></i> <i class="iconfont icon-bofang2" v-else></i>
<div class="title hide-txt">{{ item.title }}</div> <div class="title hide-txt">{{ item.title }}</div>
<div class="time">{{ item.videoTime }}</div> <div class="time">{{ item.videoTime }}</div>
</a> </a>
<!-- </el-tooltip> --> <!-- </el-tooltip> -->
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</el-scrollbar> </el-scrollbar>
</div> </div>
</div> </div>
</div> </div>
<div v-else> <div v-else>
<el-empty :image-size="200" :description="msg" v-if="empty"></el-empty> <el-empty :image-size="200" :description="msg" v-if="empty"></el-empty>
</div> </div>
</template> </template>
<script> <script>
import appHeader from "@/components/Header"; import appHeader from "@/components/Header";
import { useRoute,useRouter } from 'vue-router' import { useRoute, useRouter } from "vue-router";
import { getVideo, getPlayList, classlog } from "@/api/study"; import { getVideo, getPlayList, classlog } from "@/api/study";
import { toRefs, reactive, onMounted, ref, onUnmounted } from 'vue'; import { toRefs, reactive, onMounted, ref, onUnmounted } from "vue";
export default { export default {
name: "classPlay", name: "classPlay",
@ -106,8 +91,8 @@
appHeader, appHeader,
}, },
setup() { setup() {
const route = useRoute() const route = useRoute();
const router = useRouter() const router = useRouter();
const classid = route.params.classid; const classid = route.params.classid;
const videoid = route.params.videoid; const videoid = route.params.videoid;
@ -122,22 +107,22 @@
lessonList: [], lessonList: [],
videoObject: { videoObject: {
container: '#VideoPlay', container: "#VideoPlay",
variable: 'player', variable: "player",
autoplay: false, autoplay: false,
html5m3u8: true, html5m3u8: true,
subtitle: false, subtitle: false,
loop: false, loop: false,
//loaded: 'loadHandler',//加载播放器后调用的函数 //loaded: 'loadHandler',//加载播放器后调用的函数
video: '', video: "",
seek: '0', seek: "0",
//debug:true, //debug:true,
}, },
playcur: 0, playcur: 0,
logid: 0, logid: 0,
videoid: 0, videoid: 0,
videopid: 0, videopid: 0,
play_title: '', play_title: "",
ckPlayer: null, ckPlayer: null,
playIndex: 0, playIndex: 0,
playNextId: 0, playNextId: 0,
@ -148,8 +133,8 @@
timerPrss: null, timerPrss: null,
showAutoBox: false, showAutoBox: false,
is_duration: true, is_duration: true,
playThisId:route.params.videoid playThisId: route.params.videoid,
}) });
// 获取视频 待删 MARKET-4168 // 获取视频 待删 MARKET-4168
// const resVideoData = async () => { // const resVideoData = async () => {
@ -178,20 +163,18 @@
// }; // };
// resVideoData(); // resVideoData();
const goBack = () => { const goBack = () => {
router.push('/class/'+classid); router.push("/class/" + classid);
} };
// 埋点请求 // 埋点请求
const postlogData = async (logData) => { const postlogData = async (logData) => {
const getLogdata = state.arrVideo.filter( t=> t.id==state.videoid); const getLogdata = state.arrVideo.filter((t) => t.id == state.videoid);
await classlog(logData, getLogdata[0].logdata); await classlog(logData, getLogdata[0].logdata);
} };
// 列表点击切换视频 // 列表点击切换视频
const getvideo_click = async (id, replay = 0) => { const getvideo_click = async (id, replay = 0) => {
state.playThisId = id; state.playThisId = id;
state.is_duration = false; state.is_duration = false;
clearInterval(state.timerTxt); clearInterval(state.timerTxt);
@ -207,9 +190,7 @@
state.videoObject.autoplay = true; state.videoObject.autoplay = true;
state.videoObject.seek = 0; state.videoObject.seek = 0;
}, 500); }, 500);
};
}
/** /**
* 封装视频渲染 * 封装视频渲染
@ -217,7 +198,6 @@
* @resOne 1=第一次进入页面播放 * @resOne 1=第一次进入页面播放
**/ **/
const getvideoDom = async (id, replay = 0, resOne = 0) => { const getvideoDom = async (id, replay = 0, resOne = 0) => {
// 获取视频 // 获取视频
const res = await getVideo(classid, id); const res = await getVideo(classid, id);
if (res.code === 200) { if (res.code === 200) {
@ -249,26 +229,26 @@
state.is_duration = true; state.is_duration = true;
// 监听播放时间 // 监听播放时间
state.ckPlayer.addListener('time', timeHandler); state.ckPlayer.addListener("time", timeHandler);
function timeHandler(t) { function timeHandler(t) {
let tm = parseInt(t); let tm = parseInt(t);
localStorage.setItem(id + '_playTime', tm); localStorage.setItem(id + "_playTime", tm);
} }
// 监听播放和暂停 实现计时功能 // 监听播放和暂停 实现计时功能
state.ckPlayer.addListener('play', playHandler); state.ckPlayer.addListener("play", playHandler);
function playHandler() { function playHandler() {
myCounter.startCount(); myCounter.startCount();
} }
// 监听空格 // 监听空格
state.ckPlayer.addListener('pause', pauseHandler); state.ckPlayer.addListener("pause", pauseHandler);
function pauseHandler() { function pauseHandler() {
myCounter.stopCount(); myCounter.stopCount();
} }
// 监听播放结束 // 监听播放结束
state.ckPlayer.addListener('ended', endedHandler); state.ckPlayer.addListener("ended", endedHandler);
function endedHandler() { function endedHandler() {
myCounter.stopCount(); myCounter.stopCount();
// funAutoPlay(); // funAutoPlay();
@ -280,7 +260,7 @@
var step = 0; var step = 0;
var intervalId = null; var intervalId = null;
function count() { function count() {
localStorage.setItem(id + '_duration', parseInt(step)); localStorage.setItem(id + "_duration", parseInt(step));
step = step + 1; step = step + 1;
// 通过状态改变来关闭计时器 // 通过状态改变来关闭计时器
@ -301,9 +281,8 @@
clearInterval(intervalId); clearInterval(intervalId);
intervalId = null; intervalId = null;
} }
return { startCount: start, stopCount: stop } return { startCount: start, stopCount: stop };
})() })();
// 如果没播放权限清除视频 // 如果没播放权限清除视频
if (state.isAuth === false) { if (state.isAuth === false) {
@ -313,27 +292,27 @@
} }
// 发送埋点 切换视频发送 第一次播放不发送 // 发送埋点 切换视频发送 第一次播放不发送
let get_duration = localStorage.getItem(state.videoid + '_duration'); let get_duration = localStorage.getItem(state.videoid + "_duration");
if (resOne != 1 && get_duration) { if (resOne != 1 && get_duration) {
let logData = { let logData = {
logid: state.logid, logid: state.logid,
pytime: localStorage.getItem(state.videoid + '_playTime'), pytime: localStorage.getItem(state.videoid + "_playTime"),
duration: localStorage.getItem(state.videoid + '_duration'), duration: localStorage.getItem(state.videoid + "_duration"),
videoid: state.videoid, videoid: state.videoid,
} };
postlogData(logData); postlogData(logData);
} }
// 重置新id // 重置新id
state.logid = res.data.logid; state.logid = res.data.logid;
state.videoid = res.data.id; state.videoid = res.data.id;
console.log('log_videoid',state.videoid); console.log("log_videoid", state.videoid);
// 修改路由 // 修改路由
let winState = { url: id }; let winState = { url: id };
window.history.pushState(winState, '', id); window.history.pushState(winState, "", id);
return state; return state;
} };
// 播放列表 // 播放列表
const resLessonList = async () => { const resLessonList = async () => {
@ -364,14 +343,13 @@
state.lessonList[parent].video.forEach((item, child) => { state.lessonList[parent].video.forEach((item, child) => {
if (item.id == id) { if (item.id == id) {
if (state.lessonList[parent].video.length == child + 1) { if (state.lessonList[parent].video.length == child + 1) {
getNextIdarr(parent + 1, 0) getNextIdarr(parent + 1, 0);
} else { } else {
getNextIdarr(parent, child + 1) getNextIdarr(parent, child + 1);
} }
} }
}); });
}); });
}; };
// 查找下一个视频 // 查找下一个视频
@ -390,7 +368,6 @@
}); });
}; };
const myscroll = ref(null); const myscroll = ref(null);
onMounted(() => { onMounted(() => {
@ -409,60 +386,56 @@
myscroll.value.wrap.scrollTop = gettop - 200; myscroll.value.wrap.scrollTop = gettop - 200;
}, 1000); }, 1000);
window.onbeforeunload = function() { window.onbeforeunload = function() {
// 定义对象 // 定义对象
let logData = { let logData = {
logid: state.video.logid, logid: state.video.logid,
pytime: localStorage.getItem(state.videoid + '_playTime'), pytime: localStorage.getItem(state.videoid + "_playTime"),
duration: localStorage.getItem(state.videoid + '_duration'), duration: localStorage.getItem(state.videoid + "_duration"),
videoid: state.videoid, videoid: state.videoid,
} };
postlogData(logData); postlogData(logData);
} };
// 监听a点击执行埋点 // 监听a点击执行埋点
var tbody = document.getElementById("myheader"); var tbody = document.getElementById("myheader");
tbody.onclick = function(e) { tbody.onclick = function(e) {
myaddEvent(e); myaddEvent(e);
} };
var videolista = document.getElementById("videoList"); var videolista = document.getElementById("videoList");
videolista.onclick = function(e) { videolista.onclick = function(e) {
myaddEvent(e); myaddEvent(e);
} };
function myaddEvent(e) { function myaddEvent(e) {
e = e || event; e = e || event;
var target = e.target || e.srcElement.href; var target = e.target || e.srcElement.href;
e.preventDefault(); e.preventDefault();
if (target.tagName == 'A') { if (target.tagName == "A") {
//console.log(target.href); //console.log(target.href);
// 定义对象 // 定义对象
let logData = { let logData = {
logid: state.video.logid, logid: state.video.logid,
pytime: localStorage.getItem(state.videoid + '_playTime'), pytime: localStorage.getItem(state.videoid + "_playTime"),
duration: localStorage.getItem(state.videoid + '_duration'), duration: localStorage.getItem(state.videoid + "_duration"),
videoid: state.videoid, videoid: state.videoid,
} };
// 发送埋单请求 // 发送埋单请求
postlogData(logData); postlogData(logData);
setTimeout("top.location.href = '" + target.href + "'", 100); setTimeout("top.location.href = '" + target.href + "'", 100);
} }
} }
});
})
onUnmounted(() => { onUnmounted(() => {
// 定义对象 // 定义对象
let logData = { let logData = {
logid: state.video.logid, logid: state.video.logid,
pytime: localStorage.getItem(state.videoid + '_playTime'), pytime: localStorage.getItem(state.videoid + "_playTime"),
duration: localStorage.getItem(state.videoid + '_duration'), duration: localStorage.getItem(state.videoid + "_duration"),
videoid: state.videoid, videoid: state.videoid,
} };
postlogData(logData); postlogData(logData);
}) });
return { return {
...toRefs(state), ...toRefs(state),
@ -472,9 +445,9 @@
getvideo_click, getvideo_click,
myscroll, myscroll,
goBack, goBack,
} };
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -489,7 +462,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
background-color: rgb(0, 0, 0, .7); background-color: rgb(0, 0, 0, 0.7);
backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
z-index: 900; z-index: 900;
@ -570,11 +543,11 @@
} }
.status_1 { .status_1 {
color: #FF3C23; color: #ff3c23;
} }
.status_2 { .status_2 {
color: #67C23A; color: #67c23a;
} }
.status_3 { .status_3 {
@ -598,7 +571,6 @@
overflow: hidden; overflow: hidden;
} }
.videoBox { .videoBox {
position: absolute; position: absolute;
left: 0; left: 0;
@ -621,9 +593,7 @@
background-color: #0f0f0f; background-color: #0f0f0f;
} }
.classtil { .classtil {
font-size: 22px; font-size: 22px;
color: #eee; color: #eee;
background-color: #000; background-color: #000;
@ -660,8 +630,6 @@
color: #8496ab; color: #8496ab;
} }
.item { .item {
font-size: 14px; font-size: 14px;
color: #617288; color: #617288;
@ -693,8 +661,6 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
} }
} }

2
src/views/studypath/jiandaoyun.vue
Unescape View File

@ -77,7 +77,7 @@
<div class="infobox"> <div class="infobox">
<div class="til">了解简道云并完成注册或登录</div> <div class="til">了解简道云并完成注册或登录</div>
<div class="flex-6" style="margin: 16px 0 28px;"> <div class="flex-6" style="margin: 16px 0 28px;">
<a class="btn-jdy f14 newbtn3" href="/video/play/5206" target="_blank">简道云介绍</a> <a class="btn-jdy f14 newbtn3" href="/video/play/5579" target="_blank">简道云介绍</a>
<a class="btn-jdy f14 newbtn3" href="https://www.jiandaoyun.com/signin" target="_blank">简道云登录或注册</a> <a class="btn-jdy f14 newbtn3" href="https://www.jiandaoyun.com/signin" target="_blank">简道云登录或注册</a>
</div> </div>

212
src/views/video/play.vue
Unescape View File

@ -1,11 +1,9 @@
<template> <template>
<div v-wechat-title="'正在播放：' + play_title"></div> <div v-wechat-title="'正在播放：' + play_title"></div>
<div class="main"> <div class="main">
<div class="videoBox flex-2"> <div class="videoBox flex-2">
<div class="viewtil" style="min-height:8%"> <div class="viewtil" style="min-height:8%">
<el-page-header @back="goBack(videopid)" title="返回课程" :content="video.it618_name"> <el-page-header @back="goBack(videopid)" title="返回课程" :content="video.it618_name"> </el-page-header>
</el-page-header>
</div> </div>
<div :class="{ affix: is_scroll }"></div> <div :class="{ affix: is_scroll }"></div>
@ -27,86 +25,69 @@
<div class="txt">本节视频已看完</div> <div class="txt">本节视频已看完</div>
<div v-if="playThisId != playNextId && playNextId != 0"> <div v-if="playThisId != playNextId && playNextId != 0">
<div class="txt_next">下一节：<span class="fw600">{{playNextTitle}}</span></div> <div class="txt_next">
下一节：<span class="fw600">{{ playNextTitle }}</span>
</div>
<div class="sel_btn_box flex-3"> <div class="sel_btn_box flex-3">
<div class="btn_sty" @click="getvideo_click(playThisId,1);">重播</div> <div class="btn_sty" @click="getvideo_click(playThisId, 1)">重播</div>
<div class="btn_sty" @click="getvideo_click(playNextId);">播放下一节</div> <div class="btn_sty" @click="getvideo_click(playNextId)">播放下一节</div>
</div> </div>
</div> </div>
<div v-else> <div v-else>
<div class="txt_next">已是最后一节</div> <div class="txt_next">已是最后一节</div>
<div class="sel_btn_box flex-3"> <div class="sel_btn_box flex-3">
<div class="btn_sty" style="margin: 0 auto;" @click="getvideo_click(playThisId,1);">重播</div> <div class="btn_sty" style="margin: 0 auto;" @click="getvideo_click(playThisId, 1)">重播</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="navbox" id="videoList"> <div class="navbox" id="videoList">
<div class="cate"> <div class="cate">
<i class="iconfont icon-mulu"></i> <i class="iconfont icon-mulu"></i>
<span>课程章节</span> <span>课程章节</span>
</div> </div>
<el-scrollbar style="height: 90%; overflow: hidden;" ref="myscroll"> <el-scrollbar style="height: 90%; overflow: hidden;" ref="myscroll">
<div style="padding-bottom: 40px;"> <div style="padding-bottom: 40px;">
<div class="looplist" v-for="(item, i) in lessonList" :key="i"> <div class="looplist" v-for="(item, i) in lessonList" :key="i">
<div class="otile hide-txt">{{ item.it618_name }}</div> <div class="otile hide-txt">{{ item.it618_name }}</div>
<ul class="vlist"> <ul class="vlist">
<li class="item" v-for="(item, i) in item.video" :key="i"> <li class="item" v-for="(item, i) in item.video" :key="i">
<a class="a-play flex-1" href="javascript:;" @click="getvideo_click(item.id)" <a class="a-play flex-1" href="javascript:;" @click="getvideo_click(item.id)" :class="{ playcur: playcur == item.id }">
:class="{playcur : playcur == item.id}"> <img class="playing" src="@/assets/img/playing.gif" v-if="playcur == item.id" />
<img class="playing" src="@/assets/img/playing.gif" v-if="playcur == item.id">
<i class="iconfont icon-bofang2" v-else></i> <i class="iconfont icon-bofang2" v-else></i>
<div class="title hide-txt"><span <div class="title hide-txt">
:class="'status_'+item.video_status">{{item.video_state}}</span>{{item.it618_name}}</div> <span :class="'status_' + item.video_status">{{ item.video_state }}</span
>{{ item.it618_name }}
</div>
<div class="time">{{ item.videoTime }}</div> <div class="time">{{ item.videoTime }}</div>
</a> </a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</el-scrollbar> </el-scrollbar>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from "vue-router";
import { import { getVideo, getPlayList, classlog, maLookVideoTracking, sourceDeviceLog, updateVideoCountLog, updateVideoPlayEnd } from "@/api/video";
getVideo, import { toRefs, reactive, onMounted, ref, onUnmounted } from "vue";
getPlayList,
classlog,
maLookVideoTracking,
sourceDeviceLog,
updateVideoCountLog,
updateVideoPlayEnd
} from "@/api/video";
import { toRefs, reactive, onMounted, ref, onUnmounted } from 'vue';
import { isMobileValue } from "@/utils/isMobile"; import { isMobileValue } from "@/utils/isMobile";
export default { export default {
name: "video_course_play", name: "video_course_play",
setup() { setup() {
const route = useRoute() const route = useRoute();
const router = useRouter() const router = useRouter();
const videoid = route.params.playid; const videoid = route.params.playid;
const state = reactive({ const state = reactive({
@ -119,22 +100,22 @@
lessonList: [], lessonList: [],
videoObject: { videoObject: {
container: '#VideoPlay', container: "#VideoPlay",
variable: 'player', variable: "player",
autoplay: false, autoplay: false,
html5m3u8: true, html5m3u8: true,
subtitle: false, subtitle: false,
loop: false, loop: false,
//loaded: 'loadHandler',//加载播放器后调用的函数 //loaded: 'loadHandler',//加载播放器后调用的函数
video: '', video: "",
seek: '0', seek: "0",
//debug:true, //debug:true,
}, },
playcur: 0, playcur: 0,
logid: 0, logid: 0,
videoid: 0, videoid: 0,
videopid: 0, videopid: 0,
play_title: '', play_title: "",
ckPlayer: null, ckPlayer: null,
playIndex: 0, playIndex: 0,
playNextId: 0, playNextId: 0,
@ -146,32 +127,31 @@
showAutoBox: false, showAutoBox: false,
is_duration: true, is_duration: true,
is_scroll: false, is_scroll: false,
playThisId: route.params.playid playThisId: route.params.playid,
}) });
const goBack = (pid) => { const goBack = (pid) => {
router.push('/video/' + pid); router.push("/video/" + pid);
} };
// 渠道和设备埋点 // 渠道和设备埋点
const postSourceDeviceLog = async () => { const postSourceDeviceLog = async () => {
let get_from = route.query.from || null; let get_from = route.query.from || null;
const params = { const params = {
source: get_from, source: get_from,
device: isMobileValue() device: isMobileValue(),
} };
await sourceDeviceLog(params); await sourceDeviceLog(params);
} };
// 埋点请求 // 埋点请求
const postlogData = async (logData) => { const postlogData = async (logData) => {
let logParams = { let logParams = {
...logData, ...logData,
vid: state.videoid vid: state.videoid,
} };
await classlog(logParams); await classlog(logParams);
} };
// 列表点击切换视频 // 列表点击切换视频
const getvideo_click = async (id, replay = 0) => { const getvideo_click = async (id, replay = 0) => {
@ -190,8 +170,7 @@
state.videoObject.autoplay = true; state.videoObject.autoplay = true;
state.videoObject.seek = 0; state.videoObject.seek = 0;
}, 500); }, 500);
};
}
// ma埋点 // ma埋点
const resmaLookVideoTracking = async (id) => { const resmaLookVideoTracking = async (id) => {
@ -211,7 +190,6 @@
* @param resOne 1=第一次进入页面播放 * @param resOne 1=第一次进入页面播放
**/ **/
const getvideoDom = async (id, replay = 0, resOne = 0) => { const getvideoDom = async (id, replay = 0, resOne = 0) => {
// 首次播放埋点 // 首次播放埋点
if (resOne === 1) { if (resOne === 1) {
postSourceDeviceLog(); postSourceDeviceLog();
@ -225,7 +203,7 @@
state.play_title = res.data.it618_name; state.play_title = res.data.it618_name;
state.videoObject.video = res.data.it618_videourl; state.videoObject.video = res.data.it618_videourl;
console.log('res.data', res.data); console.log("res.data", res.data);
if (res.data.playtime > 0) { if (res.data.playtime > 0) {
state.videoObject.seek = res.data.playtime; state.videoObject.seek = res.data.playtime;
@ -252,44 +230,43 @@
state.is_duration = true; state.is_duration = true;
// 监听播放时间 // 监听播放时间
state.ckPlayer.addListener('time', timeHandler); state.ckPlayer.addListener("time", timeHandler);
function timeHandler(t) { function timeHandler(t) {
let tm = parseInt(t); let tm = parseInt(t);
localStorage.setItem(id + '_playTime_video', tm); localStorage.setItem(id + "_playTime_video", tm);
} }
// 监听播放和暂停 实现计时功能 // 监听播放和暂停 实现计时功能
state.ckPlayer.addListener('play', playHandler); state.ckPlayer.addListener("play", playHandler);
function playHandler() { function playHandler() {
myCounter.startCount(); myCounter.startCount();
} }
// 监听空格 // 监听空格
state.ckPlayer.addListener('pause', pauseHandler); state.ckPlayer.addListener("pause", pauseHandler);
function pauseHandler() { function pauseHandler() {
myCounter.stopCount(); myCounter.stopCount();
} }
// 监听播放结束 // 监听播放结束
state.ckPlayer.addListener('ended', endedHandler); state.ckPlayer.addListener("ended", endedHandler);
function endedHandler() { function endedHandler() {
myCounter.stopCount(); myCounter.stopCount();
// funAutoPlay(); // funAutoPlay();
state.showAutoBox = true; state.showAutoBox = true;
// 完播埋点 // 完播埋点
let log2Param = { let log2Param = {
id:state.video.logid2 id: state.video.logid2,
} };
updateVideoPlayEnd(log2Param); updateVideoPlayEnd(log2Param);
} }
//自定义计时器 //自定义计时器
const myCounter = (function() { const myCounter = (function() {
var step = 0; var step = 0;
var intervalId = null; var intervalId = null;
function count() { function count() {
localStorage.setItem(id + '_duration_video', parseInt(step)); localStorage.setItem(id + "_duration_video", parseInt(step));
if (parseInt(step) === 10) { if (parseInt(step) === 10) {
resmaLookVideoTracking(id); resmaLookVideoTracking(id);
} }
@ -308,12 +285,11 @@
if (state.pointTimer == 5) { if (state.pointTimer == 5) {
state.pointTimer = 0; state.pointTimer = 0;
let log2Param = { let log2Param = {
id:state.video.logid2 id: state.video.logid2,
} };
updateVideoCountLog(log2Param); updateVideoCountLog(log2Param);
// console.log("发送埋点",state.video.logid2); // console.log("发送埋点",state.video.logid2);
} }
} }
function start() { function start() {
if (intervalId == null) { if (intervalId == null) {
@ -326,9 +302,8 @@
clearInterval(intervalId); clearInterval(intervalId);
intervalId = null; intervalId = null;
} }
return { startCount: start, stopCount: stop } return { startCount: start, stopCount: stop };
})() })();
// 如果没播放权限清除视频 // 如果没播放权限清除视频
if (state.isAuth === false) { if (state.isAuth === false) {
@ -338,26 +313,26 @@
} }
// 发送埋点 切换视频发送 第一次播放不发送 // 发送埋点 切换视频发送 第一次播放不发送
let get_duration = localStorage.getItem(state.videoid + '_duration_video'); let get_duration = localStorage.getItem(state.videoid + "_duration_video");
if (resOne != 1 && get_duration) { if (resOne != 1 && get_duration) {
let logData = { let logData = {
logid: state.logid, logid: state.logid,
pytime: localStorage.getItem(state.videoid + '_playTime_video'), pytime: localStorage.getItem(state.videoid + "_playTime_video"),
duration: localStorage.getItem(state.videoid + '_duration_video'), duration: localStorage.getItem(state.videoid + "_duration_video"),
} };
postlogData(logData); postlogData(logData);
} }
// 重置新id // 重置新id
state.logid = res.data.logid; state.logid = res.data.logid;
state.videoid = res.data.id; state.videoid = res.data.id;
console.log('log_videoid', state.videoid); console.log("log_videoid", state.videoid);
// 修改路由 // 修改路由
let winState = { url: id }; let winState = { url: id };
window.history.pushState(winState, '', id); window.history.pushState(winState, "", id);
return state; return state;
} };
// 播放列表 // 播放列表
const resLessonList = async () => { const resLessonList = async () => {
@ -388,14 +363,13 @@
state.lessonList[parent].video.forEach((item, child) => { state.lessonList[parent].video.forEach((item, child) => {
if (item.id == id) { if (item.id == id) {
if (state.lessonList[parent].video.length == child + 1) { if (state.lessonList[parent].video.length == child + 1) {
getNextIdarr(parent + 1, 0) getNextIdarr(parent + 1, 0);
} else { } else {
getNextIdarr(parent, child + 1) getNextIdarr(parent, child + 1);
} }
} }
}); });
}); });
}; };
// 查找下一个视频 // 查找下一个视频
@ -414,7 +388,6 @@
}); });
}; };
const myscroll = ref(null); const myscroll = ref(null);
onMounted(() => { onMounted(() => {
@ -433,66 +406,62 @@
myscroll.value.wrap.scrollTop = gettop - 200; myscroll.value.wrap.scrollTop = gettop - 200;
}, 1000); }, 1000);
window.onbeforeunload = function() { window.onbeforeunload = function() {
// 定义对象 // 定义对象
let logData = { let logData = {
logid: state.video.logid, logid: state.video.logid,
pytime: localStorage.getItem(state.videoid + '_playTime_video'), pytime: localStorage.getItem(state.videoid + "_playTime_video"),
duration: localStorage.getItem(state.videoid + '_duration_video'), duration: localStorage.getItem(state.videoid + "_duration_video"),
} };
postlogData(logData); postlogData(logData);
} };
// 监听a点击执行埋点 // 监听a点击执行埋点
var tbody = document.getElementById("myheader"); var tbody = document.getElementById("myheader");
tbody.onclick = function(e) { tbody.onclick = function(e) {
myaddEvent(e); myaddEvent(e);
} };
var videolista = document.getElementById("videoList"); var videolista = document.getElementById("videoList");
videolista.onclick = function(e) { videolista.onclick = function(e) {
myaddEvent(e); myaddEvent(e);
} };
function myaddEvent(e) { function myaddEvent(e) {
e = e || event; e = e || event;
var target = e.target || e.srcElement.href; var target = e.target || e.srcElement.href;
e.preventDefault(); e.preventDefault();
if (target.tagName == 'A') { if (target.tagName == "A") {
//console.log(target.href); //console.log(target.href);
// 定义对象 // 定义对象
let logData = { let logData = {
logid: state.video.logid, logid: state.video.logid,
pytime: localStorage.getItem(state.videoid + '_playTime_video'), pytime: localStorage.getItem(state.videoid + "_playTime_video"),
duration: localStorage.getItem(state.videoid + '_duration_video'), duration: localStorage.getItem(state.videoid + "_duration_video"),
} };
// 发送埋单请求 // 发送埋单请求
postlogData(logData); postlogData(logData);
setTimeout("top.location.href = '" + target.href + "'", 100); setTimeout("top.location.href = '" + target.href + "'", 100);
} }
} }
window.addEventListener('scroll', function () { window.addEventListener("scroll", function() {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 50) { if (scrollTop > 50) {
state.is_scroll = true; state.is_scroll = true;
} else { } else {
state.is_scroll = false; state.is_scroll = false;
} }
}) });
});
})
onUnmounted(() => { onUnmounted(() => {
// 定义对象 // 定义对象
let logData = { let logData = {
logid: state.video.logid, logid: state.video.logid,
pytime: localStorage.getItem(state.videoid + '_playTime_video'), pytime: localStorage.getItem(state.videoid + "_playTime_video"),
duration: localStorage.getItem(state.videoid + '_duration_video'), duration: localStorage.getItem(state.videoid + "_duration_video"),
} };
postlogData(logData); postlogData(logData);
}) });
return { return {
...toRefs(state), ...toRefs(state),
@ -501,9 +470,9 @@
getvideo_click, getvideo_click,
myscroll, myscroll,
goBack, goBack,
} };
} },
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@ -518,7 +487,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
text-align: center; text-align: center;
background-color: rgb(0, 0, 0, .7); background-color: rgb(0, 0, 0, 0.7);
backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
-webkit-backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px);
z-index: 900; z-index: 900;
@ -601,11 +570,11 @@
} }
.status_1 { .status_1 {
color: #FF3C23; color: #ff3c23;
} }
.status_2 { .status_2 {
color: #67C23A; color: #67c23a;
} }
.status_3 { .status_3 {
@ -619,6 +588,7 @@
bottom: 0; bottom: 0;
right: 0; right: 0;
background-color: #000; background-color: #000;
z-index: 2;
} }
.mbox { .mbox {
@ -629,7 +599,6 @@
overflow: hidden; overflow: hidden;
} }
.videoBox { .videoBox {
position: absolute; position: absolute;
left: 0; left: 0;
@ -652,9 +621,7 @@
background-color: #0f0f0f; background-color: #0f0f0f;
} }
.classtil { .classtil {
font-size: 22px; font-size: 22px;
color: #eee; color: #eee;
background-color: #000; background-color: #000;
@ -691,8 +658,6 @@
color: #8496ab; color: #8496ab;
} }
.item { .item {
font-size: 14px; font-size: 14px;
color: #617288; color: #617288;
@ -724,8 +689,6 @@
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
} }
} }
@ -762,15 +725,11 @@
} }
</style> </style>
<style lang="scss"> <style lang="scss">
/*响应式-移动端*/ /*响应式-移动端*/
@import '~@/assets/css/m.css'; @import "~@/assets/css/m.css";
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
.affix { .affix {
height: 35vh; height: 35vh;
background-color: #fff; background-color: #fff;
@ -837,13 +796,13 @@
.cate { .cate {
background-color: #fff; background-color: #fff;
color: #333; color: #333;
border-bottom: solid 1px #CEDDF2; border-bottom: solid 1px #ceddf2;
} }
} }
.looplist { .looplist {
.otile { .otile {
border-bottom: solid 1px #CEDDF2; border-bottom: solid 1px #ceddf2;
padding-bottom: 12px; padding-bottom: 12px;
color: #333; color: #333;
} }
@ -851,11 +810,11 @@
.vlist { .vlist {
.item { .item {
margin-left: 24px; margin-left: 24px;
border-bottom: solid 1px #CEDDF2; border-bottom: solid 1px #ceddf2;
color: #333; color: #333;
.icon-bofang2 { .icon-bofang2 {
color: #B3C1D3 !important; color: #b3c1d3 !important;
} }
} }
} }
@ -880,7 +839,6 @@
.m-footr { .m-footr {
margin-top: 0; margin-top: 0;
} }
} }
</style> </style>

Write Preview
Loading…
Cancel
Save