html5 returns the duration attribute of the current audio/video in seconds-H5 Tutorial-php.cn

Home

Web Front-end

H5 Tutorial

html5 returns the duration attribute of the current audio/video in seconds

黄舟

Nov 08, 2017 pm 01:57 PM

实例

获得当前视频的长度：

myVid=document.getElementById("video1");
alert(myVid.duration);

定义和用法

duration 属性返回当前音频/视频的长度，以秒计。

如果未设置音频/视频，则返回 NaN (Not-a-Number)。

浏览器支持

所有主流浏览器都支持 duration 属性。

注释：Internet Explorer 8 或更早的浏览器不支持该属性。

语法

audio|video.duration

技术细节

返回值	数字值，表示音频/视频的长度，以秒计。

根据JavaScript高级程序设计中P489页的程序，我写了以下程序

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
</head>
<body>
<p class="mediaplayer">
<p class="video">
<video  id="player" poster="E:\1.jpg" width="300" height="200"  src="太阳E15.mp4"> 
Video player is not available.
</video>
</p>
<p class="controls">
<input type="button" value="Play" id="video-btn">
<span id="curtime">0</span>/<span id="duration">0</span>
</p>
</p>
<script type="text/javascript">
window.onload=function(){
var oPlayer=document.getElementById(&#39;player&#39;);
var oBtn=document.getElementById("video-btn");
var oCurtime=document.getElementById(&#39;curtime&#39;);
var oDuration=document.getElementById(&#39;duration&#39;);
oDuration.innerHTML=oPlayer.duration;
oBtn.onclick=function(){
if(oPlayer.paused){
oPlayer.play();
oBtn.value="Pause";
}else{
oPlayer.pause();
oBtn.value="Play";
}
};
setInterval(function(){
oCurtime.innerHTML=oPlayer.currentTime;
},250);
};
</script>
</body>
</html>

由于IE8及其之前的版本不支持video标签，所以不显示。

但是在IE9,10,11支持的情况下，为什么会显示

并且，使用alert(oPlayer.duration);页面是能够弹出该视频的时间的。

但是为什么oDuration.innerHTML=oPlayer.duration;这句话会显示NaN？

对此，我又尝试了一下代码

var duration1=oPlayer.duration;
alert(duration1);//NaN
alert(oPlayer.duration);//3625.982

由上面的结果，可以看出将oPlayer.duration的值赋给一个变量后这个变量的值是NaN。但是为什么？根据定义oPlayer.duration属性返回的是一个数值，为什么数值赋给一个变量会变成NaN？现在还不懂。

The above is the detailed content of html5 returns the duration attribute of the current audio/video in seconds. For more information, please follow other related articles on the PHP Chinese website!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

H5 Code Structure: Organizing Content for ReadabilityMay 07, 2025 am 12:06 AM

A reasonable H5 code structure allows the page to stand out among a lot of content. 1) Use semantic labels such as, etc. to organize content to make the structure clear. 2) Control the rendering effect of pages on different devices through CSS layout such as Flexbox or Grid. 3) Implement responsive design to ensure that the page adapts to different screen sizes.

H5 vs. Older HTML Versions: A ComparisonMay 06, 2025 am 12:09 AM

The main differences between HTML5 (H5) and older versions of HTML include: 1) H5 introduces semantic tags, 2) supports multimedia content, and 3) provides offline storage functions. H5 enhances the functionality and expressiveness of web pages through new tags and APIs, such as and tags, improving user experience and SEO effects, but need to pay attention to compatibility issues.

H5 vs. HTML5: Clarifying the Terminology and RelationshipMay 05, 2025 am 12:02 AM

The difference between H5 and HTML5 is: 1) HTML5 is a web page standard that defines structure and content; 2) H5 is a mobile web application based on HTML5, suitable for rapid development and marketing.

HTML5 Features: The Core of H5May 04, 2025 am 12:05 AM

The core features of HTML5 include semantic tags, multimedia support, form enhancement, offline storage and local storage. 1. Semantic tags such as, improve code readability and SEO effect. 2. Multimedia support simplifies the process of embedding media content through and tags. 3. Form Enhancement introduces new input types and verification properties, simplifying form development. 4. Offline storage and local storage improve web page performance and user experience through ApplicationCache and localStorage.

H5: Exploring the Latest Version of HTMLMay 03, 2025 am 12:14 AM

HTML5isamajorrevisionoftheHTMLstandardthatrevolutionizeswebdevelopmentbyintroducingnewsemanticelementsandcapabilities.1)ItenhancescodereadabilityandSEOwithelementslike,,,and.2)HTML5enablesricher,interactiveexperienceswithoutplugins,allowingdirectembe

Beyond Basics: Advanced Techniques in H5 CodeMay 02, 2025 am 12:03 AM

Advanced tips for H5 include: 1. Use complex graphics to draw, 2. Use WebWorkers to improve performance, 3. Enhance user experience through WebStorage, 4. Implement responsive design, 5. Use WebRTC to achieve real-time communication, 6. Perform performance optimization and best practices. These tips help developers build more dynamic, interactive and efficient web applications.

H5: The Future of Web Content and DesignMay 01, 2025 am 12:12 AM

H5 (HTML5) will improve web content and design through new elements and APIs. 1) H5 enhances semantic tagging and multimedia support. 2) It introduces Canvas and SVG, enriching web design. 3) H5 works by extending HTML functionality through new tags and APIs. 4) Basic usage includes creating graphics using it, and advanced usage involves WebStorageAPI. 5) Developers need to pay attention to browser compatibility and performance optimization.

H5: New Features and Capabilities for Web DevelopmentApr 29, 2025 am 12:07 AM

H5 brings a number of new functions and capabilities, greatly improving the interactivity and development efficiency of web pages. 1. Semantic tags such as enhance SEO. 2. Multimedia support simplifies audio and video playback through and tags. 3. Canvas drawing provides dynamic graphics drawing tools. 4. Local storage simplifies data storage through localStorage and sessionStorage. 5. The geolocation API facilitates the development of location-based services.

See all articles