首页前端开发HTMLhtml5返回当前音频/视频的长度以秒计的属性duration

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

时间2024-01-23 03:56:38发布访客分类HTML浏览659
导读:收集整理的这篇文章主要介绍了html5返回当前音频/视频的长度以秒计的属性duration,觉得挺不错的,现在分享给大家,也给大家做个参考。实例获得当前视频的长度:myVid=document.getElementById("video1"...
收集整理的这篇文章主要介绍了html5返回当前音频/视频的长度以秒计的属性duration,觉得挺不错的,现在分享给大家,也给大家做个参考。

实例

获得当前视频的长度:

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('player');
    var oBtn=document.getElementById("video-btn");
    var oCurtime=document.getElementById('curtime');
    var oDuration=document.getElementById('duration');
    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);
    //NaNalert(oPlayer.duration);
    //3625.982

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

以上就是html5返回当前音频/视频的长度以秒计的属性duration的详细内容,更多请关注其它相关文章!

声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!

上一篇: html5返回音频/视频是否已结束的...下一篇:H5中设置或返回音频/视频的默认播...猜你在找的html5相关文章 关于移动端h5开发相关内容总结2022-05-17html5教程-学表单的第二天2018-12-10html5教程-HTML5浏览器支持2018-12-10html5教程-HTML5智能表单2018-12-10html5教程-微信H5使用resLoader实现加载页效果2018-12-10html5教程-day01-初级-JS0-热身运动JS入门教程2018-12-10html5教程-html5shiv.js和respond.min.js2018-12-10html5教程-不同浏览器对于html5 audio标签和音频格式的兼容性2018-12-10html5教程-使用Html5实现手风琴案例2018-12-10html5教程-html5笔记2018-12-10 其他相关热搜词更多phpjavapython程序员load

若转载请注明出处: html5返回当前音频/视频的长度以秒计的属性duration
本文地址: https://pptw.com/jishu/583739.html
前端必看H5 meta小结 H5与C3的新交互特性有哪些

游客 回复需填写必要信息