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