JS using canvas + flv.js to achieve video streaming screenshots, local download function, compatible with Firefox, Google, screenshot cross-domain pit

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> &LT;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