html5 video使用，怎样截取正在播放的时间
http://www.w3school.com.cn/tags/html_ref_audio_video_dom.asp
http://blog.1wanweb.com/post/Html5-Video.aspx
<!DOCTYPE html>
<html> <head>
<title>Simple JavaScript Controller</title>
<script src="jquery-1.4.2.min.js"></script>
<script>
function init() {
document.video = document.getElementByIdx_x("video");
webm = document.getElementByIdx_x("webm");
init_events();
// init_properties();
//setInterval(update_properties, 1000);
}
function init_events(){
if(true) { //监听video的各个属性
document.video.addEventListener();
}
}
</script>
<script>
var beginTime="";
var endTime="";
function record(){
Media = document.video = document.getElementByIdx_x("video");
beginTime = Media.currentTime;
$("#label1").html('<a href="javascript:stop();">停止</a>');
alert(beginTime);
}
function stop(){
endTime = Media.currentTime;
alert(endTime);
$("#label1").html('<label>开始记录时间</label><input id="begin" type="text" value='+beginTime+'></input><label value="结束记录时间"/> <label>结束记录时间</label><input id="stop" type="text" value='+endTime+'></input><button type="button" onclick="send()">上传</button>');
}
</script>
function send(){
}
</head>
<body > <div class="video-player" align="center">
<video controls="controls" id="video" >
<source src="movie.ogg" type="video/ogg">
<source src="战争背后.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><div id="label1"> <a href="javascript:record();">记录</a> </div>
<br> </div>
</body>
</html>
<script src="jquery-1.4.2.min.js"></script>
<script>
function init() {
document.video = document.getElementByIdx_x("video");
webm = document.getElementByIdx_x("webm");
init_events();
// init_properties();
//setInterval(update_properties, 1000);
}
function init_events(){
if(true) { //监听video的各个属性
document.video.addEventListener();
}
}
</script>
<script>
var beginTime="";
var endTime="";
function record(){
Media = document.video = document.getElementByIdx_x("video");
beginTime = Media.currentTime;
$("#label1").html('<a href="javascript:stop();">停止</a>');
alert(beginTime);
}
function stop(){
endTime = Media.currentTime;
alert(endTime);
$("#label1").html('<label>开始记录时间</label><input id="begin" type="text" value='+beginTime+'></input><label value="结束记录时间"/> <label>结束记录时间</label><input id="stop" type="text" value='+endTime+'></input><button type="button" onclick="send()">上传</button>');
}
</script>
function send(){
}
</head>
<body > <div class="video-player" align="center">
<video controls="controls" id="video" >
<source src="movie.ogg" type="video/ogg">
<source src="战争背后.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<br><div id="label1"> <a href="javascript:record();">记录</a> </div>
<br> </div>
</body>
</html>
事例2：
<!DOCTYPE html>
<html>
<body>
<button onclick="hasVidEnded()" type="button">该视频播放是否已结束？</button>
<div id="time"></div>
<br />
<br />
<video id="video1" controls="controls">
<source src="/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="/example/html5/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
setInterval(function(){
if(myVid){
document.getElementById("time").innerHTML=myVid.currentTime;
if(myVid.currentTime>3){
myVid.pause();// 3秒后暂停
}
}
},1000);
function hasVidEnded()
{
alert(myVid.ended);
}
</script>
</body>
</html>
<html>
<body>
<button onclick="hasVidEnded()" type="button">该视频播放是否已结束？</button>
<div id="time"></div>
<br />
<br />
<video id="video1" controls="controls">
<source src="/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="/example/html5/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
setInterval(function(){
if(myVid){
document.getElementById("time").innerHTML=myVid.currentTime;
if(myVid.currentTime>3){
myVid.pause();// 3秒后暂停
}
}
},1000);
function hasVidEnded()
{
alert(myVid.ended);
}
</script>
</body>
</html>
示例3：
<!DOCTYPE html><html> <head> <title>Simple JavaScript Controller</title> <script type="text/javascript"> function playPause() { var myVideo = document.getElementsByTagName('video')[0]; if (myVideo.paused) myVideo.play(); else myVideo.pause(); } function makeBig() { var myVideo = document.getElementsByTagName('video')[0]; myVideo.height = (myVideo.videoHeight * 2 ) ; } function makeNormal() { var myVideo = document.getElementsByTagName('video')[0]; myVideo.height = (myVideo.videoHeight) ; } </script> </head> <body> <div class="video-player" align="center"> <video src="myMovie.m4v" poster="poster.jpg" ></video> <br> <a href="javascript:playPause();">Play/Pause</a> <br> <a href="javascript:makeBig();">2x Size</a> | <a href="javascript:makeNormal();">1x Size</a> <br> </div> </body></html>相关推荐
WebVincent 2020-06-06
行吟阁 2020-04-10
ShoppingChen 2020-06-25
爱好HtmlCssJs 2020-01-18
冰蝶 2020-01-08
Jym 2012-07-05
tumobi 2016-12-08
一点一刻 2013-09-17
HandsomeHong 2010-08-13
Charliewolf 2019-11-10
WenFY的CSDN 2019-10-24
89510194 2019-10-22
nercon 2019-10-20
行吟阁 2019-10-22
zhangli 2014-11-12