从 videoJS 显示视频时长

Posted 2023-05-07

【中文标题】从 videoJS 显示视频时长

【英文标题】：Display video duration from videoJS

【发布时间】：2013-11-23 12:43:30

【问题描述】：

我正在使用 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"  
      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"  
      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>

我的错误在哪里？

【问题讨论】：

你能在网上创建一个你的问题的演示，也许在jsFiddle，所以我们可以看到它？

How to display Javascript/Jquery value in HTML page? VideoJs Display durration of the video 的可能副本

精确与How to print one specific Javascript variable in HTML? 重复。请避免多次问同一个问题。另见***.com/questions/19915141/…

【参考方案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());
    

【参考方案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.

);

【讨论】：

你的答案应该有解释。

希望这些 cmets 对您有所帮助。谢谢

【参考方案3】：

那些可能来到这里并在 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()`);
);

【参考方案4】：

当您使用 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>

【讨论】：

它仍然说持续时间为0。我怎样才能显示真实的持续时间？

在执行记录howLongIsThis var 时，您在控制台中看到了什么？

你在控制台是什么意思？我不明白。

为什么它是 = 0 问题出在哪里？

我如何在控制台中执行这个？