HTML5 CSS3 attractive example: Imitating Youku's video screenshot Function

Source: Internet
Author: User

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.


Okay. If this article is helpful to you, please submit it first. You are also welcome to leave a message ~




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.