Videojs控制栏不随视频更新答案

【问题标题】：Videojs Control Bar not updating with videoVideojs控制栏不随视频更新
【发布时间】：2021-03-16 09:32:18
【问题描述】：

我正在使用带有videojs-playlists 插件的video.js 播放器，但我遇到了vjs-progress-control 栏（进度栏）和vjs-remaining-time vjs-time-control（视频剩余时间）元素的问题。两者都不会随视频更改或更新。他们只是停留在起始位置，“剩余时间”显示“-0:00”。尽管如此，单击进度条中的某个点会导致视频按预期跳到该点，并移动进度条，但之后它会保持原位。剩余时间保持在“-0:00”。进度条也会以意想不到的方式移动。

This is an idea of what the progress bar looks like when skipping to a point in the video

所有其他元素，例如暂停/播放、音量控制、下一个视频、上一个视频似乎都可以正常工作，但是当视频暂停/播放时播放图标不会切换到暂停图标。

在我看来，播放器在运行时并未随着视频一起更新，但我不知道为什么会这样。

HTML：

<video class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="264">
    <source src='' type='video/mp4'>
</video>

JS：

<script src="https://vjs.zencdn.net/7.3.0/video.js"></script>

<script src="https://unpkg.com/videojs-playlist@4.2.6/dist/videojs-playlist.min.js"></script>

<script>
var player = videojs(document.querySelector('video'));

var videosrc = [{
  sources: [{
    src: 'https://swing-move.s3.us-west-1.amazonaws.com/videos/9d71ad7faac2673078db3cf48ba4eea9.mp4?',
    type: 'video/mp4'
  }],
}, {
  sources: [{
    src: 'https://swing-move.s3.us-west-1.amazonaws.com/videos/93d36682fc7dcf93f905c211a37e6d18.mp4?',
    type: 'video/mp4'
  }],
}, {
  sources: [{
    src: 'https://swing-move.s3.us-west-1.amazonaws.com/videos/bba42660b54514f90c98343503ea4f4b.mp4?',
    type: 'video/mp4'
  }],
}, {
  sources: [{
    src: 'https://swing-move.s3.us-west-1.amazonaws.com/videos/0a34c7808ca1e357aca75898b1bef213.mp4?',
    type: 'video/mp4'
  }],
}];

player.playlist(videosrc)

如果我的代码中的错误不是很明显，也许对这个插件有更多经验的人可以指导我解决这个问题。

【问题讨论】：

是的，我同意你的发现。 VideoJS 中确实存在一个关于进度条相关处理的错误。我刚刚完成了一些也演示了该问题的代码，我将在下周的某个时间发布。
我应该提一下：该错误不在插件中...我的代码没有使用它。
@Dave 有趣，我会期待那个帖子。不在插件中是指不在videojs-playlists 中，对吗？错误在video-js?
是的，完全正确。该错误在 video-js 本身中。

标签： javascript video.js

【解决方案1】：

这是一个老话题，但我自己也遇到过。也许它会对某人有所帮助：

我通过删除 HTML 中的 source 标记解决了这个问题。所以，上面，而不是

<video class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="264">
    <source src='' type='video/mp4'>
</video>

你可以试试

<video class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="264">
</video>

相反。您的 JS 应该仍然能够添加源，并且无论出于何种原因，这将使时间栏/进度条按预期前进。

【讨论】：