html5中关于音频与视频监听器应用的示例详解-木庄网络博客

本文摘自PHP中文网，作者黄舟，侵删。

一介绍

1、<audio>和<video>元素有不少监听事件，因此可以绑定这些事件的监听器。

2、本应用实现<video>的ontimeupdate事件的监听器。

3、通过ontimeupdate事件绑定监听器可以实时监控音频、视频的播放位置。

二代码

<!DOCTYPE html>
<html>
<head>
    <meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
    <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
    <title> 视频播放 </title>
</head>
<body>
<h2> 视频播放 </h2>
<video id="mv" src="movie.webm" loop>
您的浏览器不支持video元素
</video><br/>
<input id="bn" type="button" value="播放"/><span id="detail"></span>秒
<script type="text/javascript">
    var bn = document.getElementById("bn");
    var mv = document.getElementById("mv");
    var detail = document.getElementById("detail");
    // 为video元素的ontimeupdate事件绑定监听器
    mv.ontimeupdate = function()
    {
        detail.innerHTML = mv.currentTime + "/" 
            + mv.duration;
    };
    bn.onclick = function()
    {
        if(mv.paused)
        {
            mv.play();
            bn.value = "暂停";
        }
        else
        {
            mv.pause();
            bn.value = "播放";
        }
    }
</script>
</body>
</html>