001.xhtml (1307B)
1 <?xml version="1.0" encoding="utf-8"?> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>Video drag and drop</title> 5 <style type="text/css"> 6 canvas 7 {background-color:silver;} 8 </style> 9 <script type="application/ecmascript"> 10 var draggedFrame = 'data:text/plain,FAIL'; 11 function dropIt(event) 12 {document.querySelector('p + p').firstChild.nodeValue = (draggedFrame == event.dataTransfer.getData('text/uri-list'))?'PASS':'FAIL';} 13 function start(event) 14 {event.dataTransfer.effectAllowed = 'copy'; 15 var canvas = document.querySelector('canvas'), 16 c = canvas.getContext('2d'); 17 c.drawImage(document.querySelector('video'),0,0,640,360); 18 draggedFrame = canvas.toDataURL('image/png'); 19 event.dataTransfer.setData('text/uri-list',draggedFrame);} 20 </script> 21 <script src="/common/media.js"></script> 22 </head> 23 <body dropzone="copy string:text/uri-list" ondrop="dropIt(event)"> 24 <p> 25 <video draggable="true" ondragstart="start(event)" controls="true"/> 26 <script> 27 var video = document.querySelector('video'); 28 video.src = getVideoURI('/media/movie_5'); 29 </script> 30 </p> 31 <p>Drag video and drop it somewhere on the page. Dragged frame should be copied to the canvas below and you should see word PASS once you drop video.</p> 32 <p> 33 <canvas width="640" height="360">Canvas</canvas> 34 </p> 35 </body> 36 </html>