suchen

Heim >Web-Frontend >H5-Tutorial >html5 gibt das Dauerattribut des aktuellen Audios/Videos in Sekunden zurück

html5 gibt das Dauerattribut des aktuellen Audios/Videos in Sekunden zurück

黄舟
黄舟Original
2017-11-08 13:57:214181Durchsuche

实例

获得当前视频的长度：

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？现在还不懂。


Das obige ist der detaillierte Inhalt vonhtml5 gibt das Dauerattribut des aktuellen Audios/Videos in Sekunden zurück. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Das Attribut defaultPlaybackRate, das die Standardwiedergabegeschwindigkeit von Audio/Video in H5 festlegt oder zurückgibtNächster Artikel：Das Attribut defaultPlaybackRate, das die Standardwiedergabegeschwindigkeit von Audio/Video in H5 festlegt oder zurückgibt

In Verbindung stehende Artikel

Mehr sehen