uni-app video 获取视频总时长
接到公司的一个需求 , 在uni-app开发的小程序和h5页面的商品详情轮播图中添加一个视频 , 后台返回视频src , 但没有返视频时间 , 怎么办呢 , 只能自己动手了 。记录一下实现过程中遇到的一些的问题 。
文章插图
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 = http://www.kingceram.com/post/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)})}})},}
总结
【uni-app video 获取视频总时长】各位大佬们 , 觉得有用 , 可以收藏点赞 , 给点鼓励 , 有不同意见的欢迎留言 , 谢谢大家 。
- uni-app APP、html引入html2canvas截图以及截长图
- 基于uni-app框架的小程序——点击跟随事件
- 【重要】如何获取超1400页《深度学习之图像识别》书籍配套教学PPT与视频等完整
- JS获取元素的九种方法、节点,以及在JS中动态增删改元素
- Java Web基础入门
- 藕通过什么获取养分蚂蚁庄园
- 淘宝订单信息获取接口API,淘宝打单发货接口
- 京东详情页详情图片获取
- html5 缓存url视频,html5 video 视频页面内缓存
- 如何使用天眼查接口获取公司信息并进行数据分析?