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