小程序双击暂停事件分别给播放和暂停一种状态处理两种状态下的不同情况...

最新推荐文章于 2024-10-01 14:39:32 发布

原创最新推荐文章于 2024-10-01 14:39:32 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个基于微信小程序实现的视频播放器组件的交互逻辑，包括播放、暂停、全屏等功能，并通过事件监听来实现播放状态的切换。此外，还涉及了如何在不同状态下显示不同的覆盖元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<video id="my-video" src="{{currentVideo.file_url}}" @timeupdate="timeupdate" custom-cache="{{false}}" show-center-play-btn="{{false}}" controls @fullscreenchange="fullScreen" @tap.native="testTap"
       @play="setPlayStatus"
       @pause="setPauseStatus">
<cover-image class="return" src="{{imageUrl}}/image/video/return.png" wx:if="{{fullScreen}}" @tap="quitFullScreen"></cover-image>
<cover-image src="{{teacherInfo.course_img_url}}" wx:if="{{!playing}}"></cover-image>
<cover-view class="cover-text" wx:if="{{!playing}}">
<cover-view class="text">已有{{teacherInfo.course_study}}人学习了该视频</cover-view>
<!--<cover-view class="button" @tap="playVideo">开始学习</cover-view>-->
</cover-view>
<cover-view class="button" @tap="playVideo" wx:if="{{showBtn}}">开始学习</cover-view>
</video>

setPlayStatus() {
this.isPlaying = true
},
setPauseStatus() {
this.isPlaying = false
},
testTap() {

// 这个里面才能拿到相应的值this.isPlaying 做处理
this.currentTime = Date. now()
if (!this.firstTime) {
this.firstTime = this.currentTime
    setTimeout(() => {
this.firstTime = null
    }, 350)
  }
var mul = (this.currentTime - this.firstTime)
console.log(mul)

if (mul !== 0 && mul < 350) {
console.log('进入函数===', this.isPlaying)
this.isPlaying ? this.videoContext.pause() : this.videoContext.play()
  }
return false
},