Question

我正在使用带有video.js插件的videojs-playlists播放器，并且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)

如果我的代码中的错误不是很明显，也许有更多使用此插件的经验的人可以为我提供指导，以对其进行故障排除。

Answer 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 应该仍然能够添加源，无论出于何种原因，这都会使时间条/进度条按预期前进。

Videojs控制栏未随视频更新

1 个答案: