关于video-js currentTime()无效的解决办法

最近使用videojs的时候碰到一个需求,更换视频的src后需要让视频跳转到某个位置,按理说使用currentTime()就可以解决,但是在player.src()函数执行后再执行player.currentTime()就会无效。

这种情况是因为调用player.src()后视频还没有准备好,所以player.currentTime()无效,解决办法就是等视频准备好后再调用currentTime();

//添加视频准备完成后的回调函数
player.on('loadedmetadata', function() {
            player.play();            			//自动播放
            player.currentTime(100);		    //跳转
});
<think>好的,我现在需要帮助用户解决在使用vue-video-player时无法获取视频时长以及loadedmetadata事件不生效的问题。首先,我得理清楚可能的原因和解决办法。 用户提到的两个问题:无法获取视频时长和loadedmetadata事件没触发。这两个通常与视频元数据加载有关。首先,视频的元数据是否成功加载?如果视频没有正确加载,可能无法获取时长,事件也不会触发。 可能的原因包括: 1. 视频源的问题。如果视频地址无效或格式不支持,可能导致元数据无法加载。用户需要确认视频源是否正确,并且服务器支持跨域(CORS),尤其是使用在线资源时。跨域问题可能导致部分事件无法触发。 2. 视频格式或编码问题。有些格式可能需要特定的插件或解码器。例如,HLS或FLV需要引入对应的库如videojs-contrib-hls或flv.js。用户是否按照文档正确引入了这些依赖?比如引用[2]和[3]提到的导入videojs-contrib-hls和配置插件,这可能影响视频播放器的功能。 3. 事件监听的时机问题。可能在组件加载时视频元素还未准备好,导致事件监听未正确绑定。需要在视频播放器初始化完成后再添加事件监听。例如,在mounted生命周期钩子中使用$nextTick,或者在player的ready事件中绑定。 4. Vue-video-player的事件监听方式是否正确。是否使用了正确的事件名称,比如使用player.on('loadedmetadata', ...)而不是通过Vue的事件绑定?可能需要通过获取player实例后直接监听原生事件。 接下来,解决方案可能包括以下几个步骤: - 确保视频源正确且可访问,检查CORS设置。 - 引入必要的视频格式支持插件,比如对于HLS或FLV。 - 在player的ready事件中绑定loadedmetadata事件,确保此时player已经就绪。 - 使用player的duration()方法获取时长,可能需要等待元数据加载完成后再调用。 另外,参考用户提供的引用[4]中的代码示例,检查组件的配置选项是否正确,比如是否指定了正确的类型(如flv、hls等),是否启用了正确的技术顺序。 可能的代码调整包括: 在videoOptions中设置techOrder,确保使用正确的技术处理视频源。例如,使用flv时可能需要techOrder: ['html5', 'flvjs']。 然后,在mounted或player的ready事件中,获取player实例并添加事件监听: this.player = this.$refs.videoPlayer.player; this.player.on('loadedmetadata', () => { this.duration = this.player.duration(); }); 同时,处理可能出现的异步问题,比如视频加载需要时间,可能需要设置超时或等待。 另外,用户提到的引用[5]中提到解决微信自动全屏的问题,可能与页面配置有关,但当前问题更可能与事件监听和视频源有关。 总结可能的解决步骤: 1. 检查视频源有效性,确保跨域允许。 2. 引入正确的解码插件。 3. 在player准备就绪后绑定事件。 4. 使用原生player方法获取时长和监听事件。</think>以下是为您提供的解决方案: ### 问题分析 在`vue-video-player`中无法获取视频时长且`loadedmetadata`事件未触发,通常由以下原因导致: 1. **视频源未正确加载**(跨域问题或格式不支持)[^4] 2. **未正确绑定事件监听** 3. **缺少必要编解码插件支持**(如HLS/FLV需要额外引入库)[^2][^3] ### 解决方案 #### 1. 确保视频源有效性 ```javascript // videoOptions配置示例(FLV格式) videoOptions: { sources: [{ type: "video/x-flv", src: "http://有效视频地址.flv" // 需替换为真实地址 }], techOrder: ['html5', 'flvjs'], // 明确技术优先级 flvjs: { mediaDataSource: { isLive: true } } } ``` *需确认服务器已配置`CORS`允许当前域名访问[^4]* #### 2. 引入必要插件 ```javascript // main.js中引入 import 'videojs-flash' // 传统flash支持 import 'videojs-contrib-hls' // HLS支持 import 'flv.js' // FLV支持 ``` #### 3. 正确绑定事件监听 ```vue <script> export default { mounted() { this.$nextTick(() => { const player = this.$refs.videoPlayer.player player.on('loadedmetadata', () => { console.log('视频时长:', player.duration()) }) player.on('error', (err) => { console.error('播放错误:', err) }) }) } } </script> ``` #### 4. 强制获取时长(备用方案) ```javascript // 当事件未触发时尝试轮询获取 const checkDuration = () => { if(this.player.duration() === Infinity){ this.player.currentTime(1e101) this.player.one('timeupdate', () => { this.player.currentTime(0) console.log('修正后的时长:', this.player.duration()) }) } } ``` ### 完整组件示例 ```vue <template> <videoPlayer ref="videoPlayer" :options="videoOptions"/> </template> <script> import 'videojs-flash' export default { data() { return { videoOptions: { autoplay: false, controls: true, sources: [{ type: 'video/mp4', src: 'https://example.com/valid.mp4' }] } } }, mounted() { this.player = this.$refs.videoPlayer.player this.player.ready(() => { this.player.on('loadedmetadata', () => { console.log('Metadata loaded, duration:', this.player.duration()) }) }) } } </script> ``` ### 注意事项 1. 移动端浏览器可能需要添加`playsinline`属性[^5] 2. FLV/HLS格式需要显式声明`techOrder`配置 3. 建议添加错误监听排查具体问题[^1]
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值