UniApp video 使用

在小程序开发的时候，其他小程序能够正常暂停、播放、切换进度，但是在微信小程序发现没有生效，原因是平台差异

// 官网案例是这样获取 videoContext 的
this.videoContext = uni.createVideoContext('myVideo')// 但是如果需要处理微信小程序的差异，则需要将 this 传入
this.videoContext = uni.createVideoContext('myVideo', this)

案列：

<template><view class="video-view"><!-- 播放器 --><videoautoplayid="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-sliderv-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.isPlayif (this.isPlay) {this.play ()} else {this.pause()}},// 播放进度发生变化timeUpdate (e) {// 拖拽时不需要进行更新if (!this.isDrag) {// 更新进度const { currentTime } = e.detailthis.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 使用（自定义进度条，及微信无法暂停播放设置进度问题）_卡尔特斯的博客-CSDN博客_uniapp video 自定义进度条

UniApp video 使用相关推荐

Uni-app Video倍速播放功能
Uni-app Video倍速播放功能前言使用代码前言今天接到一个给播放器新增倍速播放的功能:因为用的是uniapp自带的video,这里面没有倍速播放这个选项.然后在官方文档找了一会儿,找 ...
Uniapp video timeupdate计时器代替@ended提交视频进度
Uniapp viedo timeupdate计时器代替@ended提交视频进度与视频拖动限制 :由于uniapp 在Hbuilder打包后可能导致viedo组件@ended无法触发的问题,不能完成视 ...
uniapp video 标签，点击进入全屏播放，退出全屏，停止播放，暂停播放
<video :src="url" controls id="videoId" @play="play"@fullscreenchan ...
Uniapp Video MP4视频播放失败，只有声音，黑屏，视频播放不了，解决办法
笔者的解决方案是: 将mp4的视频转码成m4v,然后放置到Tomcat本地服务器上进行运行,最后附上视频转码链接:https://convertio.co/zh/
uni-app 组件video显示视频缩略图
uni-app video 组件显示视频缩略图 HTML代码 JS代码话不多少直接上代码,需要注意的是,视频默认自动播放,获取到视频时候立马暂停视频 HTML代码 <template>& ...
uniapp 修改 video 组件css样式
uniapp video标签默认的.uni-video-container样式background-color带有黑色背景滑动播放视频列表时,第一个视频会一闪黑屏,实际上是标签本身的样式设置背景 ...
excel 表做下拉框_Excel工作表的组合框下拉列表
excel 表做下拉框 Would you prefer a bigger font size for items in a data validation drop down list? Would ...
excel 中vb组合框_Excel数据验证组合框代码
excel 中vb组合框 Instead of selecting a product code in an Excel drop down list, it's usually easier to ...
【uni-app】rich-text 无法处理 video 的解决办法
前言 Hbuilder X 2.7.14.20200618 rich-text 无法处理 video uni-app 文档中关于 rich-text 介绍中明确说明 rich-text 支持什么(参考 ...

UniApp video 使用

UniApp video 使用相关推荐

最新文章

热门文章