uni-app video 获取视频总时长

灰太狼 2022-12-19 08:59 561阅读 0赞

# uni-app video 获取视频总时长 #

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyODA0Mw_size_16_color_FFFFFF_t_70_pic_center]

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)
    						})
        			}
    			})
    		},
    }

# 总结 #

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzkyODA0Mw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/a4dea9c75bbe4743b870038c989d6696.png