JavaScript控制 audio和vedio相关API注意点

1) 直接调用duration导致返回NaN问题

由于浏览器在加载音视频媒体资源时是通过异步加载的，所以当调用duration属性此时资源文件还未加载，所以会返回NaN值。

如下代码

<button onclick="getVidDur()" type="button">获得视频的长度</button>
<br />
<br />
<audio id="audio" controls="controls">
    <source src="media/xy.mp3" type="audio/mp3">
</audio>
<script>
    console.log(document.getElementById("audio").duration);
</script>

此时返回值便会为NaN

解决办法:

<button onclick="getVidDur()" type="button">获得视频的长度</button>
<br />
<br />
<audio id="audio" controls="controls">
    <source src="media/xy.mp3" type="audio/mp3">
</audio>
<script>
    // 通过audio或vedio对象的canplay事件
    document.getElementById("audio").oncanplay = function(){
        console.log(this.duration);
    }
</script>

此时会正常返回媒体文件的播放总秒数(注意是以单位秒计)。

原理: 当浏览器异步加载资源完毕后会触发canplay事件，由于此时媒体文件以及准备完毕，所以就能获取到资源文件的播放长度。

2) 设置currentTime无效(本地)

由于本地流媒体文件属于磁盘读取，由于并没有通过网络进行传输。猜测浏览器读取本地资源文件类似于某种缓存机制。通过IDEA自带的静态资源服务器由于并没有携带文件内容类型标识，所以也无法对相关的本地文件进行特定的读取。

如下代码:

<br />
<br />
<audio id="audio" controls="controls">
    <source src="media/xy.mp3" type="audio/mp3">
</audio>
<button>播放</button>
<script>
    var audio = document.getElementById("audio");
    audio.currentTime = 200;
    // 通过audio或vedio对象的canplay事件
    document.getElementsByTagName("button")[0].onclick = function(){
        audio.play();
    }
</script>

此时无法对文件进行指定位置播放