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>
效果: