Video&Audio（实例篇）

最新推荐文章于 2021-06-29 15:04:37 发布

 ;

最新推荐文章于 2021-06-29 15:04:37 发布

阅读量716

点赞数

分类专栏： HTML5 文章标签： audio&amp;video HTML5

本文链接：https://blog.csdn.net/weixin_42210229/article/details/86707343

版权

HTML5 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1、在Canvas上绘制视频影像

首先，实现在Canvas上实时传送并显示视频的功能。画面上分别拥有播放视频的video标签以及canvas标签，并赋值ID。根据视频的高度和宽度适当的进行缩小放大绘制在canvas。

第一种方法使用setTimeout()或者setInterval()来实现，第二种方法使用drawImage()方法在canvas中进行视频影像绘制，但是在Firefox3.6之前的版本效果不佳。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>在Canvas上绘制视频图像</title>
<style type="text/css">
	h1{
		background-color: hsla(0,0%,0%,0.50);
		position: relative;
		left: 0px;
		top:0px;
		text-align: center;
		width: 1330px;
		padding: 15px 0px;
	}
	#monitor{
		position: relative;
		left: 0px;
		top: 0px;
		background-color:aquamarine;
		text-align: center;
		padding: 10px;
	}
</style>
<script type="text/javascript">
	window.addEventListener("load",function(){
		var fps=1000/30;//1/30秒
		var videoObj=document.getElementById("myVideo");
		var canvasObj=document.getElementById("myCanvas");
		var btn=document.getElementById("btn");
		//第一种方法，建议
		setInterval(function(){
			//绘制
			canvasObj.getContext("2d").save();
			canvasObj.getContext("2d").scale(1/2,1/2);
			canvasObj.getContext("2d").drawImage(videoObj,0,0);
			canvasObj.getContext("2d").restore();
		},fps);
		//第二种方法，不建议
		/*
		videoObj.addEventListener("timeupdate",function(){
			canvasObj.getContext("2d").drawImage(videoObj,0,0);
		},true);
		*/
	},true);
	
</script>
</head>

<body>
<h1>HTML5 实时视频效果</h1>
<div id="monitor">
	<video id="myVideo" controls autobuffer loop width="640" height="360">
		<source src="../../source/白安 - 让我逃离平庸的生活_d00299x3pgx_3_0 [mqms].mp4">
		<p>请在支持video的浏览器中浏览</p>
	</video>
	<canvas id="myCanvas" width="640" height="360"></canvas>
</div>
</body>
</html>

此例子中的视频资源是1280*720的宽比，放大二分之一。canvas是640*360的宽比。

2、制作可变速视频播放器

本案例使用滑块来进行播放速度调节。向右移动降低速度，向右移动增加速度。播放速度的调整随滑块的移动进行实时调整。在该案例中使用jQuery库的UI滑块。

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>制作可变速视频播放器</title>
<link rel="stylesheet" href="../../../jqueryui/jquery-ui-1.12.1/jquery-ui.css" type="text/css" media="all">
<style type="text/css">
	#ctrl div{
		width: 100px;
		height: 20px;
		text-align: center;
		color: white;
		background-color: aqua;
		font-weight: 800;
		font-size: 16px;
		padding:5px 0px;
		border: 1px solid aqua;
		margin: 1px 0px;
	}
	#ctime{
		font-size: 12px!important;
	}
	#slider{
		width:200px!important;
		background-color: lightgray!important;
	}
</style>
<script type="text/javascript" src="../../../jqueryui/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
<script type="text/javascript" src="../../../jqueryui/jquery-ui-1.12.1/jquery-ui.js"></script>
<script type="text/javascript">	
	window.addEventListener("load",function(){
		//时间设置
		var videoObj=document.getElementById("myVideo");
		var crtTime=document.getElementById("ctime");
		var pButton=document.getElementById("playButton");
		var rewButton=document.getElementById("rewindButton");
		//设置播放按钮的事件
		pButton.addEventListener("click",function(){
			if(videoObj.paused==true){
				videoObj.play();//播放
			}else{
				videoObj.pause();
			}
		},true);
		//播放结束时触发的事件
		videoObj.addEventListener("ended",function(){
			videoObj.currentTime=0;
			videoObj.pause();
		},true);
		//显示播放时间
		videoObj.addEventListener("timeupdate",function(){
			document.getElementById("ctime").innerHTML="播放时间:"+parseInt(videoObj.currentTime)+"/"+parseInt(videoObj.duration)+"秒";
		},true);
		//设置回退按钮的事件
		rewButton.addEventListener("click",function(){
			videoObj.currentTime=0;
		},true);
		//设置速度滑块
		$("#slider").slider({
			max:4,//滑块的最大值
			min:0,//滑块的最小值
			step:0.05,//滑块的间隔
			value:1,//滑块初始值
			change:function(evt,ui){
				//根据滑块值设置播放速度
				videoObj.playbackRate=ui.value;
				//根据滑块的默认值设置播放速度
				videoObj.defaultPlaybackRate=ui.value;
				document.getElementById("speed").innerHTML=ui.value+"倍速";
			}
		})
	})
</script>
</head>

<body>
<div id="viewArea">
	<video id="myVideo" width="540" height="360" autoplay controls>
		<source src="../../source/白安 - 让我逃离平庸的生活_d00299x3pgx_3_0 [mqms].mp4">
	</video>
</div>
<div id="ctrl">
	<div id="rewindButton">㉧</div>
	<div id="playButton">||</div>
	<div id="ctime">播放时间：0/0秒</div>
	<div id="speed">1倍速</div>
	<div id="slider"></div>
</div>
</body>
</html>

效果：

 ;

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Video&Audio（实例篇）

1、在Canvas上绘制视频影像首先，实现在Canvas上实时传送并显示视频的功能。画面上分别拥有播放视频的video标签以及canvas标签，并赋值ID。根据视频的高度和宽度适当的进行缩小放大绘制在canvas。第一种方法使用setTimeout()或者setInterval()来实现，第二种方法使用drawImage()方法在canvas中进行视频影像绘制，但是在Firefox3.6之...
复制链接

扫一扫

专栏目录