Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 baeb2a89 作者: 方治民
操作

refactor: 农技视频轮播展示改为图片 + 点击播放

上级 360688e5
正在显示 包含 160 行增加 和 64 行删除
src/components/IframeVideo/index.vue 0 → 100644
<template>
<iframe :onload="onloadCode" style="width: 100%; height: 100%; border: 1px solid #fff; background: #000"></iframe>
</template>
<script>
export default {
props: {
src: {},
},
data() {
return {
onloadCode: '',
}
},
created() {
this.onloadCode = `this.contentWindow.document.body.innerHTML = '<video style="width: 100%;height: 100%" controls="controls" src="${this.src}"></video>';`
},
}
</script>
<style lang="scss"></style>
src/pages/nongchang/nongchang.vue
......@@ -352,34 +352,35 @@
// 轮播视频切换的时候触发
function handleChangeVideo(e: any) {
const currentIndex = e.detail.current
const prevIndex = pageData.current
pageData.current = currentIndex
pageData.agricultureClass.title = pageData.agricultureClass.videoList[currentIndex]?.title
// 延迟处理视频切换，避免卡顿
setTimeout(() => {
// 停止所有其他视频的播放（只暂停，不重置位置）
pageData.agricultureClass.videoList.forEach((_, index) => {
if (index !== currentIndex) {
try {
const videoContext = uni.createVideoContext(`video${index}`)
videoContext.pause()
// 不重置到开头，保留播放位置
} catch (error) {
console.log('停止视频失败:', error)
}
} else {
// 当前视频：尝试播放
try {
const videoContext = uni.createVideoContext(`video${index}`)
// 自动播放当前视频
videoContext.play()
} catch (error) {
console.log('播放视频失败:', error)
}
}
})
}, 100)
console.log('当前索引:', currentIndex)
// // 延迟处理视频切换，避免卡顿
// setTimeout(() => {
// // 停止所有其他视频的播放（只暂停，不重置位置）
// pageData.agricultureClass.videoList.forEach((_, index) => {
// if (index !== currentIndex) {
// try {
// const videoContext = uni.createVideoContext(`video${index}`)
// videoContext.pause()
// // 不重置到开头，保留播放位置
// } catch (error) {
// console.log('停止视频失败:', error)
// }
// } else {
// // 当前视频：尝试播放
// try {
// const videoContext = uni.createVideoContext(`video${index}`)
// // 自动播放当前视频
// videoContext.play()
// } catch (error) {
// console.log('播放视频失败:', error)
// }
// }
// })
// }, 100)
}
// 处理swiper过渡动画
......@@ -411,6 +412,33 @@
function handleVideoPause(currentIndex) {
console.log(`视频${currentIndex}暂停`)
}
function playVideo(index) {
const videoContext = uni.createVideoContext(`video${index}`)
videoContext.requestFullScreen()
videoContext.play()
}
function handleFullscreenChange(e: any, index) {
console.log(`视频${index}全屏状态改变`)
if (!e.detail.fullScreen) {
const videoContext = uni.createVideoContext(`video${index}`)
videoContext.pause()
}
}
onHide(() => {
// 停止所有其他视频的播放（只暂停，不重置位置）
pageData.agricultureClass.videoList.forEach((_, index) => {
try {
const videoContext = uni.createVideoContext(`video${index}`)
videoContext.pause()
// 不重置到开头，保留播放位置
} catch (error) {
console.log('停止视频失败:', error)
}
})
})
</script>
<template>
......@@ -714,7 +742,7 @@
<text class="font text_66">农技学习</text>
<text class="font_6 text_43 text_67" @click="onViewMoreClass">查看更多</text>
</view>
<view class="codefun-flex-col section_20">
<view class="codefun-flex-col section_20 !relative">
<fui-swiper-dot
:items="pageData.agricultureClass.videoList"
:current="pageData.current"
......@@ -740,23 +768,32 @@
@transition="handleTransition"
>
<swiper-item v-for="(video, index) in pageData.agricultureClass.videoList" :key="index">
<image
:src="video.cover_image"
mode="scaleToFill"
class="w-654rpx h-358rpx"
@click="playVideo(index)"
/>
<video
:id="`video${index}`"
:src="video.media_video"
:poster="video.cover_image"
:controls="false"
:title="video.title"
:controls="true"
style="width: 654rpx; height: 358rpx"
:autoplay="false"
:autoplay="true"
:muted="false"
:loop="false"
:loop="true"
:show-play-btn="true"
:show-center-play-btn="true"
:enable-progress-gesture="false"
:show-progress="false"
:enable-progress-gesture="true"
:show-progress="true"
object-fit="contain"
@loadedmetadata="handleMetadataLoaded"
@play="handleVideoPlay(index)"
@pause="handleVideoPause(index)"
@fullscreenchange="handleFullscreenChange($event, index)"
class="!hidden"
></video>
</swiper-item>
</swiper>
......@@ -1833,6 +1870,7 @@
position: absolute;
bottom: 52rpx;
left: 40rpx;
z-index: 1;
.text_34 {
color: #ffffff;
......
src/pages/shouye/shouye.vue
......@@ -398,34 +398,35 @@
// 轮播视频切换的时候触发
function handleChangeVideo(e: any) {
const currentIndex = e.detail.current
const _prevIndex = pageData.current
pageData.current = currentIndex
pageData.agricultureClass.title = pageData.agricultureClass.videoList[currentIndex]?.title
// 延迟处理视频切换，避免卡顿
setTimeout(() => {
// 停止所有其他视频的播放（只暂停，不重置位置）
pageData.agricultureClass.videoList.forEach((_, index) => {
if (index !== currentIndex) {
try {
const videoContext = uni.createVideoContext(`video${index}`)
videoContext.pause()
// 不重置到开头，保留播放位置
} catch (error) {
console.log('停止视频失败:', error)
}
} else {
// 当前视频：尝试播放
try {
const videoContext = uni.createVideoContext(`video${index}`)
// 自动播放当前视频
videoContext.play()
} catch (error) {
console.log('播放视频失败:', error)
}
}
})
}, 100)
console.log('当前索引:', currentIndex)
// // 延迟处理视频切换，避免卡顿
// setTimeout(() => {
// // 停止所有其他视频的播放（只暂停，不重置位置）
// pageData.agricultureClass.videoList.forEach((_, index) => {
// if (index !== currentIndex) {
// try {
// const videoContext = uni.createVideoContext(`video${index}`)
// videoContext.pause()
// // 不重置到开头，保留播放位置
// } catch (error) {
// console.log('停止视频失败:', error)
// }
// } else {
// // 当前视频：尝试播放
// try {
// const videoContext = uni.createVideoContext(`video${index}`)
// // 自动播放当前视频
// videoContext.play()
// } catch (error) {
// console.log('播放视频失败:', error)
// }
// }
// })
// }, 100)
}
// 处理swiper过渡动画
......@@ -439,6 +440,14 @@
console.log(`视频${currentIndex}暂停`)
}
function handleFullscreenChange(e: any, index) {
console.log(`视频${index}全屏状态改变`)
if (!e.detail.fullScreen) {
const videoContext = uni.createVideoContext(`video${index}`)
videoContext.pause()
}
}
// 获取视频时长
function handleMetadataLoaded(e: any) {
pageData.agricultureClass.time = e.target.duration
......@@ -452,6 +461,25 @@
}
})
}
function playVideo(index) {
const videoContext = uni.createVideoContext(`video${index}`)
videoContext.requestFullScreen()
videoContext.play()
}
onHide(() => {
// 停止所有其他视频的播放（只暂停，不重置位置）
pageData.agricultureClass.videoList.forEach((_, index) => {
try {
const videoContext = uni.createVideoContext(`video${index}`)
videoContext.pause()
// 不重置到开头，保留播放位置
} catch (error) {
console.log('停止视频失败:', error)
}
})
})
</script>
<template>
......@@ -723,7 +751,7 @@
<text class="font_6 text_32">农技课堂</text>
<!-- <text class="font_7 text_33" @click="onViewMoreClass">查看全部</text> -->
</view>
<view class="codefun-flex-col section_13">
<view class="codefun-flex-col section_13 !relative">
<fui-swiper-dot
:items="pageData.agricultureClass.videoList"
:current="pageData.current"
......@@ -749,23 +777,32 @@
@transition="handleTransition"
>
<swiper-item v-for="(video, index) in pageData.agricultureClass.videoList" :key="index">
<image
:src="video.cover_image"
mode="scaleToFill"
class="w-654rpx h-358rpx"
@click="playVideo(index)"
/>
<video
:id="`video${index}`"
:src="video.media_video"
:poster="video.cover_image"
:controls="false"
:title="video.title"
:controls="true"
style="width: 654rpx; height: 358rpx"
:autoplay="false"
:autoplay="true"
:muted="false"
:loop="false"
:loop="true"
:show-play-btn="true"
:show-center-play-btn="true"
:enable-progress-gesture="false"
:show-progress="false"
:enable-progress-gesture="true"
:show-progress="true"
object-fit="contain"
@loadedmetadata="handleMetadataLoaded"
@play="handleVideoPlay(index)"
@pause="handleVideoPause(index)"
@fullscreenchange="handleFullscreenChange($event, index)"
class="!hidden"
></video>
</swiper-item>
</swiper>
......@@ -1526,10 +1563,10 @@
position: relative;
margin-right: 28rpx;
margin-top: 32.86rpx;
height: 418rpx;
height: 428rpx;
// padding: 271.06rpx 36.64rpx 22rpx 48rpx;
padding: 20rpx;
padding-bottom: 0;
padding-bottom: 10rpx;
background-color: #ffffff;
border-radius: 16rpx;
mix-blend-mode: NOTTHROUGH;
......@@ -1562,6 +1599,7 @@
position: absolute;
bottom: 52rpx;
left: 40rpx;
z-index: 1;
}
.text_34 {
......
types/components.d.ts
......@@ -144,6 +144,7 @@ declare module 'vue' {
FuiWhiteSpace: typeof import('./../src/components/FirstUI/fui-white-space/fui-white-space.vue')['default']
FuiWingBlank: typeof import('./../src/components/FirstUI/fui-wing-blank/fui-wing-blank.vue')['default']
Icon: typeof import('./../src/components/Icon/index.vue')['default']
IframeVideo: typeof import('./../src/components/IframeVideo/index.vue')['default']
ThumbnailPreview: typeof import('./../src/components/ThumbnailPreview/index.vue')['default']
}
}
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论