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"> 6canvas 7 {background-color:silver;} 8</style> 9<script type="application/ecmascript"> 10var draggedFrame = 'data:text/plain,FAIL'; 11function dropIt(event) 12 {document.querySelector('p + p').firstChild.nodeValue = (draggedFrame == event.dataTransfer.getData('text/uri-list'))?'PASS':'FAIL';} 13function 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> 37