-
在小程序开发的时候,其他小程序能够正常
暂停、播放、切换进度
,但是在微信小程序发现没有生效,原因是平台差异// 官网案例是这样获取 videoContext 的 this.videoContext = uni.createVideoContext('myVideo') // 但是如果需要处理微信小程序的差异,则需要将 this 传入 this.videoContext = uni.createVideoContext('myVideo', this)
-
案例效果
<template> <view class="video-view"> <!-- 播放器 --> <video autoplay id="myVideo" class="video-content" :src="drama.limit_url" :controls="false" @loadedmetadata="loadedmetadata" @timeupdate="timeUpdate" > </video> <!-- 遮盖层 --> <view class="video-cover" @click="touchPlay"> <view class="view-cover-content"> <!-- 信息栏 --> <view class="video-info"> <!-- 弹簧 --> <view style="flex: 1;"></view> <!-- 显示时间 --> <view class="video-time" v-if="isDrag"> <view class="video-time-current">{ { dragStarTime }}</view> <view style="padding: 0 20rpx;">/</view> <text>{ { dragEndTime }}</text> </view> <!-- 进度栏 --> <view class="slider-view" @click.stop> <u-slider v-model="currentTime" min="0" :max="duration" inactiveColor="rgba(255, 255, 255, 0.2)" activeColor="#F8DD52" @changing="sliderChanging" @change="sliderChange" ></u-slider> </view> <!-- 当前集数 --> <view class="video-info-current" @click.stop> <!-- 名称 --> <view class="video-info-title text-ell" v-if="drama.project_drama_name">{ { drama.project_drama_name }}-第{ { drama.eq_number }}集</view> <!-- 弹簧 --> <view style="flex: 1;"></view> <!-- 选集 --> <view class="video-info-btn" @click="touchSwitch"> <view class="arrow-right-title">选集</view> <u-icon name="arrow-right" color="#fff"></u-icon> </view> </view> </view> </view> </view> </view> </template> <script> export default { props: { // 当前剧集 drama: { type: Object, default: () => { } } }, data() { return { // 播放器上下文 videoContext: undefined, // 播放状态 isPlay: true, // 当前时长 currentTime: 0, // 总时间 duration: 0.1, // 是否正在拖拽进度 isDrag: false, // 拖拽时视频时间 dragStarTime: '', dragEndTime: '', // 当前还没显示过提示消息 isShowMsg: true } }, mounted () { // 获取播放器上下文(后面的 this 需要传入,在微信小程序上无法暂停播放拖拽精度,所以需要传入这个) this.videoContext = uni.createVideoContext('myVideo', this) }, methods: { // 播放 play () { this.videoContext.play() }, // 暂停 pause () { this.videoContext.pause() }, // 播放状态切换 touchPlay () { this.isPlay = !this.isPlay if (this.isPlay) { this.play () } else { this.pause() } }, // 播放进度发生变化 timeUpdate (e) { // 拖拽时不需要进行更新 if (!this.isDrag) { // 更新进度 const { currentTime } = e.detail this.currentTime = currentTime // 播放完成 if (Math.trunc(currentTime) === Math.trunc(duration)) { this.$emit('playcomplete', e) } // 返回当前播放时间 this.$emit('timeupdate', e) } }, // 拖拽结束 sliderChange (value) { // 停止拖拽 this.isDrag = false // 判断一下是否大于基础时间 if (this.duration > 0.1) { // 跳到指定时间点 this.videoContext.seek(value) // 并调用播放 this.play() } }, // 正在拖拽 sliderChanging (value) { // 开始拖拽 this.isDrag = true // 刷新时间 this.reloadVideoTime() }, // 刷新显示时间 reloadVideoTime () { // 当前时间 this.dragStarTime = this.$pub.TIME_CONVERT(this.currentTime) // 总时间 this.dragEndTime = this.$pub.TIME_CONVERT(this.duration) }, // 加载完成 loadedmetadata (e) { const { duration } = e.detail // 记录视频总时间 this.duration = duration // 回调 this.$emit('loadcomplete') }, // 切换选集 touchSwitch () { this.$emit('switch') } } } </script> <style lang="scss"> .video-view { position: relative; width: 100%; height: 100%; .video-content { width: 100%; height: 100%; } .video-cover { position: absolute; left: 0; top: 0; width: 100%; height: 100%; .view-cover-content { position: relative; width: 100%; height: 100%; .video-info { display: flex; flex-direction: column; position: absolute; bottom: 0; left: 0; width: 100%; height: 246rpx; background: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.00) 0%, rgba(0,0,0,0.40) 100%, rgba(0,0,0,0.40) 100%); .slider-view { flex-shrink: 0; } .video-info-current { flex-shrink: 0; display: flex; align-items: center; width: 100%; color: #fff; font-size: 34rpx; padding: 0 40rpx 40rpx; width: calc(100% - 80rpx); .video-info-btn { flex-shrink: 0; display: flex; align-items: center; padding-left: 40rpx; .arrow-right-title { margin-right: 10rpx; } } } .video-time { display: flex; align-items: center; justify-content: center; font-size: 64rpx; color: rgba(255, 255, 255, 0.7); .video-time-current { color: #fff; } } } } } } </style>
UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
猜你喜欢
转载自blog.csdn.net/zz00008888/article/details/126290538
今日推荐
周排行