怎样用js+html5实现视频的播放控制

html5 代码：

 

<video width="640" height="480" controls="controls" id="video" controls preload='none'  poster="http://v.zol.com.cn/xxxx.mp4">

js代码：

 

document.addEventListener("DOMContentLoaded", init, false);

function init() {

    document._video = document.getElementById("video");

    webm = document.getElementById("webm");

    init_events();

    init_properties();

    setInterval(update_properties, 1000);

}

Function init_events(){

for (key in media_events) { //监听video的各个属性

    document._video.addEventListener(key, capture, false);

    }

}

Video 具有的属性：

var media_properties = [ "error", "src", "currentSrc", "networkState", "preload", "buffered", "readyState", "seeking", "currentTime","initialTime", "duration", "startOffsetTime", "paused", "defaultPlaybackRate", "playbackRate", "played", "seekable", "ended", "autoplay", "loop","controls", "volume", "muted" ];

用js控制和获取video的值方法：

设置当前播放的时间：setAttribute(media_properties[currentTime],’123’);

eval("document._video." + media_properties[currentTime]);

取视频时长：var r = eval("document._video." + media_properties[duration]);

Alert(r);

控制其他的属性可以用同样的方法。

 

本文转自：http://techbbs.zol.com.cn/1/9_3193.html