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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.