Home/ Questions/Q 9088803
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T21:59:11+00:00

I have got my video & its playing fine, but now i need to

  • 0

I have got my video & its playing fine, but now i need to add a logo on my video tag at right bottom corner(the coordinates(2,2,60,60) icon size is 60*60),
I thought of using canvas, but came up some thing like this..

<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>

any help to get it..

thanks in advance

shameer ali shaik

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You could simply use a div as loxxy said in a comment, but if you really want to use canvas for some reason here is a jsfiddle with your code (fixed) :

    http://jsfiddle.net/aS9VG/

    The trick is to set the element to an absolute position so it can overlap another element :

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