UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)
Posted 卡尔特斯
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)相关的知识,希望对你有一定的参考价值。
-
在小程序开发的时候,其他小程序能够正常
暂停、播放、切换进度
,但是在微信小程序发现没有生效,原因是平台差异// 官网案例是这样获取 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>
自定义video控件
参考技术A 自定义您的媒体播放器您可能决定希望音频或视频播放器在浏览器中具有一致的外观,或者只是希望对其进行调整以匹配您的站点。实现此目的的一般技术是省略该controls属性以便不显示默认浏览器控件,使用 HTML 和 CSS 创建自定义控件,然后使用 JavaScript 将您的控件链接到音频/视频 API。
如果您需要额外的东西,可以添加默认播放器中当前不存在的功能,例如播放速率、质量流切换甚至音频频谱。您还可以选择如何让您的播放器响应——例如,您可以在某些情况下删除进度条。
您可以检测点击、触摸和/或键盘事件来触发播放、暂停和滑动等操作。为了用户的方便和可访问性,记住键盘控件通常很重要。
一个简单的例子——首先在 HTML 中设置你的音频和自定义控件:
一个简单的例子——首先在 HTML 中设置你的音频和自定义控件:
复制到剪贴板
添加一些 JavaScript 来检测播放和暂停音频的事件:
以上是关于UniApp video 使用(自定义进度条,及微信无法暂停播放设置进度问题)的主要内容,如果未能解决你的问题,请参考以下文章