HTML5 js控制vedio视频和分段播放

最新推荐文章于 2023-05-30 13:02:55 发布

五只鸭子

最新推荐文章于 2023-05-30 13:02:55 发布

阅读量3w

点赞数 8

分类专栏： web前端文章标签： html5 video 视频分段

本文链接：https://blog.csdn.net/tuposky/article/details/41488403

版权

web前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

HTML5 vedio常用的js操作

1、选择本地资源播放视频

html:

<input type="file" id="file" οnchange="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" οnchange="playMedia(5,10)">第5秒开始-10秒时暂停
		<br >
		<br >
		<button οnclick="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>