1 Local video screenshot (CANVSA)
<! DOCTYPE html>
2 cross-domain video screenshot
Note: Add crossorigin= "*" to the video tag
<! DOCTYPE html>crossorigin= "*"AutoPlay width= "720" height= "><source"src= "Http://jq22com.qiniudn.com/jq22-sp.mp4" /></video> </div> <div class= "Img_show_wrap" > <canvas width= "720" Height = "Id=" "V2i_canvas" ></canvas> </div> <SCR IPT src= "Js/jquery-1.11.3.min.js" type= "Text/javascript" ></script> <script type= "Text/javascript" src= " Js/flv.js "></script> <script type=" Text/javascript "> $ (function () {var my SRC = ""; function Htmltoimage () {var canvas = document.getElementById ("V2i_canvas"); if (!canvas.getcontext) {alert ("Your browser temporarily does not support canvas"); return false; } else {var context = Canvas.getcontext ("2d"); var video = document.getElementById ("Video_el"); Context.drawimage (video, 0, 0, canvas.width, canvas.height); return MYSRC = Canvas.todataurl ("Image/png"); }} $ ("#screen_shot_btn"). Click (Function (event) {htmltoimage (); $ ("#image_el"). attr ("src", mysrc); }); $ ("#screen_save_btn"). Click (function () {htmltoimage (); if ($ ("#image_el"). attr ("src") = "" ") {DownloadFile (MYSRC); } else {alert ("content is empty"); }}) function DownloadFile (src) {var triggerdownload = $ ("#screen_save_b TN "). attr (" href ", src). attr (" Download "," Jietu.png "); }}) </script></body>
3 flv.js Realization Video Stream screenshot
<! DOCTYPE html>crossorigin= "*"Width= "720" height= "></video>" </div> <div class= "Img_show_wrap" > <can Vas width= "720" height= "id=" V2i_canvas "></canvas> </ div> <script src= "js/jquery-1.11.3.min.js" type= "Text/javascript" ></script> <script type= " Text/javascript "src=" js/flv.js "></script> <script type=" Text/javascript "> $ (function () {if (flvjs.issupported ()) {var videoelement = document.getElementById (' vid Eo_el '); var Flvplayer = Flvjs.createplayer ({type: ' flv ', url: ' http://192.168.30.21 8:8100/movie1 '}); Flvplayer.attachmediaelement (Video_el); Flvplayer.load (); Flvplayer.play (); } var mysrc = ""; function Htmltoimage () {var canvas = document.getElementById ("V2i_canvas"); if (!canvas.getcontext) {alert ("Your browser temporarily does not support canvas"); return false; } else {var context = Canvas.getcontext ("2d"); var video = document.getElementById ("Video_el"); Context.drawimage (video, 0, 0, canvas.width, canvas.height); return MYSRC = Canvas.todataurl ("Image/png"); }} $ ("#screen_shot_btn"). Click (Function (event) {htmltoimage (); $ ("#image_el"). attr ("src", mysrc); }); $ ("#screen_save_btn"). Click (function () {htmltoimage (); if ($ ("#image_el"). attr ("src") = "" ") {DownloadFile (MYSRC); } else {alert ("content is empty"); }}) function DownloadFile (src) {var triggerdownload = $ ("#screen_save_b TN "). attr (" href ", src). attr (" Download "," Jietu.png "); }}) </script></body>
Summarize:
1, Context.drawimage (image, 0, 0, canvas.width, canvas.height);
The Context.drawimage method video here should be the image
element that is drawn to the context. Allow any canvas image source ( CanvasImageSource
), for example: HTMLImageElement
, HTMLVideoElement
, or HTMLCanvasElement
.
Portal:canvasrenderingcontext2d.drawimage ().
Note: therefore the video stream screenshot cannot use the Video.js, because the Video.js essence is uses the flash, has processed the video tag.
2, cross-domain can not be used Canvas.todataurl ()
Workaround: 1, put the video resources into the directory
2, or add crossorigin= "*" to the video tag
3, Flv.js compatibility is not good, currently only test compatible PC-side Firefox, Google; Mobile is not supported. The download download Property compatibility is also not optimistic, the subsequent find a solution to complement.
JS using canvas + flv.js to achieve video streaming screenshots, local download function, compatible with Firefox, Google, screenshot cross-domain pit