{"id":56674,"date":"2022-08-21T03:01:54","date_gmt":"2022-08-20T17:01:54","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=56674"},"modified":"2022-08-20T22:00:35","modified_gmt":"2022-08-20T12:00:35","slug":"video-file-browse-preview-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/video-file-browse-preview-tutorial\/","title":{"rendered":"Video File Browse Preview Tutorial"},"content":{"rendered":"
\"Video<\/a>

Video File Browse Preview Tutorial<\/p><\/div>\n

The canvas<\/a> element introduced with HTML5 resulted in great new graphical data manipulation possibilities. The canvas method “drawImage”<\/a> …<\/p>\n

\nThe drawImage() method draws an image, canvas, or video onto the canvas.
\n
\nThe drawImage() method can also draw parts of an image, and\/or increase\/reduce the image size.\n<\/p><\/blockquote>\n

… is a case in point. The implication of the first parameter accepting a “video” element means that we can just use client Javascript means to use a canvas element as the conduit for determining a video’s first (image) frame. And once in “image land” any number of other ways to display that “first frame” are available via the data-uri available via the canvas method “toDataURL”<\/a> …<\/p>\n

\nThe HTMLCanvasElement.toDataURL() method returns a data URL containing a representation of the image in the format specified by the type parameter.\n<\/p><\/blockquote>\n

That is all fine in theory, but writing a “proof of concept” usage of this canvas talent, we turned to two very useful links …<\/p>\n

    \n
  • https:\/\/jsfiddle.net\/p42867ys\/<\/a> … and …<\/li>\n
  • javascript – HTML5 Canvas drawImage from video not showing on first draw – Stack Overflow<\/a><\/li>\n<\/ul>\n

    … thanks … helping us piece together our “proof of concept” video_browse_preview.html<\/a> Video File Browse Preview<\/a> web application …<\/p>\n