0

我正在使用videojs。由于某种原因，视频的持续时间显示为 0，即使在完全加载时也是如此。
在 video.js 文件的第 2487 行，我确定了这一部分...

ControlBar.prototype.options_ = {
  children: ['playToggle', 'volumeMenuButton', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'descriptionsButton', 'subtitlesButton', 'captionsButton', 'audioTrackButton', 'fullscreenToggle']
};

...包括“durationDisplay”属性，所以有谁知道为什么持续时间显示为 0？

视频是 mp4 并在 AngularJS 指令中加载：

app.directive('engVideo',['$timeout', '$http', function($timeout, $http) {
    return {
        restrict: 'A',
        priority: 100,
        replace: true,
        templateUrl: 'components/video.html',
        link: function(scope, element, attrs) {
        ....
            function VideoJSPlayerInit(window, videojs) {
                var player = videojs(scope.component.video.id, {
                    html5: {
                        nativeTextTracks: false
                    }
                });    
                player.pause();

            }

根据评论中的建议，我还尝试在创建 videojs 元素时侦听“loadedmetadata”事件，如下所示：

function VideoJSPlayerInit(window, videojs) {
                var player = videojs(scope.component.video.id, {
                    html5: {
                        nativeTextTracks: false
                    }
                }, function() {
                        this.on('loadedmetadata', function(){
                            console.log("video metadata loaded");
                        });
                    }
                );

但是没有任何东西输出到控制台 - 所以我猜没有加载元数据（？）我也改变了它来监听'loadeddata'事件并且确实得到了安慰。

这可能是视频编码问题吗？我一直在寻找如何从包含持续时间元数据的 Premiere 导出，但据我所知，它就在那里。

任何线索，非常感谢。

4

1 回答 1

0

好的，我终于明白了：这与元数据无关；由于某种原因，我们使用的 video.js 版本将持续时间值硬编码为“0:00”。如果它对其他人有用，这是我添加的内容（从第 5241 行添加到 video.js 文件中）以使持续时间正确显示：

DurationDisplay.prototype.createEl = function createEl() {
    var el = _Component.prototype.createEl.call(this, 'div', {
      className: 'vjs-duration vjs-time-control vjs-control'
    });
    // following three lines are new...
    var intSeconds = parseInt(this.player_.duration());
    var intMinutes = parseInt(intSeconds / 60);
    intSeconds = intSeconds - (60 * intMinutes);
    this.contentEl_ = Dom.createEl('div', {
      className: 'vjs-duration-display',
      // label the duration time for screen reader users
      //innerHTML: '<span class="vjs-control-text">' + this.localize('Duration Time') + '</span> 0:00' // - old line
      innerHTML: '<span class="vjs-control-text">' + this.localize('Duration Time') + '</span>' + intMinutes + ':' + intSeconds
    }, {
      // tell screen readers not to automatically read the time as it changes
      'aria-live': 'off'
    });

    el.appendChild(this.contentEl_);
    return el;
  };
于 2018-06-13T12:59:55.467 回答