從 videoJS 顯示視頻時長

Question

我正在使用 jQuery 開發 HTML5 視頻播放器。 現在我的視頻播放器運行良好，但我想獲取視頻持續時間的變量並在純 HTML 頁面中顯示/顯示它。

因此，您可以從這里獲取有關此 Jquery 視頻播放器的更多信息： http://www.videojs.com/docs/api/

我認為視頻持續時間的變量是： myPlayer.duration();

如何在 HTML 中顯示此值？

這是我的 HTML 代碼來顯示播放器：

  <video id="vemvo-player" class="video-js vjs-default-skin" controls autoplay="true" width="950" height="534"
      data-setup="{}">
    <source src="[var.base_url]/uploads/[var.video_play]" type='video/flv' />
  </video>

這是我試圖顯示此變量的內容，但它說它是 =“0”，而在視頻播放器上它說它是 4 分鍾：

  <video id="vemvo-player" class="video-js vjs-default-skin" controls autoplay="true" width="950" height="534"
      data-setup="{}">
    <source src="[var.base_url]/uploads/[var.video_play]" type='video/flv' />
  </video>
<div id="duration"></div>
<script type="text/javascript">
    _V_("vemvo-player").ready(function(){
        var myPlayer = this;
        var howLongIsThis = myPlayer.duration();
        $('#duration').html('Duration: ' + howLongIsThis);
    });
</script>

我的錯誤在哪里？

Answer 1

你可以試試這個。 它對我有用。

var myPlayer = videojs('vemvo-player');

    if (myPlayer.readyState() < 1) {
        // wait for loadedmetdata event
        myPlayer.one("loadedmetadata", onLoadedMetadata);
    }
    else {
        // metadata already loaded
        onLoadedMetadata();
    }

    function onLoadedMetadata() {
        alert(myPlayer.duration());
        $('#duration').html("Duration: " + myPlayer.duration());
    }

Answer 2

var player = videojs('my-video', {
    fluid:false, // videojs settings
    controls:true,
    height: '300'          
  });
$(document).ready(function(){
  console.log(player.duration()); 
 // will return video duration. Can't be used while page is loading.

  console.log(player.currentTime()); 
 // will return current time if video paused at some time. Intially it would be 0.

});

Answer 3

當您使用 jQuery 時，這可以更容易完成 :) 您可以使用$.html來編輯 dom 元素的 html 內容。 您的代碼將如下所示：

<div id="duration"></div>

<script type="text/javascript">
    _V_("vemvo-player").ready(function(){
        var myPlayer = this;
        var howLongIsThis = myPlayer.duration();
        $('#duration').html('Duration: ' + howLongIsThis);
    });
</script>

Answer 4

那些可能來到這里並在 Vue 3 中使用 videojs 的人，也可能使用類似的框架，如 React。

參考此代碼和組件使用 - https://docs.videojs.com/tutorial-vue.html，您可以進行以下更改以獲取持續時間、高度和寬度。

// New Code here
this.player = videojs(
  this.$refs.videoPlayer,
  this.options,
  function onPlayerReady() {
    console.log("onPlayerReady", this);
  }
);
this.player.one("loadedmetadata", () => {
  var duration = this.player.duration();
  console.log(`Duration of Video ${duration}`);
  console.log(`Original Width of Video ${this.player.videoWidth()}`);
});

Answer 5

我很難獲得視頻的真實持續時間（使用 videojs v7.18.*），導致自定義進度條出現錯誤！ 問題是player.duration()總是返回四舍五入的數字，而player.liveTracker.seekableEnd()返回實際值但僅在start事件之后。

例如，如果實際持續時間為 13.456 秒，則為 videojs 播放器 object p返回這些值：

                            | On ready    | On load | On start
----------------------------|-------------|---------|----------
p.duration()                | 0           | 14      | 14
p.liveTracker.seekableEnd() | 14          | 14      | 13.456

我最終在 React 中得到了這個解決方案：

const onDurationChange = () => {
  const dur = player?.liveTracker.seekableEnd() || player?.duration() || 0;
  setDurationInSec(dur);
}

return <video ref={videoRef} onDurationChange={onDurationChange}>