获取当前视频播放时间
2018-03-08 16:22
525 查看
基于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>视频播放测试</title> <style> </style> <script src="./jquery-1.7.2.min.js"></script> </head> <body> <div style="text-align: center;"> <h3>视频播放测试</h3> <h3>百度下载地址 <a href="http://pan.baidu.com/s/1gfsqd7H" target="_blank">http://pan.baidu.com/s/1gfsqd7H</a></h3> <h3>在线观看地址 <a href="http://www.kancloud.cn/tpshop/thinkphp5/272876" target="_blank">http://www.kancloud.cn/tpshop/thinkphp5/272876</a></h3> <h3>数据表结构分析地址 <a href="http://www.kancloud.cn/tpshop/thinkphp5/221597" target="_blank">http://www.kancloud.cn/tpshop/thinkphp5/221597</a></h3> <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(".")); if(ts==_endTime){ myVid.pause(); } } </script> </body> </html>
相关文章推荐
- 页面里嵌入播放器,并获取当前视频的播放总时间
- iOS-获取视频长度和当前播放时间
- 【求助】winfrom怎么获取视频当前播放时间
- iOS-获取视频长度和当前播放时间
- 获取当前视频播放时间
- 几种获取音视频播放时间长度的方法( shell32, WMP, ffmpeg )
- Android 播放视频并获取指定时间的帧画面
- JSP中的几个实用函数(时间判断/IP获取/累计次数/视频播放等)
- 获取网上流视频总时长和当前播放时长
- 获取音乐当前播放时间和总时长
- IOS MPMoviePlayerViewController 获取当前音频文件播放时间点
- VideoView 获取当前播放时间
- C#获取视频文件的播放时间
- 利用JS怎么获取JW player播放停止或者是当前播放时间
- C++获取flv视频文件的播放时间
- H5 video 标签 播放事件 视频加载完成事件 获取视频播放进度时间
- php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
- 获取视频的进度,播放时间以及总长,并用进度条表示
- 获取当前播放Animator的动画时间
- 获取视频停止播放时已经播放的时间