大佬教程收集整理的这篇文章主要介绍了HTML5 js控制vedio视频和分段播放,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
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; }
利用currentTime来设置或获取当前时间
获取视频当前播放时间:myVid.currentTime
设置视频当前播放时间:myVid.currentTime="10"
3、监听视频播放事件
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>
以上是大佬教程为你收集整理的HTML5 js控制vedio视频和分段播放全部内容,希望文章能够帮你解决HTML5 js控制vedio视频和分段播放所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。