如何在 HTML 页面中显示 Javascript/Jquery 值？ VideoJs 显示视频时长答案

【问题标题】：How to display Javascript/Jquery value in HTML page? VideoJs Display durration of the video如何在 HTML 页面中显示 Javascript/Jquery 值？ VideoJs 显示视频时长
【发布时间】：2013-11-11 20:18:53
【问题描述】：

您好，我目前正在开发 HTML5 Jquery 视频播放器。在这里您可以获得有关此 HTML 视频播放器的更多信息：http://www.videojs.com/docs/api/

从这个链接您可以看到myPlayer.duration() 是必须以秒为单位显示视频时长的功能。就是这样，我只想在简单的 HTML 页面中显示这个值，就像我正在尝试使用我的代码一样。

这是我的代码：

 <head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
  <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">
        var myPlayer = _V_("vemvo-player");
    _V_("vemvo-player").ready(function(){
        var howLongIsThis = myPlayer.duration();
        $('#duration').html('Duration: ' + howLongIsThis);
    });
</script>

此代码的问题在于，当视频持续时间远非 0 时，它会显示 Duration: 0。

我的视频播放器工作正常，并且可以正确显示视频的时长。我的问题是如何在 HTML 页面值中显示此持续时间？

当我将var myPlayer = _V_("vemvo-player"); 发布到_V_("vemvo-player").ready(function(){ 函数中并尝试在控制台中运行myPlayer.duration() 时，使用上面的代码，它给了我未定义变量的错误，但是当var myPlayer = _V_("vemvo-player"); 在函数之外时，就像它在我的帖子，然后我在控制台中输入myPlayer.duration()，它会在几秒钟内为我提供所需的持续时间。

问题是我可以在 HTML 页面中将此变量显示为数字。我只想在 HTML 页面中显示这个数字。

我的代码中的错误在哪里，我该如何解决？

提前致谢！

【问题讨论】：

听起来您实际上是在问如何在视频加载后再次运行该代码。
我不知道是否需要显示持续时间？我如何显示该持续时间？
类似问题：stackoverflow.com/questions/2221029/…您可能还没有元数据，因此该函数将始终为 0。注意：接受的答案下方的答案可能就是您想要的。
那么我必须对我的代码进行哪些更改才能使其工作以及它的外观如何？
精确复制How to print one specific Javascript variable in HTML?

标签： javascript jquery html

【解决方案1】：

<script type="text/javascript">
var myPlayer = _V_("vemvo-player");
_V_("vemvo-player").ready(function(){
   // Any ready/init code you want here
   $('#duration').html('Duration: ');        
});
myPlayer.addEventListener('loadedmetadata', function() {
    $('#duration').html('Duration: ' + myPlayer.duration);
});
</script>

Source

【讨论】：

我怎样才能使整个脚本工作，以便显示持续时间？
我已替换为您更新的代码，但仍然无法正常工作。现在它甚至没有显示Duration: 文本。
谢谢你的朋友，但它仍然无法正常工作。现在结果只有Duration: 并且在它之后不显示任何值..
您应该能够让它与addEventListener 一起使用它可能需要一些工作，因为我没有您无法调试的代码库。祝你好运
答案中的代码是为名为@987654327@ 的事件“侦听”myPlayer，获取myPlayer.duration 值，然后将数字放入HTML。

【解决方案2】：

您是否尝试过将变量声明保留在函数外部，而将赋值保留在内部？

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

【讨论】：

它仍然显示：Duration: 0