HTML5 vedio常用的js操作
1、选择本地资源播放视频
html:
<input type="file" id="file" onchange="setMediaFile()"> <video id="video1" autoplay="autoplay" controls="none" ></video>
js:
var myVid=document.getElementById("video1"); function setMediaFile() { var file = document.getElementById('file').files[0]; if(!file){ alert("Please upload file."); return false; } var url = (window.URL) ? window.URL.createObjectURL(file) : window.webkitURL.createObjectURL(file); document.getElementById("video1").src = url; }
2、设置,和获取当前视频播放的时间
利用currentTime来设置或获取当前时间
获取视频当前播放时间:myVid.currentTime
设置视频当前播放时间:myVid.currentTime="10"
3、监听视频播放事件
给视频添加timeupdate事件
myVid.addEventListener("timeupdate",timeupdate); function timeupdate(){ //do something... }
4、综合事例
选择视频,指定设置视频播放开始时间,和结束时间,即分段播放视频
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>tttt</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <meta charset="utf-8"> </head> <body> <div class="container"> <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" autoplay="autoplay" controls > </video> </div> </body> <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+""; document.getElementById("showTime").value=time; var ts = time.substring(0,time.indexOf(".")); if(ts==_endTime){ myVid.pause(); } } </script> </html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。