HTML5 + CSS3 simulates Youku's video function example, html5css3
For Videos uploaded by users, a video website can display the video after the user uploads the video. This feature can also be introduced in the project to provide a good user experience, rather than allowing users to upload an additional presentation diagram.
:
It looks pretty good. Next I will give you an analysis, and the extremely core code is very simple:
_canvas = document.createElement("canvas"); _ctx = _canvas.getContext("2d"); _ctx.fillStyle = '#ffffff'; _ctx.fillRect(0, 0, _videoWidth, _videoWidth); _ctx.drawImage(_video, 0, 0, _videoWidth, _videoHeight, 0, 0, _videoWidth, _videoHeight); var dataUrl = _canvas.toDataURL("image/png");
The core code is just a few lines. When ctx. drawImage is used, the first parameter can be a video object, and then the DataUrl is obtained through the canvas and assigned to the Img tag. These are the key points.
The example is as follows:
HTML:
<!DOCTYPE html>Html and css are both quite simple.
Focus on Js Code:
/*** Created with JetBrains WebStorm. * User: zhy * Date: 14-6-18 * Time: * To change this template use File | Settings | File Templates. */var ZhangHongyang ={}; ZhangHongyang. click2shot = (function () {var _ ID_VIDEO = "video"; var _ ID_SHOTBAR = "shotBar"; var _ videoWidth = 0; var _ videoHeight = 0; var _ canvas = null; var _ ctx = null; var _ video = null; function _ init () {_ canvas = document. createElement ("canvas"); _ ctx = _ canvas. getContext ("2d"); _ video = document. getElementById (_ ID_VIDEO); _ video. addEventListener ("canplay", function () {_ canvas. width = _ videoWidth = _ video. videoWidth; _ canvas. height = _ videoHeight = _ video. videoHeight; console. log (_ videoWidth + "," + _ videoHeight); _ ctx. fillStyle = '# ffff'; _ ctx. fillRect (0, 0, _ videoWidth, _ videoWidth); $ ("#" + _ ID_SHOTBAR ). click (_ click2shot); _ video. removeEventListener ("canplay", arguments. callee) ;}) ;}function _ click2shot (event) {_ video. pause (); _ ctx. drawImage (_ video, 0, 0, _ videoWidth, _ videoHeight, 0, 0, _ videoWidth, _ videoHeight); var dataUrl = _ canvas. toDataURL ("image/png"); // create an image var $ imgBig =$ ("It should be noted that after obtaining the attributes and some operations in the video. canplay event, you must removeEventLinstener. Otherwise, this method will always be called during pause. When you click an event, the video is paused, an image is generated at the video position, and the jquery animation is used to move the video to the thumbnail position. Then, the document is removed and the thumbnail is displayed, causing the animation effect.
You can add an image by yourself. Also important: canvas. toDataURL ("image/png"); it may need to be accessed on the server for normal use. I dragged the prepared page to tomcat and you can start any server at will, otherwise, security issues will be reported.
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.
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
