当前位置: 首页 > 面试题库 >

分别从文件中检索HTML5视频时长

陶英纵
2023-03-14
问题内容

我正在构建具有自定义界面的HTML5视频播放器,但是在显示视频时长信息时遇到一些问题。

我的HTML很简单:

<video id="video" poster="image.jpg" controls>     
    <source src="video_path.mp4" type="video/mp4" />
    <source src="video_path.ogv" type="video/ogg" /> 
</video>
<ul class="controls"> 
<li class="time"><p><span id="timer">0</span> of <span id="duration">0</span></p></li>  
</ul>

我用来获取和插入持续时间的javascript

var duration = $('#duration').get(0);
var vid_duration = Math.round(video.duration);
duration.firstChild.nodeValue = vid_duration;

问题是什么也没有发生。我知道视频文件包含持续时间数据,因为如果我仅使用默认控件,则显示正常。

但是真正奇怪的是,如果我像这样在我的代码中放置alert(duration)

alert(duration);
var vid_duration = Math.round(video.duration);
duration.firstChild.nodeValue = vid_duration;

那么它就可以正常工作(减去弹出的烦人警报)。任何想法在这里发生了什么或我如何解决?

更新:好的,虽然我还没有完全解决这个问题,但是我确实找到了解决我最大问题的解决方法……用户体验。

首先,只有在观众按下播放按钮后,视频才开始加载,因此我假设无法获取持续时间信息(我不知道如何解决此特定问题……尽管我认为这将涉及仅将视频元数据与视频分开加载,但我什至不知道是否可行)。

因此,为了避免没有持续时间数据的事实,我决定完全隐藏持续时间信息(实际上是整个控件),直到您点击播放。

就是说,如果有人知道如何将视频元数据与视频文件分开加载,请共享。我认为应该完全解决这个问题。


问题答案:

问题出在WebKit浏览器中。视频元数据在视频之后加载,因此当JS运行时不可用。您需要查询readyState属性;它具有从0到4的一系列值,让您知道视频处于什么状态;加载元数据后,您将获得1的值。

因此,您需要执行以下操作:

window.setInterval(function(t){
  if (video.readyState > 0) {
    var duration = $('#duration').get(0);
    var vid_duration = Math.round(video.duration);
    duration.firstChild.nodeValue = vid_duration;
    clearInterval(t);
  }
},500);

我没有测试过该代码,但是它(或类似的东西)应该可以工作。



 类似资料:
  • 问题内容: 您如何检测HTML5 元素何时播放完毕? 问题答案: 您可以添加带有“ end”作为第一个参数的事件监听器 像这样 :

  • 问题内容: 我正在做一个使用HTML和Javascript的项目,它将与本地文件一起在本地运行。我需要通过输入选择一个文件,获取文件信息,然后决定是否将其添加到列表中并进行复制。如果我决定使用它,则必须将其放在队列中以备后用。否则,我将丢弃并选择另一个文件。 我面临的问题是我无法找到一种仅通过在输入中选择视频持续时间来获得视频持续时间的方法。 我进行了很多搜索,但没有找到任何方法来获取持续时间。在

  • function checkVideo() { if(!!document.createElement('video').canPlayType) { var vidTest=document.createElement("video"); oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"'); if (!oggTest

  • 我想从给定的输入视频文件中拆分和。在网上冲浪后,我了解到使用是可能的。我打算在中实现上述功能。在ffmpeg中有很多构建过程,所以我更喜欢或任何其他可用的包。请任何人指导我如何使用或任何其他可用的框架来实现这些概念。 给定的输入视频文件(包含音频和视频) 预期的输出视频文件(只包含视频而不包含音频)

  • 我在网上做了一些搜索,但无法找到一种方法来检索关于视频中使用的一段音乐(不是音乐视频)的信息,使用youtube API。 例如,在这段视频或这段视频的描述中,有一个关于“这段视频中的音乐”的单独部分,在那里可以找到关于歌曲标题、艺术家、专辑、许可证等信息。 我想做的是使用youtube API检索这些信息。不幸的是,到目前为止,我还没有任何成功地发现这条信息使用youtube API。返回的元数

  • 使用Camtasia创建的视频可以通过导出TechSmith智能播放器的项目在网络上共享。该视频以“H264-MPEG-4 AVC(part10)(avc1)”编解码器导出,导出还包括TechSmith智能播放器使用的其他自定义XML、JavaScript和SWF文件。 这些自定义文件也会“烧录”到视频中。例如,在文本编辑器中打开MP4视频时,可以查看XML文件的内容。这允许其他服务在上传Camt