|
@@ -90,6 +90,7 @@
|
|
|
controlsList="nodownload"
|
|
controlsList="nodownload"
|
|
|
controls
|
|
controls
|
|
|
@timeupdate="handleTimeUpdate"
|
|
@timeupdate="handleTimeUpdate"
|
|
|
|
|
+ @play="checkVideoPermission"
|
|
|
ref="videoRef"
|
|
ref="videoRef"
|
|
|
>
|
|
>
|
|
|
<source :src="videoSrc" type="video/mp4" />
|
|
<source :src="videoSrc" type="video/mp4" />
|
|
@@ -238,7 +239,7 @@ import {
|
|
|
Setting
|
|
Setting
|
|
|
} from '@element-plus/icons-vue'
|
|
} from '@element-plus/icons-vue'
|
|
|
import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
|
|
import { Search, ArrowLeftBold } from '@element-plus/icons-vue'
|
|
|
-import { valueEquals } from 'element-plus'
|
|
|
|
|
|
|
+import {ElMessage, ElMessageBox, ElNotification, valueEquals} from 'element-plus'
|
|
|
// 引入视频
|
|
// 引入视频
|
|
|
import video1 from '@/assets/02video/01video.mp4'
|
|
import video1 from '@/assets/02video/01video.mp4'
|
|
|
import video2 from '@/assets/02video/02video.mp4'
|
|
import video2 from '@/assets/02video/02video.mp4'
|
|
@@ -257,6 +258,7 @@ import video14 from '@/assets/02video/14video.mp4'
|
|
|
import video15 from '@/assets/02video/15video.mp4'
|
|
import video15 from '@/assets/02video/15video.mp4'
|
|
|
|
|
|
|
|
import {ClassType} from "@/api/class.js";
|
|
import {ClassType} from "@/api/class.js";
|
|
|
|
|
+import {Message} from "@/utils/message/Message.js";
|
|
|
|
|
|
|
|
const router = useRouter() // 获取当前路由对象
|
|
const router = useRouter() // 获取当前路由对象
|
|
|
// 搜索框
|
|
// 搜索框
|
|
@@ -383,6 +385,7 @@ const currentIndex = ref('1-1')
|
|
|
// 渲染课程标题到视频上方
|
|
// 渲染课程标题到视频上方
|
|
|
const smallTitle = ref('课前回顾')
|
|
const smallTitle = ref('课前回顾')
|
|
|
const handleSelect = index => {
|
|
const handleSelect = index => {
|
|
|
|
|
+
|
|
|
const findTitle = items => {
|
|
const findTitle = items => {
|
|
|
for (const item of items) {
|
|
for (const item of items) {
|
|
|
if (item.index === index) {
|
|
if (item.index === index) {
|
|
@@ -406,6 +409,9 @@ const handleSelect = index => {
|
|
|
videoSrc.value = videoPathMap.value[index]
|
|
videoSrc.value = videoPathMap.value[index]
|
|
|
currentIndex.value = index
|
|
currentIndex.value = index
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
|
|
+ //测试账号禁用视频
|
|
|
|
|
+ if (disableVideo())return;
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// 展平所有菜单项索引
|
|
// 展平所有菜单项索引
|
|
@@ -426,6 +432,9 @@ const flattenMenuItems = () => {
|
|
|
|
|
|
|
|
// 播放下一个视频
|
|
// 播放下一个视频
|
|
|
const playNextVideo = () => {
|
|
const playNextVideo = () => {
|
|
|
|
|
+ //测试账号禁用视频
|
|
|
|
|
+ if (disableVideo())return;
|
|
|
|
|
+
|
|
|
const allIndices = flattenMenuItems()
|
|
const allIndices = flattenMenuItems()
|
|
|
const currentIndexInList = allIndices.indexOf(currentIndex.value)
|
|
const currentIndexInList = allIndices.indexOf(currentIndex.value)
|
|
|
if (currentIndexInList !== -1 && currentIndexInList < allIndices.length - 1) {
|
|
if (currentIndexInList !== -1 && currentIndexInList < allIndices.length - 1) {
|
|
@@ -447,6 +456,9 @@ const playNextVideo = () => {
|
|
|
// 切换视频
|
|
// 切换视频
|
|
|
// 播放上一个视频
|
|
// 播放上一个视频
|
|
|
const playPreviousVideo = () => {
|
|
const playPreviousVideo = () => {
|
|
|
|
|
+ //测试账号禁用视频
|
|
|
|
|
+ if (disableVideo())return;
|
|
|
|
|
+
|
|
|
const allIndices = flattenMenuItems()
|
|
const allIndices = flattenMenuItems()
|
|
|
const currentIndexInList = allIndices.indexOf(currentIndex.value)
|
|
const currentIndexInList = allIndices.indexOf(currentIndex.value)
|
|
|
if (currentIndexInList > 0) {
|
|
if (currentIndexInList > 0) {
|
|
@@ -462,6 +474,9 @@ const playPreviousVideo = () => {
|
|
|
}
|
|
}
|
|
|
// 尝试播放视频,处理浏览器自动播放限制
|
|
// 尝试播放视频,处理浏览器自动播放限制
|
|
|
const tryPlayVideo = () => {
|
|
const tryPlayVideo = () => {
|
|
|
|
|
+ //测试账号禁用视频
|
|
|
|
|
+ if (disableVideo())return;
|
|
|
|
|
+
|
|
|
const playPromise = videoRef.value.play()
|
|
const playPromise = videoRef.value.play()
|
|
|
if (playPromise !== undefined) {
|
|
if (playPromise !== undefined) {
|
|
|
playPromise.catch(error => {
|
|
playPromise.catch(error => {
|
|
@@ -469,6 +484,55 @@ const tryPlayVideo = () => {
|
|
|
})
|
|
})
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+// 检查视频播放权限
|
|
|
|
|
+const checkVideoPermission = () => {
|
|
|
|
|
+ if (disableVideo()) {
|
|
|
|
|
+ if (videoRef.value) {
|
|
|
|
|
+ videoRef.value.pause();
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+
|
|
|
|
|
+//禁用视频
|
|
|
|
|
+const disableVideo = () => {
|
|
|
|
|
+ let dis = ["1-6","1-7","1-8","1-9","1-10","1-11","1-12","1-13","1-14","1-15"]
|
|
|
|
|
+
|
|
|
|
|
+ if (localStorage.getItem('userName') === "aiTest" &&
|
|
|
|
|
+ dis.indexOf(currentIndex.value) !== -1) {
|
|
|
|
|
+
|
|
|
|
|
+ if (videoRef.value) {
|
|
|
|
|
+ videoRef.value.pause()
|
|
|
|
|
+
|
|
|
|
|
+ // 禁用视频进度条拖拽功能
|
|
|
|
|
+ const handleSeeking = () => {
|
|
|
|
|
+ videoRef.value.pause()
|
|
|
|
|
+ Message().notifyWarning('您的账号并未开放此课程,禁止拖动进度条!', true)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ // 添加 seeking 事件监听器
|
|
|
|
|
+ videoRef.value.addEventListener('seeking', handleSeeking)
|
|
|
|
|
+
|
|
|
|
|
+ // 当视频源改变时,移除事件监听器,避免影响其他视频
|
|
|
|
|
+ const removeListener = () => {
|
|
|
|
|
+ videoRef.value.removeEventListener('seeking', handleSeeking)
|
|
|
|
|
+ videoRef.value.removeEventListener('loadedmetadata', removeListener)
|
|
|
|
|
+ }
|
|
|
|
|
+ videoRef.value.addEventListener('loadedmetadata', removeListener)
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ //提示禁用// 显示消息框
|
|
|
|
|
+ Message().notifyWarning('您的账号并未开放此课程!', true)
|
|
|
|
|
+ return true
|
|
|
|
|
+ } else {
|
|
|
|
|
+ // 若不符合禁用条件,移除事件监听器
|
|
|
|
|
+ if (videoRef.value) {
|
|
|
|
|
+ videoRef.value.removeEventListener('seeking', (e) => {
|
|
|
|
|
+ e.preventDefault()
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ return false
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
|
|
|
// 视频 ref
|
|
// 视频 ref
|
|
|
const videoRef = ref(null)
|
|
const videoRef = ref(null)
|
|
@@ -1112,41 +1176,6 @@ video::-webkit-media-controls-panel {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// AI对话弹出框样式
|
|
|
|
|
-.ai-dialog {
|
|
|
|
|
- .el-dialog__header {
|
|
|
|
|
- background: linear-gradient(90deg, $primary-color, $secondary-color);
|
|
|
|
|
- color: white;
|
|
|
|
|
- padding: rpx(10) rpx(20);
|
|
|
|
|
- border-radius: rpx(10) rpx(10) 0 0;
|
|
|
|
|
-
|
|
|
|
|
- .el-dialog__title {
|
|
|
|
|
- font-size: rpx(12);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .el-dialog__body {
|
|
|
|
|
- padding: rpx(15);
|
|
|
|
|
- background-color: white;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .el-dialog__footer {
|
|
|
|
|
- border-top: none;
|
|
|
|
|
- padding: rpx(10) rpx(20);
|
|
|
|
|
- text-align: right;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .el-dialog {
|
|
|
|
|
- border-radius: rpx(10);
|
|
|
|
|
- // 修改半透明背景色
|
|
|
|
|
- background-color: rgba(255, 255, 255, 0.95);
|
|
|
|
|
- // 添加边框边晕效果
|
|
|
|
|
- box-shadow: 0 0 20px 5px rgba($primary-color, 0.6),
|
|
|
|
|
- 0 0 40px 10px rgba($primary-color, 0.4),
|
|
|
|
|
- 0 0 60px 15px rgba($primary-color, 0.2);
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
// 问题标题样式
|
|
// 问题标题样式
|
|
|
.question-title {
|
|
.question-title {
|
|
|
background: linear-gradient(
|
|
background: linear-gradient(
|
|
@@ -1306,36 +1335,6 @@ video::-webkit-media-controls-panel {
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
-// AI对话弹出框样式
|
|
|
|
|
-.ai-dialog {
|
|
|
|
|
- .el-dialog__header {
|
|
|
|
|
- background: linear-gradient(90deg, $primary-color, $secondary-color);
|
|
|
|
|
- color: white;
|
|
|
|
|
- padding: rpx(10) rpx(20);
|
|
|
|
|
- border-radius: rpx(10) rpx(10) 0 0;
|
|
|
|
|
-
|
|
|
|
|
- .el-dialog__title {
|
|
|
|
|
- font-size: rpx(12);
|
|
|
|
|
- }
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .el-dialog__body {
|
|
|
|
|
- padding: rpx(15);
|
|
|
|
|
- background-color: white;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .el-dialog__footer {
|
|
|
|
|
- border-top: none;
|
|
|
|
|
- padding: rpx(10) rpx(20);
|
|
|
|
|
- text-align: right;
|
|
|
|
|
- }
|
|
|
|
|
-
|
|
|
|
|
- .el-dialog {
|
|
|
|
|
- border-radius: rpx(10);
|
|
|
|
|
- box-shadow: 0 rpx(10) rpx(30) rgba(0, 0, 0, 0.15);
|
|
|
|
|
- }
|
|
|
|
|
-}
|
|
|
|
|
-
|
|
|
|
|
// AI消息样式
|
|
// AI消息样式
|
|
|
.ai-message {
|
|
.ai-message {
|
|
|
display: flex;
|
|
display: flex;
|
|
@@ -1598,4 +1597,5 @@ video::-webkit-media-controls-panel {
|
|
|
//background: linear-gradient(90deg, darken($primary-color, 5%), darken($secondary-color, 5%));
|
|
//background: linear-gradient(90deg, darken($primary-color, 5%), darken($secondary-color, 5%));
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
</style>
|
|
</style>
|