Question

我有我的视频＆amp;它打得很好，但现在我需要在我的视频标签右下角添加一个标志（坐标（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>

获得它的任何帮助..

提前致谢

shameer ali shaik

Answer 1

你可以简单地在评论中使用div作为loxxy，但是如果你真的想因为某种原因想使用画布，那么你的代码就是jsfiddle（已修复）：

http://jsfiddle.net/aS9VG/

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

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

使用canvas进行HTML5视频和图像集成？

1 个答案: