javascript+html setting up a video preview

The first type:

Set the Video property poster

poster= "Img/poster.png">   <source src= "Http://www.huazuo.com/video/brand.mp4" type= "Video/mp4" />
</video>

The second type:

Set video first frame as preview

HTML code: (Adjusts the left and top of the output, covering the video)

<div style = "Position:relative" >
<video id = "video" class= "Videocontent" controls>   <source src= "Video/brand.mp4" type= "Video/mp4"/> </video>
<div id = "Output" style = "position:absolute;left:0;left:0" >
</div>
</div>

 javascript Code:

var video, Output;var scale = 0.6;var initialize = function () {output = doc    Ument.getelementbyid ("Output");    Video = document.getElementById ("video"); Video.addeventlistener ('  Canvas.width = video. Videowidth *  scale; 
     canvas.height = video .  videoheight* scale ;     
 Canvas.getcontext (' 2d '). DrawImage (video, 0, 0, canvas.width, canvas.height); 
 var img = document.createelement ("img"); 
 Img.src = Canvas.todataurl ("Image/png");   
 Output.appendchild (IMG);  }; Initialize (); 

Output will display the first frame after the video is loaded, and the output will be hidden when playing

Problem:

Canvas drawing, due to the security of the browser, if the use of canvas drawing in the process of using the image resources of the other, then the Todataurl () will throw a security exception:

Uncaught securityerror:failed to execute ' todataurl ' in ' htmlcanvaselement ': Tainted canvases May is not exported

Workaround:

1. Place the video under the current domain.

2, access to the server allows, the use of resources across domains, that is, set the Cors cross-domain configuration, access-control-allow-origin.

Then, when the client accesses the picture resource, it adds

Img.setattribute (' Crossorigin ', ' Anonymous ');

javascript+html setting up a video preview