html5 は現在のオーディオ/ビデオの継続時間属性を秒単位で返します。-H5 チュートリアル-php.cn

html5 は現在のオーディオ/ビデオの継続時間属性を秒単位で返します。

黄舟

リリース： 2017-11-08 13:57:21

オリジナル

4096 人が閲覧しました

实例

获得当前视频的长度：

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

以上がhtml5 は現在のオーディオ/ビデオの継続時間属性を秒単位で返します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

html5 は現在のオーディオ/ビデオの継続時間属性を秒単位で返します。