zm/taimed-international-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 更新视频播放器组件，添加章节视频功能并优化返回逻辑

Browse Source
This commit is contained in:
chenghuan
2026-04-09 16:48:57 +08:00
parent 943cc862fc
commit 17022d498a
19 changed files with 1192 additions and 1599 deletions
Download Patch File Download Diff File Expand all files Collapse all files

235
components/course/chapter-video.vue Normal file
View File

@@ -0,0 +1,235 @@
<template>
<view class="course-video">
<view v-if="videoList.length > 0" class="video-player" :class="{'full-screen': isFullScreen}">
<VideoPlayer
ref="commonVideo"
:videoTitle="videoTitle"
:currentVideoIndex="currentVideoIndex"
:currentVideoList="videoList"
:http="http"
:poster="cover"
@unlockChangeVideo="unlockChangeVideo"
@changeVideo="changeVideo"
@fullScreenChange="changeScreen"
/>
</view>
<view v-if="videoList.length > 0" style="height: 400rpx;"></view>
<view class="course-info">
<view class="course-flag">视频教学</view>
<view class="course-title">课程：{{ course.courseTitle || '' }}</view>
<view class="chapter-title">章节：{{ course.chapterTitle || '' }}</view>
<view v-if="videoList.length > 0" scroll-x="true" class="video-list">
<view v-for="(v, i) in videoList" :class="`video_item ${currentVideo.id == v.id ? 'active' : ''}`"
@click="handleClick(v,i)">
【{{ v.type == "2" ? "音频" : "视频" }}】{{ getNumber(i + 1) }}
</view>
</view>
</view>
</view>
</template>
<script>
import VideoPlayer from '@/components/video-player/index.vue'
import { BEFORE_NAVIGATE_BACK_EVENT } from '@/components/nav-bar/back-events'
export default {
components: {
VideoPlayer,
},
props: {
course: {
type: Object,
default: () => ({
courseTitle: '',
chapterTitle: '',
}),
},
cover: {
type: String,
default: '',
},
videoList: {
type: Array,
default: () => [],
},
currentIndex: {
type: Number,
default: 0,
},
http: {
type: Object,
default: () => {},
},
},
computed: {
videoTitle() {
return (this.course.chapterTitle || '') + ' ' + (this.getNumber(this.currentVideoIndex + 1))
},
},
watch: {
videoList: {
handler(newVal) {
this.currentVideoIndex = this.currentIndex;
if (newVal.length > 0) {
this.currentVideo = newVal[this.currentVideoIndex];
}
},
immediate: true,
},
},
data() {
return {
currentVideoIndex: this.currentIndex,
currentVideo: this.videoList[this.currentVideoIndex] || {},
screenLoading: false,
isFullScreen: false,
changeVideoLock: false,
_backHandler: null,
}
},
created() {
this._bindBackEvent()
},
beforeUnmount() {
this._unbindBackEvent()
this.unload()
},
beforeDestroy() {
this._unbindBackEvent()
this.unload()
},
methods: {
_bindBackEvent() {
if (this._backHandler) return
this._backHandler = () => { this.unload() }
uni.$on(BEFORE_NAVIGATE_BACK_EVENT, this._backHandler)
},
_unbindBackEvent() {
if (!this._backHandler) return
uni.$off(BEFORE_NAVIGATE_BACK_EVENT, this._backHandler)
this._backHandler = null
},
unload() {
this.$refs.commonVideo && this.$refs.commonVideo.unload && this.$refs.commonVideo.unload()
},
handleClick(v, i) {
if (this.changeVideoLock) {
uni.showToast({
title: '操作太频繁了',
icon: 'none',
})
return
}
this.currentVideoIndex = i;
this.currentVideo = v;
this.changeVideo(this.currentVideoIndex);
},
changeVideo(currentVideoIndex, type) {
switch (type) {
case 'next':
this.currentVideoIndex = currentVideoIndex + 1;
break;
case 'prev':
this.currentVideoIndex = currentVideoIndex - 1;
break;
default:
this.currentVideoIndex = currentVideoIndex;
break;
}
this.currentVideo = this.videoList[this.currentVideoIndex];
},
getNumber(num) {
return num >= 10 ? num : `0${num}`;
},
changeScreenLoading(status) {
this.screenLoading = status;
},
changeScreen(status) {
this.isFullScreen = status;
},
unlockChangeVideo() {
this.changeVideoLock = false
},
initVideo() {
this.changeVideoLock = true
this.screenLoading = false;
this.$nextTick(() => {
if (this.currentVideo.type != 2 && this.$refs.commonVideo && this.$refs.commonVideo.init) {
this.$refs.commonVideo.init({
currentVideo: this.currentVideo,
currentVideoList: this.videoList,
});
}
this.changeVideoLock = false
});
},
},
}
</script>
<style lang="scss" scoped>
.video-player {
position: fixed;
left: 0;
width: 100%;
height: 400rpx;
z-index: 2;
background-color: #000;
&.full-screen {
z-index: 9999999;
}
}
.course-info {
padding: 20rpx;
}
.course-flag {
font-size: 40rpx; color: #3983FF;
font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
padding: 20rpx 0;
}
.course-title {
font-size: 32rpx;
line-height: 1.2;
padding: 20rpx 0;
}
.chapter-title {
font-size: 28rpx;
line-height: 1.2;
padding: 20rpx 0;
}
.video-list {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap: 20rpx;
padding: 20rpx 0;
margin-top: 10rpx;
.video_item {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background: #fff;
color: #5188e5;
border-radius: 10rpx;
line-height: 1;
border: 1px solid #5188e5;
box-shadow: 0px 0px 6rpx 0px rgba(255, 255, 255, 1);
padding: 18rpx 20rpx;
font-weight: bold;
font-size: 28rpx;
&:nth-child(4n) {
margin-right: 0;
}
&.active {
background-color: #5188e5 !important;
color: #fff !important;
}
}
}
</style>

1
components/nav-bar/back-events.ts Normal file
View File

@@ -0,0 +1 @@
export const BEFORE_NAVIGATE_BACK_EVENT = '__edu_before_navigate_back__'

25
components/nav-bar/nav-bar.vue
View File

@@ -15,8 +15,9 @@
<script setup>
import { getStatusBarHeight, getTitleBarHeight, getNavBarHeight } from "@/utils/system"
import { BEFORE_NAVIGATE_BACK_EVENT } from "./back-events"
defineProps({
const props = defineProps({
title:{
type:String,
default:""
@@ -24,11 +25,31 @@ defineProps({
leftArrow:{
type:Boolean,
default:true
},
autoBack: {
type: Boolean,
default: true
},
safeBack: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['click-left'])
const handleClickLeft = () => {
uni.navigateBack()
emit('click-left')
if (props.safeBack) {
uni.$emit(BEFORE_NAVIGATE_BACK_EVENT)
setTimeout(() => {
uni.navigateBack()
}, 80)
return
}
if (props.autoBack) {
uni.navigateBack()
}
}
</script>

46
components/nav-bar/use-safe-back.ts Normal file
View File

@@ -0,0 +1,46 @@
import { ref } from 'vue'
import { onBackPress } from '@dcloudio/uni-app'
import { BEFORE_NAVIGATE_BACK_EVENT } from './back-events'
/**
* 安全返回组合式函数。
* 在页面 setup 中调用，自动注册 onBackPress 拦截。
* 返回前先通过事件通知所有订阅组件（如 VideoPlayer）执行清理，
* 延迟后再执行 navigateBack，避免 renderjs 组件销毁竞态。
*
* 用法：
* const { safeNavigateBack } = useSafeBack()
* // 配合 <nav-bar safe-back /> 即可，无需额外代码
*/
export function useSafeBack(options?: { delay?: number }) {
const leaving = ref(false)
const delay = options?.delay ?? 80
const safeNavigateBack = () => {
if (leaving.value) return
leaving.value = true
uni.$emit(BEFORE_NAVIGATE_BACK_EVENT)
setTimeout(() => {
uni.navigateBack()
}, delay)
}
onBackPress((event: any) => {
if (event?.from === 'navigateBack') {
return false
}
if (leaving.value) {
return true
}
safeNavigateBack()
return true
})
return {
leaving,
safeNavigateBack,
}
}

162
components/video-player/components/ControlBar.vue
View File

@@ -1,162 +0,0 @@
<template>
<view class="control-bar" :class="{ 'control-bar--visible': showControls }" @click.stop>
<view class="control-bar__top">
<!-- 进度条 -->
<ProgressBar
:current="currentTime"
:duration="duration"
@seek="handleSeek"
/>
</view>
<view class="control-bar__bottom">
<!-- 播放/暂停按钮 -->
<view class="control-button" @click="togglePlay">
<text class="icon">{{ isPlaying ? '⏸' : '▶️' }}</text>
</view>
<!-- 时间显示 -->
<view class="time-display">
<text>{{ formatTime(currentTime) }} / {{ formatTime(duration) }}</text>
</view>
<view class="control-bar__right">
<!-- 速率控制 -->
<SpeedControl
:rate="playbackRate"
@change="handleSpeedChange"
/>
<!-- 音量控制 -->
<VolumeControl
:volume="volume"
@change="handleVolumeChange"
/>
<!-- 全屏按钮 -->
<view class="control-button" @click="toggleFullscreen">
<text class="icon">{{ isFullscreen ? '⛶' : '⛶' }}</text>
</view>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import ProgressBar from './ProgressBar.vue'
import SpeedControl from './SpeedControl.vue'
import VolumeControl from './VolumeControl.vue'
interface Props {
currentTime: number
duration: number
isPlaying: boolean
isFullscreen: boolean
playbackRate: number
volume: number
showControls: boolean
}
const props = withDefaults(defineProps<Props>(), {
currentTime: 0,
duration: 0,
isPlaying: false,
isFullscreen: false,
playbackRate: 1.0,
volume: 100,
showControls: true
})
const emit = defineEmits<{
'toggle-play': []
'seek': [time: number]
'toggle-fullscreen': []
'speed-change': [rate: number]
'volume-change': [volume: number]
}>()
const formatTime = (seconds: number): string => {
if (!seconds || isNaN(seconds)) return '00:00'
const mins = Math.floor(seconds / 60)
const secs = Math.floor(seconds % 60)
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}
const togglePlay = () => {
emit('toggle-play')
}
const handleSeek = (time: number) => {
emit('seek', time)
}
const toggleFullscreen = () => {
emit('toggle-fullscreen')
}
const handleSpeedChange = (rate: number) => {
emit('speed-change', rate)
}
const handleVolumeChange = (volume: number) => {
emit('volume-change', volume)
}
</script>
<style lang="scss" scoped>
.control-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
padding: 20rpx;
opacity: 0;
transition: opacity 0.3s;
z-index: 10;
&--visible {
opacity: 1;
}
}
.control-bar__top {
margin-bottom: 20rpx;
}
.control-bar__bottom {
display: flex;
align-items: center;
gap: 20rpx;
}
.control-bar__right {
display: flex;
align-items: center;
gap: 20rpx;
margin-left: auto;
}
.control-button {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
.icon {
font-size: 40rpx;
color: #fff;
}
}
.time-display {
color: #fff;
font-size: 24rpx;
white-space: nowrap;
}
</style>

183
components/video-player/components/ProgressBar.vue
View File

@@ -1,183 +0,0 @@
<template>
<view class="progress-bar-container">
<view
class="progress-bar"
@touchstart="handleTouchStart"
@touchmove="handleTouchMove"
@touchend="handleTouchEnd"
@click="handleClick"
>
<!-- 背景轨道 -->
<view class="track"></view>
<!-- 已播放进度 -->
<view class="played" :style="{ width: playedPercent + '%' }"></view>
<!-- 拖动滑块 -->
<view class="thumb" :style="{ left: playedPercent + '%' }"></view>
<!-- 时间提示 -->
<view
v-if="showTimeTooltip"
class="time-tooltip"
:style="{ left: tooltipPosition + '%' }"
>
{{ formatTime(tooltipTime) }}
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
interface Props {
current: number
duration: number
}
const props = withDefaults(defineProps<Props>(), {
current: 0,
duration: 0
})
const emit = defineEmits<{
seek: [time: number]
}>()
const isDragging = ref(false)
const showTimeTooltip = ref(false)
const tooltipPosition = ref(0)
const tooltipTime = ref(0)
const progressBarWidth = ref(0)
const playedPercent = computed(() => {
if (!props.duration) return 0
return (props.current / props.duration) * 100
})
const formatTime = (seconds: number): string => {
if (!seconds || isNaN(seconds)) return '00:00'
const mins = Math.floor(seconds / 60)
const secs = Math.floor(seconds % 60)
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}
const handleTouchStart = (e: any) => {
isDragging.value = true
showTimeTooltip.value = true
// 获取进度条宽度
const query = uni.createSelectorQuery()
query.select('.progress-bar').boundingClientRect()
query.exec((res) => {
if (res[0]) {
progressBarWidth.value = res[0].width
}
})
}
const handleTouchMove = (e: any) => {
if (!isDragging.value || !progressBarWidth.value) return
const touch = e.touches[0]
const query = uni.createSelectorQuery()
query.select('.progress-bar').boundingClientRect()
query.exec((res) => {
if (res[0]) {
const rect = res[0]
const offsetX = touch.clientX - rect.left
const percent = Math.max(0, Math.min(100, (offsetX / rect.width) * 100))
tooltipPosition.value = percent
tooltipTime.value = (percent / 100) * props.duration
}
})
}
const handleTouchEnd = (e: any) => {
if (!isDragging.value) return
isDragging.value = false
showTimeTooltip.value = false
// 发送 seek 事件
emit('seek', tooltipTime.value)
}
const handleClick = (e: any) => {
const query = uni.createSelectorQuery()
query.select('.progress-bar').boundingClientRect()
query.exec((res) => {
if (res[0]) {
const rect = res[0]
const offsetX = e.detail.x - rect.left
const percent = Math.max(0, Math.min(100, (offsetX / rect.width) * 100))
const time = (percent / 100) * props.duration
emit('seek', time)
}
})
}
</script>
<style lang="scss" scoped>
.progress-bar-container {
width: 100%;
padding: 10rpx 0;
}
.progress-bar {
position: relative;
width: 100%;
height: 6rpx;
cursor: pointer;
}
.track {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 3rpx;
}
.played {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #1989fa;
border-radius: 3rpx;
transition: width 0.1s;
}
.thumb {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 24rpx;
height: 24rpx;
background-color: #fff;
border-radius: 50%;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.3);
transition: left 0.1s;
}
.time-tooltip {
position: absolute;
bottom: 30rpx;
transform: translateX(-50%);
padding: 8rpx 16rpx;
background-color: rgba(0, 0, 0, 0.8);
color: #fff;
font-size: 24rpx;
border-radius: 8rpx;
white-space: nowrap;
pointer-events: none;
}
</style>

122
components/video-player/components/SpeedControl.vue
View File

@@ -1,122 +0,0 @@
<template>
<view class="speed-control">
<view class="speed-button" @click="toggleMenu">
<text class="speed-text">{{ currentRate }}x</text>
<text class="arrow">▼</text>
</view>
<view v-if="showMenu" class="speed-menu">
<view
v-for="rate in rateOptions"
:key="rate"
class="speed-option"
:class="{ active: rate === currentRate }"
@click="selectRate(rate)"
>
{{ rate }}x
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
interface Props {
rate: number
}
const props = withDefaults(defineProps<Props>(), {
rate: 1.0
})
const emit = defineEmits<{
change: [rate: number]
}>()
const rateOptions = [0.5, 0.75, 1.0, 1.25, 1.5, 2.0]
const showMenu = ref(false)
const currentRate = ref(props.rate)
watch(
() => props.rate,
(newRate) => {
currentRate.value = newRate
}
)
const toggleMenu = () => {
showMenu.value = !showMenu.value
}
const selectRate = (rate: number) => {
currentRate.value = rate
showMenu.value = false
emit('change', rate)
}
</script>
<style lang="scss" scoped>
.speed-control {
position: relative;
}
.speed-button {
display: flex;
align-items: center;
gap: 8rpx;
padding: 10rpx 20rpx;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 8rpx;
cursor: pointer;
user-select: none;
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
}
.speed-text {
color: #fff;
font-size: 24rpx;
}
.arrow {
color: #fff;
font-size: 20rpx;
}
.speed-menu {
position: absolute;
bottom: 100%;
right: 0;
margin-bottom: 10rpx;
background-color: rgba(0, 0, 0, 0.9);
border-radius: 8rpx;
overflow: hidden;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.3);
}
.speed-option {
padding: 20rpx 40rpx;
color: #fff;
font-size: 28rpx;
text-align: center;
cursor: pointer;
user-select: none;
white-space: nowrap;
&:hover {
background-color: rgba(255, 255, 255, 0.1);
}
&.active {
color: #1989fa;
background-color: rgba(25, 137, 250, 0.1);
}
&:not(:last-child) {
border-bottom: 1rpx solid rgba(255, 255, 255, 0.1);
}
}
</style>

112
components/video-player/components/VolumeControl.vue
View File

@@ -1,112 +0,0 @@
<template>
<view class="volume-control">
<view class="volume-icon" @click="toggleMute">
<text class="icon">{{ isMuted ? '🔇' : '🔊' }}</text>
</view>
<view v-if="showSlider" class="volume-slider-wrapper">
<slider
class="volume-slider"
:value="currentVolume"
:min="0"
:max="100"
@change="handleVolumeChange"
@changing="handleVolumeChanging"
activeColor="#1989fa"
backgroundColor="rgba(255, 255, 255, 0.3)"
block-size="12"
/>
</view>
</view>
</template>
<script setup lang="ts">
import { ref, computed, watch } from 'vue'
interface Props {
volume: number
}
const props = withDefaults(defineProps<Props>(), {
volume: 100
})
const emit = defineEmits<{
change: [volume: number]
}>()
const showSlider = ref(false)
const currentVolume = ref(props.volume)
const isMuted = ref(false)
const volumeBeforeMute = ref(props.volume)
watch(
() => props.volume,
(newVolume) => {
currentVolume.value = newVolume
isMuted.value = newVolume === 0
}
)
const toggleMute = () => {
if (isMuted.value) {
// 取消静音
const volume = volumeBeforeMute.value || 50
currentVolume.value = volume
emit('change', volume)
isMuted.value = false
} else {
// 静音
volumeBeforeMute.value = currentVolume.value
currentVolume.value = 0
emit('change', 0)
isMuted.value = true
}
}
const handleVolumeChange = (e: any) => {
const volume = e.detail.value
currentVolume.value = volume
isMuted.value = volume === 0
emit('change', volume)
}
const handleVolumeChanging = (e: any) => {
currentVolume.value = e.detail.value
}
// 点击音量图标时切换滑块显示
const toggleSlider = () => {
showSlider.value = !showSlider.value
}
</script>
<style lang="scss" scoped>
.volume-control {
display: flex;
align-items: center;
gap: 10rpx;
position: relative;
}
.volume-icon {
width: 60rpx;
height: 60rpx;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
.icon {
font-size: 36rpx;
}
}
.volume-slider-wrapper {
width: 150rpx;
}
.volume-slider {
width: 100%;
}
</style>

73
components/video-player/composables/useVideoAPI.ts
View File

@@ -1,73 +0,0 @@
// components/video-player/composables/useVideoAPI.ts
import { ref } from 'vue'
import { videoApi } from '@/api/modules/video'
import type { IVideoInfo, VideoErrorType } from '@/types/video'
/**
* 视频 API 调用管理
*/
export function useVideoAPI() {
const isLoading = ref(false)
const error = ref<{ type: VideoErrorType; message: string } | null>(null)
/**
* 获取视频播放信息
*/
const fetchVideoInfo = async (params: {
id: number
}): Promise<IVideoInfo | null> => {
isLoading.value = true
error.value = null
try {
const response = await videoApi.checkVideo(params)
if (response.code === 0 && response.video) {
console.log('Video info fetched:', response.video)
return response.video
} else {
throw new Error(response.msg || '获取视频信息失败')
}
} catch (err: any) {
console.error('Failed to fetch video info:', err)
error.value = {
type: 'API_ERROR' as VideoErrorType,
message: err.message || '获取视频信息失败，请稍后重试'
}
return null
} finally {
isLoading.value = false
}
}
/**
* 报告错误视频
*/
const reportErrorVideo = async (params: {
chapterId: number
videoId: number
sort: number
}): Promise<void> => {
try {
await videoApi.addErrorCourse(params)
console.log('Error video reported:', params)
} catch (err) {
console.error('Failed to report error video:', err)
}
}
/**
* 清除错误
*/
const clearError = () => {
error.value = null
}
return {
isLoading,
error,
fetchVideoInfo,
reportErrorVideo,
clearError
}
}

189
components/video-player/composables/useVideoPlayer.ts
View File

@@ -1,189 +0,0 @@
// components/video-player/composables/useVideoPlayer.ts
import { ref, computed } from 'vue'
import { useVideoAPI } from './useVideoAPI'
import { useVideoProgress } from './useVideoProgress'
import type { IVideoInfo, IVideoPlayerProps, VideoErrorType } from '@/types/video'
/**
* 视频播放器核心逻辑
*/
export function useVideoPlayer(props: IVideoPlayerProps) {
const videoAPI = useVideoAPI()
const videoProgress = useVideoProgress()
// 状态
const currentVideoData = ref<IVideoInfo | null>(null)
const currentIndex = ref(props.currentIndex)
const isSetFirstTime = ref(false)
const isChanging = ref(false)
const showError = ref(false)
const errorMessage = ref('')
const canRetry = ref(false)
const platform = ref('')
// 获取平台信息
// #ifdef APP-PLUS
platform.value = uni.getSystemInfoSync().platform
// #endif
// #ifdef H5
platform.value = 'h5'
// #endif
/**
* 计算视频 URL
*/
const videoUrl = computed(() => {
if (!currentVideoData.value) return ''
if (currentVideoData.value.type === 0) {
// MP4 视频
return currentVideoData.value.mp4Url || currentVideoData.value.videoUrl || ''
} else {
// M3U8 视频
return currentVideoData.value.m3u8Url || ''
}
})
/**
* 计算封面图 URL
*/
const posterUrl = computed(() => {
if (!currentVideoData.value) return ''
// 如果是 MP4 视频，可以使用 OSS 视频截图功能
if (currentVideoData.value.type === 0 && currentVideoData.value.mp4Url) {
return `${currentVideoData.value.mp4Url}?x-oss-process=video/snapshot,t_1,f_jpg`
}
return ''
})
/**
* 检查视频是否可以播放
*/
const canPlayVideo = (videoInfo: IVideoInfo): boolean => {
// iOS 平台检查
if (platform.value === 'ios') {
if (videoInfo.type === 1 && !videoInfo.m3u8Url) {
return false
}
}
return true
}
/**
* 加载视频
*/
const loadVideo = async (index: number) => {
if (index < 0 || index >= props.videoList.length) {
showError.value = true
errorMessage.value = '视频索引超出范围'
canRetry.value = false
return
}
const videoItem = props.videoList[index]
currentIndex.value = index
// 重置状态
isSetFirstTime.value = false
showError.value = false
errorMessage.value = ''
canRetry.value = false
// 调用 API 获取视频信息
const videoInfo = await videoAPI.fetchVideoInfo({
id: videoItem.id
})
if (!videoInfo) {
showError.value = true
errorMessage.value = videoAPI.error.value?.message || '获取视频信息失败'
canRetry.value = true
return
}
// 检查视频类型和 URL
if (videoInfo.type === 1 && !videoInfo.m3u8Url) {
// M3U8 视频但没有 URL，报告错误
await videoAPI.reportErrorVideo({
chapterId: videoInfo.chapterId,
videoId: videoInfo.id,
sort: videoInfo.sort
})
showError.value = true
errorMessage.value = '抱歉，本视频加密信息错误，已经提交错误信息，请过一段时间再来观看或联系客服'
canRetry.value = false
return
}
// 设置当前视频数据
currentVideoData.value = videoInfo
// 获取初始播放位置
const initialPosition = videoProgress.getInitialPosition(videoInfo)
videoProgress.updateCurrentTime(initialPosition)
return videoInfo
}
/**
* 切换视频
*/
const changeVideo = async (newIndex: number) => {
if (isChanging.value) return
isChanging.value = true
try {
// 保存当前视频进度
if (currentVideoData.value) {
await videoProgress.saveNow(currentVideoData.value)
}
// 停止进度保存
videoProgress.stopSaving()
// 加载新视频
await loadVideo(newIndex)
} finally {
isChanging.value = false
}
}
/**
* 重试加载视频
*/
const retry = () => {
loadVideo(currentIndex.value)
}
return {
// 状态
currentVideoData,
currentIndex,
isSetFirstTime,
isChanging,
showError,
errorMessage,
canRetry,
platform,
isLoading: videoAPI.isLoading,
// 计算属性
videoUrl,
posterUrl,
// 方法
loadVideo,
changeVideo,
retry,
canPlayVideo,
// 进度管理
videoProgress
}
}

133
components/video-player/composables/useVideoProgress.ts
View File

@@ -1,133 +0,0 @@
// components/video-player/composables/useVideoProgress.ts
import { ref } from 'vue'
import { videoStorage } from '@/utils/videoStorage'
import { videoApi } from '@/api/modules/video'
import type { IVideoInfo } from '@/types/video'
/**
* 视频播放进度管理
*/
export function useVideoProgress() {
const currentTime = ref(0)
const isSaving = ref(false)
let saveTimer: any = null
/**
* 获取初始播放位置
* 合并本地和服务器的播放位置，取较大值
* 如果视频已经看完（播放位置 >= 总时长 - 5秒），则从头开始
*/
const getInitialPosition = (videoInfo: IVideoInfo): number => {
// 从服务器获取播放位置
const serverPosition = videoInfo.userCourseVideoPositionEntity?.position || 0
// 从本地存储获取播放位置
const localPosition = videoStorage.getVideoPosition(videoInfo.id) || 0
// 返回较大的值
// let position = Math.max(serverPosition, localPosition)
// 采用服务器记录的播放位置
let position = serverPosition
// 如果播放位置接近视频结尾（最后5秒内），则从头开始
const videoDuration = videoInfo.duration || 0
if (videoDuration > 0 && position >= videoDuration - 5) {
position = 0
console.log('Video already finished, reset to start')
}
console.log('Initial position:', {
server: serverPosition,
local: localPosition,
duration: videoDuration,
final: position
})
return position
}
/**
* 开始保存进度
* 每秒保存到本地
*/
const startSaving = (videoInfo: IVideoInfo) => {
// 清除之前的定时器
stopSaving()
// 每秒保存到本地
saveTimer = setInterval(() => {
if (currentTime.value > 0) {
videoStorage.saveVideoPosition(
videoInfo.id,
Math.floor(currentTime.value),
videoInfo
)
}
}, 1000)
}
/**
* 停止保存进度
*/
const stopSaving = () => {
if (saveTimer) {
clearInterval(saveTimer)
saveTimer = null
}
}
/**
* 保存进度到服务器
*/
const saveToServer = async (videoId: number, position: number) => {
if (isSaving.value) return
try {
isSaving.value = true
await videoApi.saveCoursePosition({
videoId,
position
})
console.log('Progress saved to server:', { videoId, position })
} catch (error) {
console.error('Failed to save progress to server:', error)
} finally {
isSaving.value = false
}
}
/**
* 立即保存当前进度
*/
const saveNow = async (videoInfo: IVideoInfo) => {
if (currentTime.value > 0) {
// 保存到本地 注释掉: 不再保存到本地
// videoStorage.saveVideoPosition(
// videoInfo.id,
// Math.floor(currentTime.value),
// videoInfo
// )
// 保存到服务器
await saveToServer(videoInfo.id, Math.floor(currentTime.value))
}
}
/**
* 更新当前播放时间
*/
const updateCurrentTime = (time: number) => {
currentTime.value = time
}
return {
currentTime,
isSaving,
getInitialPosition,
startSaving,
stopSaving,
saveToServer,
saveNow,
updateCurrentTime
}
}

947
components/video-player/index.vue
View File

@@ -1,523 +1,466 @@
<template>
<view class="video-player-container">
<!-- 视频播放器 -->
<view class="video-wrapper">
<video
v-if="!player.showError.value && player.videoUrl.value"
:id="videoId"
:src="player.videoUrl.value"
:poster="player.posterUrl.value"
:controls="true"
:page-gesture="true"
:vslide-gesture="true"
:vslide-gesture-in-fullscreen="true"
:show-center-play-btn="true"
:show-fullscreen-btn="true"
:show-play-btn="true"
:show-progress="true"
:enable-play-gesture="true"
:enable-progress-gesture="true"
:object-fit="objectFit"
:autoplay="true"
:initial-time="initialTime"
class="video-element"
@play="play"
@pause="pause"
@ended="ended"
@timeupdate="timeupdate"
@error="error"
@fullscreenchange="fullscreenChange"
@waiting="waiting"
@loadedmetadata="loadedmetadata"
/>
<!-- 倒计时遮罩 - 使用 cover-view 在 APP 中显示 -->
<cover-view v-if="showCountdown" class="countdown-overlay">
<cover-view class="countdown-content">
<cover-view class="countdown-timer">
<cover-view class="countdown-number">{{ countdownRemaining }}</cover-view>
<cover-view class="countdown-text">秒后播放下一个视频</cover-view>
</cover-view>
<cover-view class="countdown-actions">
<cover-view class="btn-cancel" @click="cancelCountdown">取消</cover-view>
<cover-view class="btn-replay" @click="replayVideo">重新播放</cover-view>
<cover-view class="btn-next" @click="playNext">立即播放</cover-view>
</cover-view>
</cover-view>
</cover-view>
<!-- 错误显示 -->
<view v-if="player.showError.value" class="error-display">
<view class="error-content">
<view class="error-message">{{ player.errorMessage.value }}</view>
<button v-if="player.canRetry.value" class="btn-retry" @click="retry">重试</button>
</view>
</view>
<!-- 加载中 -->
<view v-if="player.isLoading.value" class="loading-display">
<view class="loading-spinner"></view>
<text class="loading-text">加载中...</text>
</view>
</view>
</view>
<view>
<yb-video
ref="video" :title="videoTitle" height="400rpx"
autoplay
render-type="renderjs"
:crossOrigin="crossOrigin"
:src="src"
:initialTime="initialTime"
:custom="custom"
:poster="currentVideo.type == 2 ? poster : ''"
:alwaysShowControls="currentVideo.type == 2"
header
controls
open-direction="landscape-primary"
exitDirection="portrait"
object-fit="contain"
@loadeddata="handleLoaded"
@timeupdate="handleTimeUpdate"
@ended="handleEnded"
@loadstart="handleLoadStart"
@canplay="handleCanPlay"
@play="handlePlay"
@fullscreenchange="handleFullscreenChange"
@error="handleError"
>
<view v-if="!canPlay && !videoError" class="video-mask">{{ loadingText }}</view>
<view v-if="canNext && !videoError" class="video-mask">
<view>播放完成，倒计时 <text style="font-size: 40rpx; font-weight: bold;">{{ countdown }}</text>秒 后播放下一条</view>
<view class="video-control-btn-group">
<view class="video-control-btn" @click="handleReplay">重播</view>
<view class="video-control-btn" @click="handleNext">立即播放</view>
</view>
</view>
<view v-if="videoError && videoErrorMsg !== ''" class="video-mask">
<view>{{ videoErrorMsg }}</view>
</view>
</yb-video>
</view>
</template>
<script setup lang="ts">
import { ref, watch, onMounted, onUnmounted, nextTick } from 'vue'
import { useVideoPlayer } from './composables/useVideoPlayer'
import { videoStorage } from '@/utils/videoStorage'
import type { IVideoPlayerProps, IVideoInfo } from '@/types/video'
<script>
import { BEFORE_NAVIGATE_BACK_EVENT } from "@/components/nav-bar/back-events"
export default {
props: {
videoTitle: {
type: String,
default: '',
},
poster: {
type: String,
default: '',
},
currentVideoIndex: {
type: Number,
default: 0,
},
currentVideoList: {
type: Array,
default: () => [],
},
http: {
type: Object,
default: () => {},
},
},
computed: {
canNext() {
return this.isEnded && this.currentVideoIndex < this.currentVideoList.length - 1
},
currentVideo() {
return this.currentVideoList[this.currentVideoIndex] || {}
}
},
watch: {
currentVideo: {
handler(newVal, oldVal) {
if (newVal && newVal.id && newVal.id !== (oldVal && oldVal.id)) {
if (oldVal && oldVal.id) {
this._savePositionSnapshot(oldVal.id, parseInt(this.currentTime))
}
this._resetState();
this.updateCustomConfig();
}
},
immediate: true
}
},
data () {
return {
src: '',
isDestroyed: false,
beforeBackHandler: null,
canPlay: false,
videoError: false,
videoErrorMsg: '',
loadingText: '媒体文件加载中...',
currentTime: 0,
initialTime: 0,
isEnded: false,
countdown: 10,
countdownTimer: null,
endedTimer: null,
_requestVersion: 0,
three: '',
crossOrigin: '',
danmu: [],
quality: [],
works: [],
custom: {
slots: [{
innerHTML: '<div class="fast-progress-btn-box" style="left:15%;"><view class="yb-player-btn">-15s</view></div>',
followControls: true,
click: () => {
console.log('快退 基准时间 ' + this.currentTime)
this.$refs.video.seek(this.currentTime - 15)
}
},{
innerHTML: '<div class="fast-progress-btn-box" style="right:15%;"><view class="yb-player-btn">+15s</view></div>',
followControls: true,
click: () => {
console.log('快进 基准时间 ' + this.currentTime)
this.$refs.video.seek(this.currentTime + 15)
}
}],
header: {
disableMore: true,
disableBack: true,
},
controls: {
disableDanmuSend: true,
disableDanmuVisible: true,
disableFullscreen: false,
},
progress: {
rightSlots: [],
disableFullscreen: false,
},
},
text: ''
}
},
beforeUnmount() {
this._unbindBeforeBack()
this._cleanup()
},
beforeDestroy() {
this._unbindBeforeBack()
this._cleanup()
},
created() {
this._bindBeforeBack()
},
methods: {
_resetState() {
this.canPlay = false;
this.isEnded = false;
this.videoError = false;
this.videoErrorMsg = '';
this.loadingText = '媒体文件加载中...';
this.currentTime = 0;
this.initialTime = 0;
this.isDestroyed = false;
this._requestVersion++;
if (this.countdownTimer) {
clearInterval(this.countdownTimer);
this.countdownTimer = null;
}
if (this.endedTimer) {
clearTimeout(this.endedTimer);
this.endedTimer = null;
}
},
_bindBeforeBack() {
if (this.beforeBackHandler || !uni.$on) return
this.beforeBackHandler = () => {
this._cleanup()
}
uni.$on(BEFORE_NAVIGATE_BACK_EVENT, this.beforeBackHandler)
},
_unbindBeforeBack() {
if (!this.beforeBackHandler || !uni.$off) return
uni.$off(BEFORE_NAVIGATE_BACK_EVENT, this.beforeBackHandler)
this.beforeBackHandler = null
},
unload() {
this._cleanup()
},
_cleanup() {
if (this.isDestroyed) return
this.isDestroyed = true
const videoId = this.currentVideo ? this.currentVideo.id : null
const position = parseInt(this.currentTime)
if (this.$refs.video && this.$refs.video.unload) {
this.$refs.video.unload()
}
if (this.countdownTimer) {
clearInterval(this.countdownTimer);
this.countdownTimer = null;
}
if (this.endedTimer) {
clearTimeout(this.endedTimer);
this.endedTimer = null;
}
this._savePositionSnapshot(videoId, position)
},
_savePositionSnapshot(videoId, position) {
if (!videoId) return
this._saveLocalVideoPosition(videoId, position)
this._saveRemoteVideoPosition(videoId, position)
},
_saveLocalVideoPosition(videoId, position) {
const videoPosition = JSON.parse(uni.getStorageSync('videoPosition') || '{"order":[], "position":{}}')
if (!videoPosition.position) videoPosition.position = {}
if (!videoPosition.order) videoPosition.order = []
// 页面生命周期
// @ts-ignore
const onHide = typeof uni !== 'undefined' ? uni.onHide || (() => {}) : () => {}
const videoKeys = new Set(videoPosition.order)
if (videoKeys.size > 20) {
const firstId = videoKeys.values().next().value
delete videoPosition.position[firstId]
videoKeys.delete(firstId)
videoPosition.order = Array.from(videoKeys)
}
// Props
const props = withDefaults(defineProps<IVideoPlayerProps>(), {
countdownSeconds: 5,
showWatermark: false,
watermarkText: '本课程版权归天津众妙之门科技有限公司所有，翻版必究!'
})
videoPosition.position[videoId] = position
videoKeys.add(videoId)
uni.setStorageSync('videoPosition', JSON.stringify(videoPosition))
},
_saveRemoteVideoPosition(videoId, position) {
const http = this.http
if (!http || !http.request) return
http.request({
url: "sociology/course/saveCoursePosition",
method: "POST",
data: { videoId, position },
header: { 'Content-Type': 'application/json' },
}).then(() => {
console.log('保存视频播放位置成功：', videoId, position)
}).catch(() => {
console.log('保存视频播放位置失败')
})
},
updateCustomConfig() {
if (this.custom && this.custom.controls) {
this.custom.controls.disableFullscreen = this.currentVideo.type == 2;
this.custom.progress.disableFullscreen = this.currentVideo.type == 2;
}
this.changeSrc()
},
handleTimeUpdate (time) {
if (this.isDestroyed) return
if (!this.canPlay) return
if (this.isEnded && time > 0) {
this.isEnded = false
if (this.countdownTimer) {
clearInterval(this.countdownTimer)
this.countdownTimer = null
}
}
this.currentTime = time
this._saveLocalVideoPosition(this.currentVideo.id, parseInt(time))
},
handleEnded () {
if (this.isDestroyed) return
this.endedTimer = setTimeout(() => {
if (this.isDestroyed) return
this.isEnded = true;
this.startCountdown();
this.currentTime = 0
}, 300);
// Emits
const emit = defineEmits<{
play: [videoInfo: IVideoInfo]
pause: [position: number]
fullscreen: [isFullscreen: boolean]
error: [error: { type: string; message: string }]
ended: [videoInfo: IVideoInfo]
timeupdate: [data: { currentTime: number; duration: number }]
'video-change': [newIndex: number]
'update:current-index': [newIndex: number]
'countdown-start': []
'countdown-cancel': []
}>()
this._savePositionSnapshot(this.currentVideo.id, parseInt(this.currentTime))
// 使用 composables
const player = useVideoPlayer(props)
if (!this.isDestroyed && this.$refs.video && this.$refs.video.exitFullscreen) {
this.$refs.video.exitFullscreen()
}
},
startCountdown() {
this.countdown = 10;
if (this.countdownTimer) {
clearInterval(this.countdownTimer);
}
this.countdownTimer = setInterval(() => {
this.countdown--;
if (this.countdown <= 0) {
clearInterval(this.countdownTimer);
this.handleNext();
}
}, 1000);
},
handleLoadStart () {
this.loadingText = '媒体文件加载完成，准备播放'
},
handleCanPlay () {
if (this.isDestroyed) return
this.canPlay = true
this.videoError = false
},
handlePlay () {
if (this.isDestroyed) return
if (this.isEnded) {
this.isEnded = false
}
if (this.countdownTimer) {
clearInterval(this.countdownTimer)
this.countdownTimer = null
}
},
handleError () {
this.videoError = true
this.canPlay = false
},
handleNext () {
if (this.canNext) {
this.$emit('changeVideo', this.currentVideoIndex, 'next');
}
},
handleReplay () {
if (this.countdownTimer) {
clearInterval(this.countdownTimer);
this.countdownTimer = null;
}
this.$refs.video.seek(0)
this.isEnded = false
this.$refs.video.play()
},
changeSrc () {
this.getPlayAuth()
},
handleFullscreenChange (data) {
console.log('全屏状态改变：' + JSON.stringify(data))
this.$emit('fullScreenChange', data.fullscreen)
},
handleLoaded (e) {
console.log('视频加载状态：'+JSON.stringify(e))
if (e.type == 'init') {
this.loadingText = '媒体文件加载完成，立即播放'
}
},
async getPlayAuth () {
const version = ++this._requestVersion
const videoId = this.currentVideo.id
this.loadingText = '获取播放凭证...'
// 视频相关状态
const videoId = 'video-player-' + Date.now()
const videoContext = ref<any>(null)
const duration = ref(0)
const isPlaying = ref(false)
const isFullScreen = ref(false)
const showCountdown = ref(false)
const countdownRemaining = ref(props.countdownSeconds)
const objectFit = ref<'contain' | 'cover'>('contain')
const initialTime = ref(0)
let countdownTimer: any = null
const http = this.http
if (!http || !http.request) return
// 生命周期
onMounted(async () => {
// 初始化视频上下文
videoContext.value = uni.createVideoContext(videoId)
let res_check
try {
res_check = await http.request({
url: `sociology/course/checkVideo`,
method: "Post",
data: { id: videoId },
header: { "Content-Type": "application/json" },
})
} catch (e) {
if (version !== this._requestVersion) return
this.videoError = true
this.videoErrorMsg = '获取播放凭证失败'
return
}
// 加载视频信息
const videoInfo = await player.loadVideo(props.currentIndex)
if (version !== this._requestVersion) return
if (videoInfo) {
// 设置初始播放位置（loadVideo 内部已经调用过 getInitialPosition）
// 这里再次获取是为了确保 initialTime 和 video 组件同步
const position = player.videoProgress.getInitialPosition(videoInfo)
initialTime.value = position
console.log('Set initial time:', position, 'for video:', videoInfo.id)
// 如果有历史进度，使用 seek 跳转（因为 initial-time 可能不生效）
if (position > 0) {
setTimeout(() => {
videoContext.value?.seek(position)
console.log('Seek to position:', position)
}, 500) // 延迟 500ms 确保视频已加载
}
// 开始保存进度
// player.videoProgress.startSaving(videoInfo) // 注释掉 不再保存到本地
}
})
this.loadingText = '验证媒体文件格式...'
console.log("checkVideo接口返回视频信息" + JSON.stringify(res_check.video));
if (this.$platform == 'ios') {
if (res_check.video.type == 1 && (res_check.video.m3u8Url == null || res_check.video.m3u8Url == '')) {
await this.recordErrorVideo(res_check.video, http)
this.videoErrorMsg = '抱歉，苹果手机不支持此加密视频格式，您可以在安卓端观看本视频'
return
}
}
// 页面隐藏时保存进度
onHide(() => {
console.log('Page hidden, saving progress...')
if (player.currentVideoData.value && player.videoProgress.currentTime.value > 0) {
// 立即保存到本地 注释掉: 不再保存到本地
// videoStorage.saveVideoPosition(
// player.currentVideoData.value.id,
// Math.floor(player.videoProgress.currentTime.value),
// player.currentVideoData.value
// )
// 保存到服务器
player.videoProgress.saveToServer(
player.currentVideoData.value.id,
Math.floor(player.videoProgress.currentTime.value)
)
}
})
if (version !== this._requestVersion) return
onUnmounted(() => {
console.log('Component unmounting, saving progress...')
// 停止进度保存
player.videoProgress.stopSaving()
this.loadingText = '媒体文件加载中...'
const options = {
...res_check.video,
videoId: res_check.video.video,
}
this.handlePlayAuth(options)
},
handlePlayAuth (options) {
if (this.currentVideo.type == 1) {
this.src = options.m3u8Url
} else {
this.src = options.videoUrl
}
// 立即保存当前播放进度（同步保存到本地，异步保存到服务器）
if (player.currentVideoData.value && player.videoProgress.currentTime.value > 0) {
// 立即保存到本地 注释掉: 不再保存到本地
// videoStorage.saveVideoPosition(
// player.currentVideoData.value.id,
// Math.floor(player.videoProgress.currentTime.value),
// player.currentVideoData.value
// )
// 保存到服务器（不等待完成）
player.videoProgress.saveToServer(
player.currentVideoData.value.id,
Math.floor(player.videoProgress.currentTime.value)
)
}
// 清除倒计时
if (countdownTimer) {
clearInterval(countdownTimer)
}
// 恢复竖屏
// #ifdef APP-PLUS
plus.screen.lockOrientation('portrait-primary')
// #endif
})
// 监听 currentIndex 变化（仅当外部主动修改时才触发）
watch(
() => props.currentIndex,
async (newIndex, oldIndex) => {
// 只有当新值与组件内部维护的索引不同时才处理
// 这样可以避免组件内部切换视频时触发 watch
if (newIndex !== player.currentIndex.value) {
await player.changeVideo(newIndex)
}
}
)
// 事件处理
const play = () => {
isPlaying.value = true
if (player.currentVideoData.value) {
emit('play', player.currentVideoData.value)
}
}
const pause = () => {
isPlaying.value = false
emit('pause', player.videoProgress.currentTime.value)
// 暂停时保存进度
if (player.currentVideoData.value && player.videoProgress.currentTime.value > 0) {
// 保存进度到本地 注释掉: 不再保存到本地
// videoStorage.saveVideoPosition(
// player.currentVideoData.value.id,
// Math.floor(player.videoProgress.currentTime.value),
// player.currentVideoData.value
// )
// 保存进度到服务器
player.videoProgress.saveToServer(
player.currentVideoData.value.id,
Math.floor(player.videoProgress.currentTime.value)
)
}
}
const ended = () => {
if (player.currentVideoData.value) {
emit('ended', player.currentVideoData.value)
// 检查是否有下一个视频
if (player.currentIndex.value < props.videoList.length - 1) {
startCountdown()
}
}
}
const timeupdate = (e: any) => {
const currentTime = e.detail.currentTime
const videoDuration = e.detail.duration
player.videoProgress.updateCurrentTime(currentTime)
duration.value = videoDuration
emit('timeupdate', {
currentTime,
duration: videoDuration
})
}
const error = (e: any) => {
console.error('Video error:', e)
player.showError.value = true
player.errorMessage.value = '视频播放出错，请稍后重试'
player.canRetry.value = true
emit('error', {
type: 'VIDEO_LOAD_ERROR',
message: '视频播放出错'
})
}
const fullscreenChange = (e: any) => {
isFullScreen.value = e.detail.fullScreen
// #ifdef APP-PLUS
if (e.detail.fullScreen) {
// 进入全屏，锁定横屏
setTimeout(() => {
plus.screen.lockOrientation('landscape-primary')
}, 100)
} else {
// 退出全屏，恢复竖屏
setTimeout(() => {
plus.screen.lockOrientation('portrait-primary')
}, 100)
}
// #endif
emit('fullscreen', isFullScreen.value)
}
const waiting = () => {
// 视频缓冲中
console.log('Video waiting...')
}
const loadedmetadata = (e: any) => {
duration.value = e.detail.duration
console.log('Video metadata loaded, duration:', duration.value)
}
// 倒计时相关
const startCountdown = () => {
showCountdown.value = true
countdownRemaining.value = props.countdownSeconds
emit('countdown-start')
countdownTimer = setInterval(() => {
countdownRemaining.value--
if (countdownRemaining.value <= 0) {
clearInterval(countdownTimer)
playNext()
}
}, 1000)
}
const cancelCountdown = () => {
if (countdownTimer) {
clearInterval(countdownTimer)
countdownTimer = null
}
showCountdown.value = false
emit('countdown-cancel')
}
const replayVideo = () => {
cancelCountdown()
// 重置播放位置并播放
initialTime.value = 0
player.videoProgress.updateCurrentTime(0)
// 重新加载当前视频
player.loadVideo(player.currentIndex.value)
}
const playNext = async () => {
cancelCountdown()
const nextIndex = player.currentIndex.value + 1
if (nextIndex < props.videoList.length) {
await player.changeVideo(nextIndex)
// 通知父组件更新 currentIndex
emit('update:current-index', nextIndex)
emit('video-change', nextIndex)
// 获取新视频的初始播放位置
if (player.currentVideoData.value) {
initialTime.value = player.videoProgress.getInitialPosition(player.currentVideoData.value)
// player.videoProgress.startSaving(player.currentVideoData.value) // 注释掉 不再保存到本地
}
}
}
const retry = () => {
player.retry()
}
const localPosition = JSON.parse(uni.getStorageSync('videoPosition') || '{"order":[], "position":{}}')
this.initialTime = localPosition.position[this.currentVideo.id] !== undefined
? localPosition.position[this.currentVideo.id]
: (options.userCourseVideoPositionEntity ? options.userCourseVideoPositionEntity.position || 0 : 0)
},
recordErrorVideo (video, http) {
if (!http || !http.request) return
http.request({
url: "medical/course/addErrorCourse",
method: "POST",
data: {
"chapterId": video.chapterId,
"videoId": video.id,
"sort": video.sort
},
header: { 'Content-Type': 'application/json' },
}).then(() => {
console.log('记录IOS不能看的视频成功 ' + JSON.stringify(video))
}).catch(() => { console.log('数据报错') })
},
}
}
</script>
<style lang="scss" scoped>
.video-player-container {
width: 100%;
height: 100%;
position: relative;
background-color: #000;
}
<style lang="scss">
::v-deep .fast-progress-btn-box {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.3);
border-radius: 14rpx;
padding: 2px;
display: flex;
justify-content: center;
align-items: center;
.video-wrapper {
width: 100%;
height: 400rpx;
position: relative;
}
.video-element {
width: 100%;
height: 100%;
}
.error-display {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.8);
}
.error-content {
text-align: center;
padding: 40rpx;
}
.error-icon {
font-size: 80rpx;
margin-bottom: 20rpx;
}
.error-message {
color: #fff;
font-size: 28rpx;
line-height: 1.6;
margin-bottom: 30rpx;
}
.btn-retry {
display: inline-block;
background-color: #1989fa;
color: #fff;
border: none;
padding: 20rpx 40rpx;
line-height: 1;
border-radius: 8rpx;
font-size: 28rpx;
}
.loading-display {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.5);
}
.loading-spinner {
width: 60rpx;
height: 60rpx;
border: 4rpx solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
.yb-player-btn {
color: #fff;
font-size: 28rpx;
line-height: 1;
padding: 10rpx 20rpx;
border-radius: 10rpx;
border: 1px solid #fff;
}
}
}
::v-deep .video-mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 1);
color: #fff;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20rpx;
.loading-text {
color: #fff;
font-size: 28rpx;
margin-top: 20rpx;
}
.video-control-btn-group {
display: flex;
justify-content: center;
align-items: center;
gap: 20rpx;
}
.countdown-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
}
.countdown-content {
position: absolute;
top: 50%;
left: 50%;
width: 600rpx;
margin-left: -300rpx;
margin-top: -150rpx;
text-align: center;
}
.countdown-timer {
margin-bottom: 60rpx;
}
.countdown-number {
color: #fff;
font-size: 32px;
font-weight: bold;
line-height: 1.2;
text-align: center;
}
.countdown-text {
color: #fff;
font-size: 16px;
line-height: 50rpx;
text-align: center;
margin-top: 20rpx;
}
.countdown-actions {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 100%;
}
.btn-cancel,
.btn-replay,
.btn-next {
padding: 0 20px;
text-align: center;
border-radius: 4px;
font-size: 14px;
height: 26px;
line-height: 26px;
color: #fff;
margin: 0 5px;
background-color: #666;
}
// .btn-cancel {
// background-color: #666;
// }
// .btn-replay {
// background-color: #ff9800;
// }
// .btn-next {
// background-color: #1989fa;
// }
.video-control-btn {
line-height: 1;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid #fff;
}
}
</style>

11
manifest.json
View File

@@ -3,15 +3,20 @@
"appid" : "__UNI__1250B39",
"description" : "吴门国际",
"sassImplementationName" : "node-sass",
"versionName" : "1.1.18",
"versionCode" : 1118,
"versionName" : "1.1.19",
"versionCode" : 1119,
"transformPx" : false,
/* 5+App特有相关 */
"app-plus" : {
"usingComponents" : true,
"nvueStyleCompiler" : "uni-app",
"compilerVersion" : 3,
"screenOrientation" : [ "portrait-primary" ],
"screenOrientation" : [
"portrait-primary",
"portrait-secondary",
"landscape-primary",
"landscape-secondary"
],
"compatible" : {
"ignoreVersion" : true
},

10
pages/course/details/chapter.vue
View File

@@ -6,11 +6,12 @@
<!-- 页面内容 -->
<view class="page-content">
<!-- 课程视频 -->
<AliPlayer
<CourseVideo
:video-list="videoList"
:current-index="currentVideoIndex !== null ? currentVideoIndex : 0"
:course="{courseTitle:courseTitle, chapterTitle: chapterTitle}"
:cover="curriculumImgUrl || ''"
:http="mainClient"
/>
<!-- 选项卡 -->
@@ -49,10 +50,15 @@
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { courseApi } from '@/api/modules/course'
import AliPlayer from '@/components/ali-video/index.vue'
import type { IChapterDetail } from '@/types/course'
import type { IVideoInfo } from '@/types/video'
import { mainClient } from '@/api/clients'
import CourseVideo from '@/components/course/chapter-video.vue'
import { useSafeBack } from '@/components/nav-bar/use-safe-back'
useSafeBack()
// 页面参数
const chapterId = ref<number>(0)
const courseTitle = ref('')

25
uni_modules/yingbing-video/components/modules/video.vue
View File

@@ -254,9 +254,21 @@
methods: {
dataIdWatcher (newVal) {
if ( newVal ) {
this.dom = document.querySelector('.rvideo' + newVal)
this.domSlot = document.querySelector('.rvideoslot' + newVal)
this.init()
// 延迟一下再查找 DOM 元素，确保 DOM 已经渲染完成
setTimeout(() => {
this.dom = document.querySelector('.rvideo' + newVal)
this.domSlot = document.querySelector('.rvideoslot' + newVal)
// 检查 DOM 元素是否存在
if ( this.dom && this.domSlot ) {
this.init()
} else {
console.error('yb-video: DOM 元素未找到，可能渲染失败', {
dataId: newVal,
dom: this.dom,
domSlot: this.domSlot
})
}
}, 100)
}
},
async init () {
@@ -348,8 +360,9 @@
parseSrc (path) {
// #ifdef H5
const isHash = window.location.hash
const route = this.dom.getAttribute('data-route')
const pathName = isHash ? window.location.pathname : window.location.pathname.replace(route, '')
// 安全检查 this.dom 是否存在
const route = this.dom ? this.dom.getAttribute('data-route') : ''
const pathName = isHash ? window.location.pathname : window.location.pathname.replace(route || '', '')
return window.location.origin + pathName + path.substring(1)
// #endif
// #ifdef APP-VUE
@@ -455,6 +468,7 @@
isLive: params.isLive,
header: params.header,
controls: params.controls,
alwaysShowControls: params.alwaysShowControls,
height: '100%',
objectFit: params.objectFit,
crossOrigin: params.crossOrigin,
@@ -465,6 +479,7 @@
workIndex: params.workIndex,
subtitles: params.subtitles,
subtitleIndex: params.subtitleIndex,
playbackRates: params.playbackRates,
custom,
decoder: {
hls: {

98
uni_modules/yingbing-video/components/yb-video/yb-video.vue
View File

@@ -105,6 +105,16 @@
type: Number,
default: 1
},
//倍速列表配置
playbackRates: {
type: Array,
default: () => []
},
//是否显示倍速提示
showRateTips: {
type: Boolean,
default: false
},
//循环播放
loop: {
type: Boolean,
@@ -219,8 +229,13 @@
return 'web'
}
}
}
},
// #endif
//是否一直显示控件
alwaysShowControls: {
type: Boolean,
default: false
}
},
computed: {
boxStyle () {
@@ -513,36 +528,38 @@
//重加载视频
async reloadVideo () {
const arg = {
src: this.parseSrc(this.src),
segments: this.parseSegments(this.segments),
title: this.title,
poster: this.poster,
type: this.type,
three: this.three,
initialTime: this.initialTime,
duration: this.duration,
autoplay: this.autoplay,
preload: this.preload,
muted: this.muted,
loop: this.loop,
playbackRate: this.playbackRate,
isLive: this.isLive,
header: this.header,
controls: this.controls,
objectFit: this.objectFit,
crossOrigin: this.crossOrigin,
openDirection: this.openDirection,
exitDirection: this.exitDirection,
quality: this.parseList(this.quality),
works: this.works,
workIndex: this.workIndex,
subtitles: this.parseList(this.subtitles),
subtitleIndex: this.subtitleIndex,
custom: await this.parseCustom(),
flvConfig: this.flvConfig,
hlsConfig: this.hlsConfig,
jsmpegConfig: this.jsmpegConfig
}
src: this.parseSrc(this.src),
segments: this.parseSegments(this.segments),
title: this.title,
poster: this.poster,
type: this.type,
three: this.three,
initialTime: this.initialTime,
duration: this.duration,
autoplay: this.autoplay,
preload: this.preload,
muted: this.muted,
loop: this.loop,
playbackRate: this.playbackRate,
playbackRates: this.playbackRates,
isLive: this.isLive,
header: this.header,
controls: this.controls,
alwaysShowControls: this.alwaysShowControls,
objectFit: this.objectFit,
crossOrigin: this.crossOrigin,
openDirection: this.openDirection,
exitDirection: this.exitDirection,
quality: this.parseList(this.quality),
works: this.works,
workIndex: this.workIndex,
subtitles: this.parseList(this.subtitles),
subtitleIndex: this.subtitleIndex,
custom: await this.parseCustom(),
flvConfig: this.flvConfig,
hlsConfig: this.hlsConfig,
jsmpegConfig: this.jsmpegConfig
}
this.evalJS('reloadVideo', arg)
},
//卸载视频
@@ -608,7 +625,8 @@
this.updateTimer = setTimeout(() => {
const arg = {
header: this.header,
controls: this.controls
controls: this.controls,
alwaysShowControls: this.alwaysShowControls
}
this.evalJS('updateConfig', arg)
}, 200)
@@ -778,6 +796,12 @@
playbackRate (newVal) {
this.setVideo('playbackRate', newVal)
},
//监听倍速列表
playbackRates (newVal) {
if (newVal && newVal.length > 0) {
this.reloadVideo()
}
},
//监听循环属性
loop (newVal) {
this.setVideo('loop', newVal)
@@ -791,9 +815,13 @@
this.updateConfig()
},
//监听controls
controls () {
this.updateConfig()
},
controls () {
this.updateConfig()
},
//监听alwaysShowControls
alwaysShowControls () {
this.updateConfig()
},
//深度监听custom
custom: {
handler(newVal, oldVal) {

25
uni_modules/yingbing-video/static/html/css/yb-player.css
View File

@@ -53,6 +53,14 @@
pointer-events: none;
}
.yb-player-time {
min-width: 38px;
}
/* .yb-player-duration {
width: 35px;
} */
.yb-player-bottom-progress {
position: absolute;
bottom: 0;
@@ -120,22 +128,22 @@
width: 0;
flex: 1;
position: relative;
height: 2px;
height: 30px;
margin: 0 10px;
}
.yb-player-range-track {
position: absolute;
top: 0;
top: 14px;
left: 0;
right: 0;
bottom: 0;
bottom: 14px;
background-color: #999;
}
.yb-player-range-focus, .yb-player-range-preload {
position: absolute;
top: 0;
top: 14px;
left: 0;
bottom: 0;
bottom: 14px;
background-color: #fff;
width: 0;
}
@@ -162,7 +170,7 @@
background: none;
outline: none;
width: 100%;
height: 2px;
height: 30px;
margin: 0;
position: absolute;
top: 0;
@@ -501,6 +509,11 @@
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.yb-player-center svg {
width: 50px;

392
uni_modules/yingbing-video/static/html/dist/yb-player.js vendored
View File

@@ -36,6 +36,7 @@ var YbPlayer = /*#__PURE__*/function () {
isLive = _ref.isLive,
header = _ref.header,
controls = _ref.controls,
alwaysShowControls = _ref.alwaysShowControls,
height = _ref.height,
crossOrigin = _ref.crossOrigin,
objectFit = _ref.objectFit,
@@ -50,7 +51,8 @@ var YbPlayer = /*#__PURE__*/function () {
works = _ref.works,
workIndex = _ref.workIndex,
subtitles = _ref.subtitles,
subtitleIndex = _ref.subtitleIndex;
subtitleIndex = _ref.subtitleIndex,
playbackRates = _ref.playbackRates;
_classCallCheck(this, YbPlayer);
this.container = typeof container == 'string' ? document.querySelector(container) : container;
this.src = src; //播放链接
@@ -63,10 +65,36 @@ var YbPlayer = /*#__PURE__*/function () {
this.loop = loop; //是否循环播放
this.muted = muted; //是否静音
this.playbackRate = playbackRate || 1; //默认播放倍速
this.playbackRates = playbackRates && playbackRates.length > 0 ? playbackRates : [{
text: '0.5倍速',
value: 0.5
}, {
text: '0.75倍速',
value: 0.75
}, {
text: '正常倍速',
value: 1
}, {
text: '1.25倍速',
value: 1.25
}, {
text: '1.5倍速',
value: 1.5
}, {
text: '1.75倍速',
value: 1.75
}, {
text: '2倍速',
value: 2
}, {
text: '3倍速',
value: 3
}]; //倍速列表配置
this.preload = preload; //是否预加载
this.isLive = isLive; //是否直播
this.header = header; //显示头部控制栏
this.controls = controls; //显示底部控制栏
this.alwaysShowControls = alwaysShowControls; //是否一直显示控件
this.height = height || 'auto'; //视频高度
this.crossOrigin = crossOrigin; //跨域属性 anonymous-它有一个默认值。它定义了将在不传递凭据信息的情况下发送CORS请求 use-credentials-将发送带有凭据、cookie 和证书的 cross-origin 请求
this.objectFit = objectFit; //当视频宽高超出容器时的表现形式 fill-内容拉伸填充 contain-保持比例内容缩放 cover-保持比例内容可能被剪切 none-内容不重置 scale-down-保持比例从none或contain选一个 initial-默认值
@@ -97,6 +125,9 @@ var YbPlayer = /*#__PURE__*/function () {
this._toastTimer = null; //消息隐藏定时器
this._danmuTimer = null; //弹幕定时器
this._seizingTimer = null; //卡死定时器（播放一些直播源的时候，可能会出现卡死无反应的情况，需要做出处理）
this._rateTimer = null; //倍速显示定时器
this._errorRetryCount = 0; //错误重试次数
this._maxErrorRetry = 0; //最大重试次数
this._event = {};
}
//开启全屏按钮
@@ -111,7 +142,12 @@ var YbPlayer = /*#__PURE__*/function () {
}, {
key: "load",
value: function load() {
this.container.innerHTML = "\n\t\t\t<div class=\"yb-player-wrapper\" style=\"height: ".concat(this.height, "\">\n\t\t\t\t<div class=\"yb-player-header\"></div>\n\t\t\t\t<div class=\"yb-player-controls\">\n\t\t\t\t\t<div class=\"yb-player-progress\"></div>\n\t\t\t\t\t<div class=\"yb-player-controls-bottom yb-player-hide yb-player-full\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"yb-player-locks yb-player-hide\">\n\t\t\t\t\t<div class=\"yb-player-lock yb-player-lock-left\">").concat(YbPlayer.lockIcon, "</div>\n\t\t\t\t\t<div class=\"yb-player-lock yb-player-lock-right\">").concat(YbPlayer.lockIcon, "</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"yb-player-danmu\"></div>\n\t\t\t\t<div class=\"yb-player-toast\"></div>\n\t\t\t\t<div class=\"yb-player-bottom-progress yb-player-hide\"></div>\n\t\t\t</div>\n\t\t");
var posterHtml = '';
// 针对 iOS 平台添加备用封面显示
if (this.poster && /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream) {
posterHtml = '<div class="yb-player-poster" style="position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(' + this.poster + ');background-size:cover;background-position:center;"></div>';
}
this.container.innerHTML = posterHtml + "\n\t\t\t<div class=\"yb-player-wrapper\" style=\"height: ".concat(this.height, "\">\n\t\t\t\t<div class=\"yb-player-header\"></div>\n\t\t\t\t<div class=\"yb-player-controls\">\n\t\t\t\t\t<div class=\"yb-player-progress\"></div>\n\t\t\t\t\t<div class=\"yb-player-controls-bottom yb-player-hide yb-player-full\"></div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"yb-player-locks yb-player-hide\">\n\t\t\t\t\t<div class=\"yb-player-lock yb-player-lock-left\">").concat(YbPlayer.lockIcon, "</div>\n\t\t\t\t\t<div class=\"yb-player-lock yb-player-lock-right\">").concat(YbPlayer.lockIcon, "</div>\n\t\t\t\t</div>\n\t\t\t\t<div class=\"yb-player-danmu\"></div>\n\t\t\t\t<div class=\"yb-player-toast\"></div>\n\t\t\t\t<div class=\"yb-player-bottom-progress yb-player-hide\"></div>\n\t\t\t</div>\n\t\t");
this._bindfullscreenerror = this._fullscreenerror.bind(this);
this._bindfullscreenchanged = this._fullscreenchanged.bind(this);
this.container.addEventListener('fullscreenerror', this._bindfullscreenerror);
@@ -129,6 +165,7 @@ var YbPlayer = /*#__PURE__*/function () {
this._clearDanmuTimer();
this._clearToastTimer();
this._clearControlsTimer();
this._clearRateTimer();
this._removeBackbuttonListener();
this._event = {}; //卸载所有监听事件
if (this.container) {
@@ -198,8 +235,8 @@ var YbPlayer = /*#__PURE__*/function () {
_this2.emit('durationchange', _this2.getDuration());
};
this.video.onloadeddata = function () {
//非直播时初始化播放时长
if (_this2.initialTime && !_this2.isLive) _this2.seek(_this2.initialTime);
//非直播时初始化播放时长（错误恢复时不执行）
if (_this2.initialTime && !_this2.isLive && !_this2._isErrorRecovering) _this2.seek(_this2.initialTime);
_this2.emit('loadeddata', {
duration: _this2.getDuration(),
videoWidth: _this2.video.videoWidth,
@@ -227,12 +264,18 @@ var YbPlayer = /*#__PURE__*/function () {
if (_this2.cm) _this2.cm.setConfig('playbackRate', playbackRate);
_this2.emit('ratechange', playbackRate);
_this2.setInnerHTML('yb-player-header-rate', '倍速x' + playbackRate);
_this2._clearRateTimer();
var rateEl = _this2.container.getElementsByClassName('yb-player-rate')[0] || document.createElement('DIV');
if (![1, 1.0].includes(playbackRate)) {
rateEl.setAttribute('class', 'yb-player-rate');
rateEl.innerHTML = "\n\t\t\t\t\t<div class=\"yb-player-rate-icon\">\n\t\t\t\t\t\t<i></i><i></i><i></i>\n\t\t\t\t\t</div>\n\t\t\t\t\t<span class=\"yb-player-rate-span\">".concat(playbackRate + '倍速播放中', "</span>\n\t\t\t\t");
var wrapperEl = _this2.container.getElementsByClassName('yb-player-wrapper')[0];
if (wrapperEl) wrapperEl.appendChild(rateEl);
_this2._rateTimer = window.setTimeout(function () {
if (rateEl && rateEl.parentNode) {
rateEl.parentNode.removeChild(rateEl);
}
}, 2000);
} else {
if (rateEl) rateEl.remove();
}
@@ -325,7 +368,6 @@ var YbPlayer = /*#__PURE__*/function () {
};
this.video.onerror = function (e) {
if (e && e.target.error) {
// 网络问题或其他不可恢复的错误
var code = e.target.error.code;
var errorMsg = '';
switch (code) {
@@ -342,10 +384,26 @@ var YbPlayer = /*#__PURE__*/function () {
errorMsg = '视频源不支持或地址无效';
break;
}
_this2.showError(errorMsg);
_this2.unloadVideo();
console.log('[video.onerror] 检测到视频错误，错误码：' + code + ', 错误信息：' + errorMsg);
// 错误码 3 尝试跳过问题区间后继续播放
if (code === 3) {
_this2._skipErrorAndRetry(errorMsg);
} else {
// 其他错误直接提示错误信息
_this2.showError(errorMsg);
_this2.unloadVideo();
}
// emit 错误事件，传递详细的错误信息
_this2.emit('error', {
code: code,
message: errorMsg,
error: e
});
} else {
_this2.emit('error', e);
}
_this2.emit('error', e);
};
//视频长按菜单取消
this.video.oncontextmenu = function (e) {
@@ -382,6 +440,7 @@ var YbPlayer = /*#__PURE__*/function () {
key: "unloadVideo",
value: function unloadVideo() {
this._clearSeizingTimer();
this._errorRetryCount = 0; // 重置错误计数
this.unloadCustom();
this.unloadDecoder();
this.unloadPano();
@@ -857,12 +916,13 @@ var YbPlayer = /*#__PURE__*/function () {
wrapperEl.appendChild(toolbarEl); //先插入不显示的工具栏，因为需要计算工具栏尺寸
var element = this.container.querySelector(selector); //获取点击选择器
var rect = element.getBoundingClientRect(); //获取点击元素的尺寸布局信息
var containerRect = this.container.getBoundingClientRect(); //获取容器相对于视口的位置
var boxWidth = this.container.offsetWidth;
var boxHeight = this.container.offsetHeight;
var top = rect.top + rect.height; //计算顶部定位
var left = rect.left; //计算左边定位
var right = boxWidth - rect.right; //计算右边定位
var bottom = boxHeight - rect.bottom + rect.height; //计算底部定位
var top = rect.top - containerRect.top + rect.height; //计算顶部定位（相对于容器）
var left = rect.left - containerRect.left; //计算左边定位（相对于容器）
var right = containerRect.right - rect.right; //计算右边定位
var bottom = containerRect.bottom - rect.bottom + rect.height; //计算底部定位
var isTop = true; //是否定位顶部 true-定位顶部 false-定位底部
var isLeft = true; //是否定位左边 true-定位左边 false-定位右边
if (top > boxHeight / 2) isTop = false; //判断点击元素是否在盒子上半部
@@ -1072,25 +1132,7 @@ var YbPlayer = /*#__PURE__*/function () {
key: "showPlaybackRate",
value: function showPlaybackRate() {
var _this10 = this;
var arr = [{
text: '0.5倍速',
value: 0.5
}, {
text: '正常倍速',
value: 1
}, {
text: '1.5倍速',
value: 1.5
}, {
text: '1.75倍速',
value: 1.75
}, {
text: '2倍速',
value: 2
}, {
text: '3倍速',
value: 3
}];
var arr = this.playbackRates;
var list = arr.map(function (a, k) {
return {
text: a.text,
@@ -1419,7 +1461,7 @@ var YbPlayer = /*#__PURE__*/function () {
if (['timeDiffrence', 'disableScroll', 'disableTop', 'disableBottom', 'fontScale'].includes(key)) _this.cm.reset();
}
_this.emit('danmuconfigchange', config); //派发弹幕配置更改事件，以便开发者外部记录
}, 500);
}, 2000);
}
this.showPopup('弹幕设置', div);
}
@@ -1653,8 +1695,13 @@ var YbPlayer = /*#__PURE__*/function () {
});
var children = progressEl.children;
for (var i = 0; i < children.length; i++) {
// children[i].onclick = arr[i].click
YbPlayer.tap(children[i], arr[i].click);
(function(index) {
var originalClick = arr[index].click;
YbPlayer.tap(children[index], function() {
if (originalClick) originalClick();
_this17.showControls();
});
})(i);
//如果标记了非全屏元素，则在全屏时需要隐藏
if (children[i].classList.contains('yb-player-unfull') && this.getFullscreen()) {
children[i].classList.add('yb-player-hide');
@@ -1771,8 +1818,13 @@ var YbPlayer = /*#__PURE__*/function () {
});
var children = controlsBottomEl.children;
for (var _i = 0; _i < children.length; _i++) {
// children[i].onclick = arr[i].click
YbPlayer.tap(children[_i], arr[_i].click);
(function(index) {
var originalClick = arr[index].click;
YbPlayer.tap(children[index], function() {
if (originalClick) originalClick();
_this17.showControls();
});
})(_i);
}
}
@@ -1844,8 +1896,13 @@ var YbPlayer = /*#__PURE__*/function () {
});
var children = heightEl.children;
for (var _i2 = 0; _i2 < children.length; _i2++) {
// children[i].onclick = arr[i].click
YbPlayer.tap(children[_i2], arr[_i2].click);
(function(index) {
var originalClick = arr[index].click;
YbPlayer.tap(children[index], function() {
if (originalClick) originalClick();
_this17.showControls();
});
})(_i2);
}
}
@@ -1855,13 +1912,19 @@ var YbPlayer = /*#__PURE__*/function () {
if (slots.length > 0 && wrapperEl) {
var slotEl = document.createElement('DIV');
slotEl.setAttribute('class', 'yb-player-slot');
var _this = this;
slots.forEach(function (slot, key) {
slotEl.innerHTML += slot.innerHTML;
});
var children = slotEl.children;
for (var _i3 = 0; _i3 < children.length; _i3++) {
// children[i].onclick = slots[i].click
YbPlayer.tap(children[_i3], slots[_i3].click);
(function(index) {
var originalClick = slots[index].click;
YbPlayer.tap(children[index], function() {
if (originalClick) originalClick();
_this.showControls();
});
})(_i3);
if (slots[_i3].followControls) {
children[_i3].setAttribute('data-controls', 1);
if (!this.getControls()) children[_i3].classList.add('yb-player-hide');
@@ -1871,6 +1934,10 @@ var YbPlayer = /*#__PURE__*/function () {
}
//重新设置一次全屏状态
this._setFullscreenStatus();
// 如果设置了alwaysShowControls，自动显示控件
if (this.alwaysShowControls) {
this.showControls();
}
}
//卸载自定义
}, {
@@ -2089,7 +2156,13 @@ var YbPlayer = /*#__PURE__*/function () {
value: function setConfig(key, value) {
var _this20 = this;
Object.keys(this).forEach(function (k) {
if (k == key) _this20[k] = value;
if (k == key) {
_this20[k] = value;
//如果更新的是alwaysShowControls属性，需要重新显示控件
if (k == 'alwaysShowControls' && value) {
_this20.showControls();
}
}
});
}
//动态手势事件配置
@@ -2409,7 +2482,14 @@ var YbPlayer = /*#__PURE__*/function () {
value: function hideLoading() {
var div = this.container.getElementsByClassName('yb-player-loading')[0];
if (div) div.remove();
if (this.video.paused) this.showCenterPlay();else this.hideCenter();
// if (this.video.paused) this.showCenterPlay();else this.hideCenter();
if (this._isErrorRecovering) {
this.hideCenter();
} else if (this.video.paused) {
this.showCenterPlay();
} else {
this.hideCenter();
}
}
//展示中间播放按钮
}, {
@@ -2519,6 +2599,152 @@ var YbPlayer = /*#__PURE__*/function () {
value: function seek(time) {
if (this.video) this.video.currentTime = time;
}
/**
* 跳过错误区间并重试播放
* @param {String} errorMsg 错误信息
*/
}, {
key: "_skipErrorAndRetry",
value: function _skipErrorAndRetry(errorMsg) {
var _this = this;
// 检查 video 对象是否存在
if (!this.video) {
console.log('[错误恢复] video 对象不存在，无法恢复');
this.showError(errorMsg);
this.unloadVideo();
return;
}
// 超过最大重试次数，显示错误并卸载视频
if (this._errorRetryCount >= this._maxErrorRetry) {
this.showError(errorMsg);
this.unloadVideo();
return;
}
this._errorRetryCount++;
// 第 1 次错误静默处理，显示 loading
if (this._errorRetryCount === 1) {
this.showLoading();
}
// 获取当前播放时间，向后跳过 1 秒（跳过损坏的 GOP 区间）
var currentTime = this.video.currentTime || 0;
// 确保 currentTime 是有效数字
if (isNaN(currentTime) || currentTime < 0) {
currentTime = 0;
}
var duration = this.getDuration() || 0;
var skipTime = Math.min(currentTime + 1, duration);
console.log('[错误恢复] 开始处理，当前时间：' + currentTime + 's, 跳转到：' + skipTime + 's');
// 关键：保存当前 src，然后重新加载视频来恢复状态
// var currentSrc = this.video.currentSrc || this.video.src;
console.log('[错误恢复] 重新加载视频...');
// 保存当前倍速设置
var currentPlaybackRate = this.video.playbackRate || 1;
console.log('[错误恢复] 保存倍速：' + currentPlaybackRate);
// 设置标志，告诉 loadeddata 不要执行 seek
this._isErrorRecovering = true;
// 重新设置 src 并加载
// this.video.src = currentSrc;
this.video.load();
// 清除之前的定时器（如果有）
if (this._errorRecoveryTimer) {
clearTimeout(this._errorRecoveryTimer);
}
// 等待元数据加载完成
var onLoadedMetadata = function() {
// 检查 video 对象是否仍然存在
if (!_this.video) {
console.log('[错误恢复] loadedmetadata 触发，但 video 对象已不存在');
return;
}
console.log('[错误恢复] loadedmetadata 触发，设置 currentTime = ' + skipTime);
_this.video.removeEventListener('loadedmetadata', onLoadedMetadata);
// 清除超时定时器
if (_this._errorRecoveryTimer) {
clearTimeout(_this._errorRecoveryTimer);
}
// 恢复倍速设置
_this.video.playbackRate = currentPlaybackRate;
console.log('[错误恢复] 恢复倍速：' + currentPlaybackRate);
// 设置跳转位置
_this.video.currentTime = skipTime;
// 等待 seek 完成后立即播放
var onSeeked = function() {
// 检查 video 对象是否仍然存在
if (!_this2.video) {
console.log('[错误恢复] seeked 触发，但 video 对象已不存在');
return;
}
console.log('[错误恢复] seeked 触发，实际位置：' + _this2.video.currentTime);
_this2.video.removeEventListener('seeked', onSeeked);
_this2.tryPlayAfterSeek(errorMsg);
};
_this.video.addEventListener('seeked', onSeeked);
};
this.video.addEventListener('loadedmetadata', onLoadedMetadata);
// loadedmetadata 超时处理
this._errorRecoveryTimer = setTimeout(function() {
console.log('[错误恢复] loadedmetadata 超时，直接尝试播放');
if (_this.video) {
_this.video.removeEventListener('loadedmetadata', onLoadedMetadata);
}
_this.tryPlayAfterSeek(errorMsg);
}, 5000);
}
// 尝试播放
}, {
key: "tryPlayAfterSeek",
value: function tryPlayAfterSeek(errorMsg) {
var _this2 = this;
console.log('[错误恢复] 准备播放，当前状态：paused=' + this.video.paused + ', readyState=' + this.video.readyState + ', currentTime=' + this.video.currentTime);
// 直接调用 play()，Promise 会处理缓冲
var playPromise = this.video.play();
console.log('[错误恢复] play() 已调用');
if (playPromise && typeof playPromise.then === 'function') {
playPromise.then(function() {
console.log('[错误恢复] 播放成功！');
_this2._errorRetryCount = 0;
_this2._isErrorRecovering = false; // 清除错误恢复标志
// 清除所有定时器
if (_this2._errorRecoveryTimer) {
clearTimeout(_this2._errorRecoveryTimer);
_this2._errorRecoveryTimer = null;
}
_this2.hideLoading();
}).catch(function(err) {
console.log('[错误恢复] 播放失败:', err);
_this2._skipErrorAndRetry(errorMsg);
});
} else {
_this2._errorRetryCount = 0;
_this2._isErrorRecovering = false;
_this2.hideLoading();
}
}
//播放上一个视频
}, {
key: "prev",
@@ -2669,19 +2895,27 @@ var YbPlayer = /*#__PURE__*/function () {
value: function exitFullscreen() {
var _this26 = this;
this.setDirection(false).then(function () {
var cfs = document.exitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen || document.webkitExitFullscreen;
if (typeof cfs != 'undefined' && cfs) {
cfs.call(document);
} else if (typeof window.ActiveXObject !== "undefined") {
//IE浏览器，模拟按下F11键退出全屏
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
} else {
_this26.container.classList.remove('yb-player-openfull');
_this26._fullscreenchanged();
}
// #ifdef APP-PLUS
// 不使用浏览器的退出全屏了，全部通过css模拟退出全屏
_this26.container.classList.remove('yb-player-openfull');
_this26._fullscreenchanged();
// #endif
// #ifndef APP-PLUS
// var cfs = document.exitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen || document.webkitExitFullscreen;
// if (typeof cfs != 'undefined' && cfs) {
// cfs.call(document);
// } else if (typeof window.ActiveXObject !== "undefined") {
// //IE浏览器，模拟按下F11键退出全屏
// var wscript = new ActiveXObject("WScript.Shell");
// if (wscript != null) {
// wscript.SendKeys("{F11}");
// }
// } else {
// _this26.container.classList.remove('yb-player-openfull');
// _this26._fullscreenchanged();
// }
// #endif
});
}
//开启全屏
@@ -2691,18 +2925,25 @@ var YbPlayer = /*#__PURE__*/function () {
var _this27 = this;
this.openDirection = direction || this.openDirection;
this.setDirection(true).then(function () {
var rfs = document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullscreen || document.documentElement.mozRequestFullscreen || document.documentElement.requestFullScreen || document.documentElement.webkitRequestFullScreen || document.documentElement.mozRequestFullScreen;
if (typeof rfs != 'undefined' && rfs) {
rfs.call(_this27.container);
} else if (typeof window.ActiveXObject !== "undefined") {
//IE浏览器，模拟按下F11全屏
var wscript = new ActiveXObject("WScript.Shell");
if (wscript != null) {
wscript.SendKeys("{F11}");
}
} else {
_this27._fullscreenerror();
}
// #ifdef APP-PLUS
// 不使用浏览器的全屏了，全部通过css模拟全屏
_this27._fullscreenerror();
// #endif
// #ifndef APP-PLUS
// var rfs = document.documentElement.requestFullscreen || document.documentElement.webkitRequestFullscreen || document.documentElement.mozRequestFullscreen || document.documentElement.requestFullScreen || document.documentElement.webkitRequestFullScreen || document.documentElement.mozRequestFullScreen;
// if (typeof rfs != 'undefined' && rfs) {
// rfs.call(_this27.container);
// } else if (typeof window.ActiveXObject !== "undefined") {
// //IE浏览器，模拟按下F11全屏
// var wscript = new ActiveXObject("WScript.Shell");
// if (wscript != null) {
// wscript.SendKeys("{F11}");
// }
// } else {
// _this27._fullscreenerror();
// }
// #endif
});
}
//是否支持全屏API
@@ -2759,14 +3000,17 @@ var YbPlayer = /*#__PURE__*/function () {
this.emit('controlschange', {
show: true
});
this._controlsTimer = window.setTimeout(function () {
_this28.hideControls();
}, 5000);
if (!this.alwaysShowControls) {
this._controlsTimer = window.setTimeout(function () {
_this28.hideControls();
}, 5000);
}
}
//关闭控制栏
}, {
key: "hideControls",
value: function hideControls(item, timer) {
if (this.alwaysShowControls) return;
this._clearControlsTimer();
this.container.getElementsByClassName('yb-player-controls')[0].classList.remove('yb-player-controls-show');
this.container.getElementsByClassName('yb-player-header')[0].classList.remove('yb-player-header-show');
@@ -2902,6 +3146,14 @@ var YbPlayer = /*#__PURE__*/function () {
this._seizingTimer = null;
}
}
}, {
key: "_clearRateTimer",
value: function _clearRateTimer() {
if (this._rateTimer) {
window.clearTimeout(this._rateTimer);
this._rateTimer = null;
}
}
}, {
key: "_removeBackbuttonListener",
value: function _removeBackbuttonListener() {

2
uni_modules/yingbing-video/static/html/video.html
View File

@@ -69,6 +69,7 @@
isLive: params.isLive,
header: params.header,
controls: params.controls,
alwaysShowControls: params.alwaysShowControls,
height: '100%',
objectFit: params.objectFit,
crossOrigin: params.crossOrigin,
@@ -79,6 +80,7 @@
workIndex: params.workIndex,
subtitles: params.subtitles,
subtitleIndex: params.subtitleIndex,
playbackRates: params.playbackRates,
custom: params.custom,
decoder: {
hls: {