使用画布进行 HTML5 视频和图像集成？答案

【问题标题】：HTML5 video and image integration using canvas?使用画布进行 HTML5 视频和图像集成？
【发布时间】：2012-12-12 14:19:59
【问题描述】：

我的视频播放正常，但现在我需要在右下角的视频标签上添加一个徽标（坐标（2,2,60,60）图标大小为 60*60），我想用画布，但想出了这样的东西..

<html>
<head>
<title>testpage</title>
<script type="text/javascript">
window.addEventListener('load', function () {
var element = document.getElementById('myCanvas');
if (!element || !element.getContext) {
  return;
}

  var context = element.getContext('2d');
  if (!context || !context.drawImage) {
  return;
}

var google_img = new Image();
google_img.addEventListener('load', function () {
   context.drawImage(this, 2, 2, 60, 60);
},false);
google_img.src = "logo.png";

},false);
</script>
</head>
<body>
<div align="center" style="padding-top:25px;">
<video src="Simplevideo.mp4"  width="610" height="380" type="video/mp4" controls="controls"><p>Your browser does not support the video.</p></video> 
<canvas id="myCanvas" width="62" height="62">Your browser does not support HTML5 Canvas element.</canvas>
</div>
</body>
</html>

任何帮助获得它..

提前致谢

阿里沙克

【问题讨论】：

为什么要画布？将包含图像的 div 放在...
我需要 Image(icon) 作为视频播放器上的标志，它应该放在视频播放器的底角...任何示例代码都将是 gud..
目前有什么问题？

标签： html html5-canvas html5-video

【解决方案1】：

您可以像 loxxy 在评论中所说的那样简单地使用 div，但是如果您出于某种原因真的想使用画布，这里有一个带有您的代码的 jsfiddle（已修复）：

http://jsfiddle.net/aS9VG/

诀窍是将元素设置为绝对位置，以便它可以与另一个元素重叠：

style="position:absolute;right:150px;bottom:300px"

【讨论】：