前端 - videojs播放视频 进度条下方左侧当前播放时长一直为0？

Question

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

我获取video dom 然后获取currentTime 也还是这样 所以我就猜测 应该跟那个进度一直为0有关 这个0的问题修复了 currentTime这个应该就正常了
还有视频中间页一直有预加载的那个圈 从进来就一直在 点开始播放了 也一直在转

是自己开发的企微应用 在企微的工作台下面的应用 然后h5开发 vue3框架 视频控件是videojs

Answer 1

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

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

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

1. 当前播放时间一直为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();
});

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

这个问题可能与加载状态没有正确更新有关。在 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'
});

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

3. 其他潜在问题与解决

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

总结

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

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

Answer 2

不太清楚你描述的 在我自己ios手机和谷歌浏览器均正常 是什么意思，猜测可能是你这边开发和模拟都是正常的，但是用户那边不正常？或者说你这边使用企业微信也是不正常？

可以看一下这个Issue，里面是说 Android Chrome 的问题？

• player.currentTime() always 0 on android chrome · Issue #6832 · videojs/video.js

Answer 3

针对你提到的Video.js播放视频时进度条下方左侧当前播放时长一直为0的问题，以及视频中间页预加载圈一直转动的问题，这里有几个可能的解决方案和检查点：

1. 检查视频文件

首先，确保视频文件本身没有损坏，且格式被Video.js支持。你可以尝试播放一个不同的视频文件，看问题是否依旧存在。

2. 检查Video.js的初始化

确认Video.js是否已正确初始化。在Vue3中，你可能需要在组件的mounted钩子中初始化Video.js，并确保DOM元素已经挂载。

mounted() {
    this.$nextTick(() => {
        var player = videojs(this.$refs.videoPlayer, {
            // 配置项
        }, function onPlayerReady() {
            console.log('播放器已就绪');
        });
    });
}

3. 检查currentTime的获取时机

确保你在正确的时间点获取currentTime。如果视频尚未开始播放或由于某些原因（如网络延迟）尚未加载足够的视频数据，currentTime可能会显示为0。你可以通过监听loadedmetadata、loadeddata、canplay等事件来确保视频数据已加载：

player.on('loadedmetadata', function() {
    console.log('视频元数据已加载，当前时间：', player.currentTime());
});

player.on('loadeddata', function() {
    console.log('视频数据已加载，当前时间：', player.currentTime());
});

player.on('canplay', function() {
    console.log('视频已准备好播放，当前时间：', player.currentTime());
});

4. 检查视频源

确保视频源URL正确无误，并且服务器支持CORS（跨源资源共享），如果视频托管在不同的域上。

5. 检查浏览器或设备兼容性

虽然你说在iOS手机和谷歌浏览器上正常，但考虑到是在企业微信的应用中，可能需要检查企业微信内置的浏览器对Video.js的支持情况。尝试在不同的浏览器或设备上进行测试。

6. 预加载圈的问题

关于预加载圈一直转动的问题，这通常意味着视频数据仍在加载中。你可以尝试设置Video.js的preload属性来控制预加载行为，例如：

var player = videojs(this.$refs.videoPlayer, {
    preload: 'auto' // 或者 'metadata', 'none'
});

但注意，preload属性的设置可能受浏览器策略限制，并不总是能按预期工作。

7. 检查控制台错误

查看浏览器的控制台是否有任何错误或警告信息，这些信息可能有助于诊断问题。

如果以上方法都不能解决问题，你可能需要更详细地检查你的代码和配置，或者考虑在Video.js的GitHub仓库、Stack Overflow等平台寻求更专业的帮助。