Home > Developer > Web Develop
Web play video needs to load the player, but can also achieve the effect of video playback through the brush diagram
JS uses the Z-index attribute to record a blog address explaining the Z-index attribute:
Http://www.cnblogs.com/gisdream/archive/2010/06/10/1755891.html
Method 1:
JS's Code
<script type= "Text/javascript" >
var imagenr = 0;
var finished = new Array ();
function Createimagelayer () {
var img = new Image ();
Img.style.position = "absolute";
Img.style.zIndex = 0;
Img.onload = Imageonload;
Img.width = 480;
Img.height = 320;
IMG.SRC = "/?action=snapshot&n=" + (++IMAGENR);
var webcam = document.getElementById ("webcam");
Webcam.insertbefore (IMG, webcam.firstchild);
}
function Imageonload () {
This.style.zIndex = Imagenr;
while (1 < finished.length) {
var del = Finished.shift ();
Del.parentNode.removeChild (DEL);
}
Finished.push (this);
Createimagelayer ();
}
</script>
The body of the HTML
Start calling the Createimagelayer () function after the Web page has finished loading
<body onload= "Createimagelayer ();" >
<div id= "webcam" style= "width:480px; height:320px; " ></div>
Method One of the basic works is the Web front-end to the service get a picture, the server to the Web front-end
Send a picture, loop to get and display the implementation brush diagram, most of the existing Rover support this method
Method 2:
The body of the HTML
Method Two does not need JS, simple to use HTML to load a server-side picture can, although simple, but most
Browser not supported, temporarily only found Firefox (Mozilla Firefox) support
Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.
HTML+JS brush diagram for video effects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
