使用canvas的HTML5視頻和圖像集成？

我有我的視頻&其播放良好，但現在我需要在我的視頻標籤上右下角添加一個徽標（座標（2,2,60,60）圖標大小爲60 * 60），我想到了用帆布，但想出了一些像這樣的事情..使用canvas的HTML5視頻和圖像集成？

<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阿里shaik

來源

2012-12-27 Shameer Ali Shaik

爲什麼畫布在所有？將包含圖像的div放在... – loxxy

我需要圖像（圖標）作爲視頻播放器上的徽標，並且它應該放置在視頻播放器的底部角落...任何示例代碼都將成爲gud .. –

目前什麼不起作用？ – robertc

你可以簡單地使用一個div作爲loxxy在評論說，但如果你真的想用畫布這裏有些原因是與你的代碼的jsfiddle（固定）：

http://jsfiddle.net/aS9VG/

訣竅是元素設置爲絕對所以它可以重疊另一個元素：

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

來源

2012-12-27 13:21:26 jazzytomato

使用canvas的HTML5視頻和圖像集成？

回答

相關問題