解决 videojs 播放视频进度条下方左侧当前播放时长一直为 0 的问题

问题描述

情况是 videojs 播放视频 最下面进度条位置左侧是当前播放时间/总时长 但是不知道为什么这个当前播放时间一直为0（在我自己 ios 手机和谷歌浏览器均正常） 同时 抓包请求参数 我在 videojs 获取currentTime 等于 0.xxxxxxxxxx

我获取 video dom 然后获取 currentTime 也还是这样 所以我就猜测 应该跟那个进度一直为0有关 这个 0 的问题修复了 currentTime 这个应该就正常了
还有视频中间页一直有预加载的那个圈 从进来就一直在 点开始播放了 也一直在转是自己开发的企微应用 在企微的工作台下面的应用 然后 h5 开发 vue3 框架 视频控件是 videojs

问题分析

根据你描述，是有两个主要问题：

1. 进度条一直显示0，currentTime为0.xxxxx。
2. 播放时中间页的加载圈一直显示，即使点击播放也无法消失。

这是在使用 video.js 视频播放器开发的企微应用中遇到的问题。结合你的描述和经验，这可能涉及到视频播放器的加载和播放事件、企微应用环境限制以及 video.js 配置的问题。以下是一些可能的原因和解决方法：

当前播放时间一直为 0 的问题

currentTime 一直为 0.xxxx 且进度条不动，可能是以下几个原因：

(1) 视频未加载完全或卡在加载阶段

当视频没有加载完全或资源请求存在问题时，播放器的进度条会一直显示为 0。你可以检查一下以下内容：

• 确认视频资源是否正常加载，可以在浏览器开发者工具的“网络”选项卡中查看视频资源的请求状态。如果加载时间过长或失败，可能会导致 currentTime 无法更新。
• 检查 preload 属性是否设置正确。默认情况下，preload="auto" 会尝试在页面加载时预先加载视频数据，但可以改为 preload="metadata"，这样只加载必要的元数据。

<video id="my-video" class="video-js" preload="auto" controls>
  <source src="your-video-source.mp4" type="video/mp4">
</video>

(2) 事件监听器问题

确保 video.js 的事件监听器正常工作，尤其是 timeupdate 事件，用来更新当前时间和进度条。如果事件没有触发，进度条可能不会更新。你可以尝试手动绑定事件，查看 currentTime 是否更新：

player.on('timeupdate', function () {
  console.log('Current time: ', player.currentTime());
});

(3) 检查iOS环境的限制

有时候 iOS 端对视频的自动播放和加载有一定限制，特别是在网络不稳定时，可能会影响视频的加载。确保你的 iOS 设备上没有受到以下因素的影响：

• 允许自动播放：iOS 设备通常不允许自动播放视频，除非用户与页面进行了交互。
• 尝试手动播放：通过用户操作触发播放，而不是自动触发。

document.getElementById('my-video').addEventListener('click', function() {
  player.play();
});

视频加载圈一直存在的问题

这个问题可能与加载状态没有正确更新有关。在 video.js 中，加载圈通常是根据视频的缓冲和播放状态来控制的。可以从以下几个方面检查：

(1) 检查缓冲状态

确认视频的缓冲进度是否正常。video.js 有一个 buffered 属性，检查是否有视频数据被缓冲：

player.on('progress', function() {
  var buffered = player.buffered();
  console.log('Buffered time ranges: ', buffered);
});

如果视频没有正确缓冲，可能是因为网络问题、视频源不稳定或者跨域请求问题。

(2) 监听 canplay 事件

确保在缓冲完成后，视频能够正常播放，加载圈消失。通常，当视频可以播放时会触发 canplay 事件，可以监听该事件并隐藏加载圈：

player.on('canplay', function() {
  console.log('Video can play now');
  // Hide the loading spinner
  document.getElementById('loading-spinner').style.display = 'none';
});

(3) 检查自动播放策略

如果你期望视频自动播放，但没有响应，可以尝试在初始化 video.js 时添加 autoplay 选项：

var player = videojs('my-video', {
  autoplay: true,
  controls: true,
  preload: 'auto'
});

但请注意，在某些浏览器或企微环境下，自动播放可能被限制，特别是在没有用户交互的情况下。

其他潜在问题与解决

• 跨域问题：确保你的视频源没有跨域访问问题。如果视频的来源和应用域名不一致，可能会导致跨域问题，进而影响视频的加载和播放。可以检查浏览器的开发者工具中是否有跨域错误。
• 企微工作台环境问题：在企微环境下，H5应用可能受到一些特定的安全性或权限限制，导致某些功能（如自动播放、缓冲等）无法正常运行。你可以尝试在企微的开发环境中调试，并检查是否有特定的API限制。

总结

1. 确保视频资源加载正常，特别是检查网络请求状态和加载事件。
2. 监听 timeupdate 和 canplay 等事件，确保播放器正常更新播放时间和进度条。
3. 检查是否有跨域问题或者iOS设备的限制，影响自动播放或者缓冲。
4. 在企微工作台环境下，检查是否有API限制，影响视频播放。

希望这些建议能够帮助你解决问题！如果你尝试了这些步骤后问题依然存在，欢迎继续联系我，我们可以进一步排查。