您的位置：首页 > Web前端 > JavaScript

获取当前视频播放时间

2018-03-08 16:19 381 查看

基于tpshop的视频播放页面修改了写了一点原声js获取时间的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TP二开必看视频教程</title>
<style>

</style>
<script src="./jquery-1.7.2.min.js"></script>
</head>
<body>
<div style="text-align: center;">
<input type="file" id="file" onchange="playMedia(5,10)">第5秒开始-10秒时暂停
<br >
<br >
<button onclick="setCurrentTime(7)" type="button">从第7秒开始播放</button>

<input type="text" id="showTime"/>
<br >
<br >
<video id="video1" controls autoplay width="800" height="520" poster="./public/images/video2.png">
<source src="./TPshop.mp4" type="audio/ogg" />
<source src="./TPshop.mp4" type="audio/webm" />
你的浏览器不支持媒体格式!请直接看目录下的视频文件
</video>
<a href="http://10.1.11.3/edu/public/" id="pay" style="display: none;">支付</a>
</div>
<script>

var myVid=document.getElementById("video1");
myVid.addEventListener("timeupdate",timeupdate);

var _endTime;

//视频播放
function playMedia(startTime,endTime){
//设置结束时间
_endTime = endTime;
var file = document.getElementById("file").files[0];
if(!file){
alert("请指定视频路径");
return false;
}
var url = (window.URL) ? window.URL.createObjectURL(file) : window.webkitURL.createObjectURL(file);
myVid.src = url;
myVid.controls = true;
setTimeout("setCurrentTime('"+startTime+"')",200);
}

//设置视频开始播放事件
function setCurrentTime(startTime){
myVid.currentTime=startTime;
myVid.play();
}

function timeupdate(){
//因为当前的格式是带毫秒的float类型的如：12.231233，所以把他转成String了便于后面分割取秒
var time = myVid.currentTime+"";
if(time>60){
myVid.pause();
$("#video1").hide();
$("#pay").show();
}
document.getElementById("showTime").value=time;
var ts = time.substring(0,time.indexOf("."[/b]));
if(ts==_endTime){
myVid.pause();
}
}

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： js 获取当前播放时间

相关文章推荐

新的分享

章节导航