使用videojs-wavesurfer获取视频当前时间报错:getCurrentTime不是函数
问题描述
我需要实现以下功能:播放合并了音频流的视频流时,点击音频波形获取当前播放时间,暂停后添加视频相关笔记。但在pause事件中调用videoplayer.getCurrentTime()时,控制台报错“getCurrentTime不是函数”,仅纯音频流场景下该功能能正常工作,求解决办法。
问题代码
let options = { controls: true, bigPlayButton: false, autoplay: false, loop: false, fluid: false, width: 1000, height: 200, plugins: { // enable videojs-wavesurfer plugin wavesurfer: { // configure videojs-wavesurfer backend: 'MediaElement', displayMilliseconds: true, debug: true, waveColor: 'black', progressColor: 'purple', cursorColor: 'yellow', hideScrollbar: true, // put waveform in separate container container: '#waveform' } } }; let videoplayer = videojs('myClip', options, function() { let videofile = $("#mergedVideo").text() console.log(" Playing "+videofile) // load wav file from url videoplayer.src({src: videofile, type: 'video/mp4'}); }); // Here is the pause... always gives an error.. videoplayer.on('pause', function () { let currenttime = videoplayer.getCurrentTime(); $('#currentTime').text(currenttime); alert(" PAUSED ") });
解决方法
- 错误原因:你误用了Video.js的API方法。Video.js官方规范中,获取当前播放时间的方法是
currentTime(),而非getCurrentTime()。纯音频场景下插件可能做了兼容处理,但视频场景下没有该兼容,因此触发报错。 - 修改方案:将pause事件回调中的
videoplayer.getCurrentTime()替换为videoplayer.currentTime()即可。 - 优化写法:回调函数内的
this指向当前的player实例,也可以直接用this.currentTime()让代码更简洁:
videoplayer.on('pause', function () { let currenttime = this.currentTime(); $('#currentTime').text(currenttime); alert(" PAUSED ") });
内容的提问来源于stack exchange,提问作者interactionsolutions
相关产品推荐
相关产品推荐

