uni-app video 获取视频总时长

uni-app video 获取视频总时长

接到公司的一个需求，在uni-app开发的小程序和h5页面的商品详情轮播图中添加一个视频，后台返回视频src，但没有返视频时间，怎么办呢，只能自己动手了。记录一下实现过程中遇到的一些的问题。

html

<view class="swiper-box">
	<swiper circular="true" autoplay="true" @change="swiperChange">
		<swiper-item v-for="swiper in swiperList" :key="swiper.id">
			<image mode="aspectFill" :src="swiper.img"></image>
		</swiper-item>
	</swiper>
	<view class="indicator">{{ currentSwiper + 1 }}/{{ swiperList.length }}</view>
	<view class="video_play" v-if="isPlay&&videoSrc" @click="toPlay">
		<view class="play_icon">
			<view class="video_time">{{videoTime}}</view>
		</view>
	</view>
	<view class="video_box"  v-if="!isPlay">
		<video id="swiperVideo" :src="videoSrc" controls="controls" oncanplaythrough="oncanplaythrough" @loadedmetadata="loadedmetadata"></video>
		<view class="pause_play">
			<view class="pause_btn" @click="outPlay">退出播放</view>
		</view>
	</view>
</view>

部分data数据：

data() {
	return {
	isPlay:[],
	videoSrc：'',
	isPlay:false,
	videoTime:0,
	videoContext:'',
	}
},
methods:{
   // 查看官方文档，通过loadedmetadata方法获取时长，但是loadedmetadata函数无法触发
   loadedmetadata(){//无效果
		console.log("loadedmetadata")
	},
	oncanplaythrough(){//无效果
		console.log("oncanplaythrough") 
	},
	toPlay() {
		this.videoContext = uni.createVideoContext('swiperVideo')
			this.isPlay = false;
			this.videoContext.play()
		},
		outPlay() {
			this.videoContext.pause();
			this.videoContext.stop();
			this.videoContext.seek(); // 初始化播放进度
			this.videoContext=""
			this.isPlay = true;
		},
		formatSeconds(value) {
			let theTime = parseInt(value);// 秒
			let middle= 0;// 分
			if(theTime > 60) {
			    middle= parseInt(theTime/60);
			    theTime = parseInt(theTime%60);	
			}
			return `${middle>9?middle:'0'+middle}′${theTime>9?theTime:'0'+theTime}″`;
		},
		getGoodsDetail() {
			uni.request({
			// 发送请求，后台返回数据
			...
				success: (res) => {
       				let audioContext = uni.createInnerAudioContext();
						audioContext.volume=0;
						audioContext.autoplay = true;
						audioContext.src = this.goodsData.video || "";
						let that = this;
						// 必须写在onCanplay里面，否则获取不到
						audioContext.onCanplay(()=> {
						    audioContext.duration; 
							audioContext.buffered;
							//如果不写上面2行，打印audioContext，duration，buffered都有值，但打印audioContext.duration或audioContext.buffered值为0
							setTimeout(() => {
								if(audioContext.duration*1>0||audioContext.buffered*1>0) {
								// 部分iphone手机audioContext.duration 会为为0，所以判断audioContext.duration是否为0
									that.videoTime = that.formatSeconds(audioContext.duration==0?audioContext.buffered:audioContext.duration);
								}
							}, 1000)
						})
    			}
			})
		},
}

总结

各位大佬们，觉得有用，可以收藏点赞，给点鼓励，有不同意见的欢迎留言，谢谢大家。