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值为0setTimeout(() => {if(audioContext.duration*1>0||audioContext.buffered*1>0) {// 部分iphone手机audioContext.duration 会为为0，所以判断audioContext.duration是否为0that.videoTime = that.formatSeconds(audioContext.duration==0?audioContext.buffered:audioContext.duration);}}, 1000)})}})},
}
总结
