在画布上播放视频

2017-07-03 19:10:00
admin
原创
444
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>在画布上显示视频运行效果</title>
<style type="text/css">
   #pix{
   display:none;
   }
</style>
<script type="text/javascript">
//在页面加载时,调用eventWindowLoaded方法
window.addEventListener('load', eventWindowLoaded, false);
var oVideo;        //保存video对象实例的全局变量
var ovDiv;         //保存div元素的全局变量
function eventWindowLoaded() {
   oVideo = document.createElement("video");     //动态创建video元素
   ovDiv = document.createElement('div');        //动态创建div元素
   document.body.appendChild(ovDiv);             //将div元素添加到页面中
   ovDiv.appendChild(oVideo);                    //将video元素添加到div元素中
   ovDiv.setAttribute("style", "display:none;"); //指定div元素的样式为隐藏显示。
   var videoType = supportedVideoFormat(oVideo); //判断当前浏览器是否支持音频格式  
   if (videoType == "") {
  alert("不支持的视频格式");
  return;
   }  
   oVideo.setAttribute("src", "http://code.ybao.org/m/Move1.ogg");      //设置音频文件源
   oVideo.loop=true;                             //指定视频循环
   //canplaythrough当浏览器可在不因缓冲而停顿的情况下进行播放时触发,也就是可正常播放之后触发
   oVideo.addEventListener("canplaythrough",videoLoaded,false);
}
//判断当前浏览器支持播放的MIME类型
function supportedVideoFormat(video) {
   var returnExtension = "";
   //canPlayType会返回probably或maybe表示可以播放,则返回播放扩展名
   if (video.canPlayType("video/webm") =="probably" || 
       video.canPlayType("video/webm") == "maybe") {
         returnExtension = "webm";
   } else if(video.canPlayType("video/mp4") == "probably" || 
       video.canPlayType("video/mp4") == "maybe") {
         returnExtension = "mp4";
   } else if(video.canPlayType("video/ogg") =="probably" || 
       video.canPlayType("video/ogg") == "maybe") {
         returnExtension = "ogg";
   }
   return returnExtension;                    //返回播放的扩展名
}

//判断当前浏览器是否支持画布
function canvasSupport () {
     var theCanvas = document.getElementById("canvasOne"); 
     if ((!theCanvas || !theCanvas.getContext)){
 return true;
 }
 else{
 return false;
 } 
}
function videoLoaded(event) { 
   canvasApp();
}
function canvasApp() {

  	 function  drawVideo() {
  		  var image = document.getElementById("pix");           //获取图像对象实例
  var pattern = context.createPattern(image, "repeat"); //创建图案填充效果
  context.fillStyle = pattern;                           //将图案对象赋给fillStyle以备填充
  context.fillRect(0,0,theCanvas.width,theCanvas.height);//使用矩形填充画布		  
  context.strokeStyle = '#000000';                       //绘制图像的外边框
  context.lineWidth=10;
  context.strokeRect(5,5,theCanvas.width-10,theCanvas.height-10);
  context.drawImage(oVideo , 85, 30);                   //将视频对象绘制到画布上
  context.font = "18px 黑体, sans-serif" 
  context.fillStyle="blue";  
  context.fillText("小屁孩喜欢看的视频",100,50);  	    //在视频上绘制文本	  
   }
   var theCanvas = document.getElementById("canvasOne");
   var context = theCanvas.getContext("2d");
   oVideo.play();                                               //开始播放视频    
   setInterval(drawVideo, 33);                                  //周期性的第33毫秒重绘一次
}
</script>
</head>
<body>
<canvas id="canvasOne" width="500" height="300">
 当前浏览器不支持HTML 5 画布
</canvas>
    <div>
     <!--该图像用来作来画布的背景图案-->
    <img id="pix" src="http://code.ybao.org/ybao_logo.png" />   
    </div>
</body>
</html>
				
				

文章分类
联系我们
电话: 18902328227
Email: 2689701946@qq.com
QQ: 2689701946
微信: 18902328227
地址: 广州番禺区繁华路
  • 在线客服
  • 关注微信
  • 联系电话
    • 欢迎咨询
    • 欢迎加入QQ群 303257430
  • 公众号:源宝网络
    • 联系电话及微信号 18902328227