zhenghy

视频首帧图占位,人民日报gif动图

... ... @@ -54,11 +54,11 @@ export struct DetailPlayShortVideoPage {
/**
* 页面显示重查用户关注、点赞等信息
*/
pageShowChange() {
async pageShowChange() {
if (this.currentIndex === this.index) {
this.queryNewsInfoOfUser()
if (this.switchVideoStatus) {
this.playerController.play()
await this.playerController.play()
this.imageVisible = false
}
}
... ... @@ -68,10 +68,10 @@ export struct DetailPlayShortVideoPage {
* 频道切换视频暂停、播放
* 页面显隐视频暂停、播放
*/
videoStatusChange() {
async videoStatusChange() {
if (this.currentIndex === this.index) {
if (this.switchVideoStatus) {
this.playerController.play()
await this.playerController.play()
this.imageVisible = false
} else {
this.playerController.pause()
... ... @@ -82,7 +82,7 @@ export struct DetailPlayShortVideoPage {
/**
* 监听下标变化手动创建或销毁视频
*/
currentIndexChange() {
async currentIndexChange() {
if (this.currentIndex != this.index) {
this.playerController.pause()
if (this.index <= this.currentIndex - 2 && this.playerController.getPlayer()) {
... ... @@ -94,7 +94,7 @@ export struct DetailPlayShortVideoPage {
if (!this.playerController.getPlayer()) {
this.playerController.firstPlay(this.contentDetailData?.videoInfo[0]?.videoUrl || '');
} else {
this.playerController.play()
await this.playerController.play()
this.imageVisible = false
}
}
... ... @@ -153,10 +153,10 @@ export struct DetailPlayShortVideoPage {
this.videoLandScape = this.contentDetailData.videoInfo[0]?.videoLandScape
this.ratio = this.contentDetailData.videoInfo[0].resolutionWidth /
this.contentDetailData.videoInfo[0].resolutionHeight
this.playerController.onCanplay = () => {
this.playerController.onCanplay = async () => {
this.ratio = this.playerController.videoWidth / this.playerController.videoHeight
if ((this.index == 0 || this.currentIndex === this.index) && this.switchVideoStatus) {
this.playerController.play()
await this.playerController.play()
this.imageVisible = false
}
}
... ... @@ -186,7 +186,7 @@ export struct DetailPlayShortVideoPage {
Stack({ alignContent: Alignment.Top }) {
Column() {
Stack() {
// this.playerCoverBuilder()
this.playerViewBuilder()
PlayerBottomView({
... ... @@ -243,16 +243,14 @@ export struct DetailPlayShortVideoPage {
*/
@Builder
playerCoverBuilder() {
// 问题:画面会闪一下
Image(this.contentDetailData?.firstFrameImageUri)
.width('100%')
.padding({
bottom: this.videoLandScape === 1 ? 115 : 0,
})// .align(this.videoLandScape === 0 ? Alignment.Top : Alignment.Center)
.fitOriginalSize(true)
.autoResize(true)
.position({ x: 0, y: this.videoLandScape === 0 ? 0 : '50%' })
.markAnchor({ y: this.videoLandScape === 0 ? 0 : '50%' })
// .visibility(this.imageVisible ? Visibility.Visible : Visibility.None)
.height(this.windowWidth / this.ratio + 'px')
.opacity(this.imageVisible ? 1 : 0)
.animation({
duration: 500, curve: Curve.EaseInOut
})
}
@Builder
... ... @@ -269,6 +267,8 @@ export struct DetailPlayShortVideoPage {
.width('100%')
.height(this.windowWidth / this.ratio + 'px')
this.playerCoverBuilder()
// .height(this.displayDirection === DisplayDirection.VIDEO_HORIZONTAL ? '100%' :
// this.videoLandScape === 1 ? 210 : 'auto')// .height(this.videoLandScape === 1 ? 210 : '100%')
// .width(this.videoLandScape === 1 ?
... ...
... ... @@ -16,7 +16,7 @@ export struct PictureLoading {
build() {
Row() {
Image(this.imagePath)
.alt($r('app.media.picture_loading'))
.alt($r('app.media.datail_imageLoading_w'))
.width(this.imageWidth)
.aspectRatio(this.ratio)
.objectFit(ImageFit.Fill)
... ...
... ... @@ -254,7 +254,8 @@ export struct VideoChannelDetail {
})
} else {
PictureLoading().visibility(this.isMouted ? Visibility.None : Visibility.Visible)
PictureLoading()
.visibility(this.isMouted ? Visibility.None : Visibility.Visible)
Swiper(this.swiperController) {
ForEach(this.data, (item: ContentDetailDTO, index: number) => {
Column() {
... ...