Home > Article > Web Front-end > Tempting examples of HTML5/CSS3 - Detailed explanation of imitating Youku video screenshot function

Tempting examples of HTML5/CSS3 - Detailed explanation of imitating Youku video screenshot function

黄舟Original: 2017-03-09 16:42:201977browse

HTML5/CSS3 Tempting example-detailed explanation of imitating Youku video screenshot function:

General video websites can play videos uploaded by users after the user uploads them. Take a screenshot of the video and use it as a display image of the video. Such a function can also be introduced in the project to give users a good experience, instead of asking users to upload an additional display picture.

Rendering:

It still looks very good. Let me analyze it for you. The core code is very simple:

_canvas = document.createElement("canvas");
_ctx = _canvas.getContext("2d");
_ctx.fillStyle = &#39;#ffffff&#39;;
_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 these lines. When using ctx.drawImage, the first parameter can be the video object, and then the DataUrl is obtained through the canvas and assigned to the Img tag. Those are the key points.

Let’s look at the entire example:

HTML:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">

    <style type="text/css">


        html
        {
            overflow: hidden;
        }

        body
        {
            background-color: #999;
        }

        video
        {
            display: block;
            margin: 60px auto 0;
        }

        #shotBar
        {
            position: absolute;
            bottom: 5px;
            height: 120px;
            width: 98%;
            background-color: #000;
            box-shadow: -5px -5px 10px #fff;
            border-radius: 5px;
            padding: 2px;
            overflow: auto;
        }

        #shotBar img
        {
            border: 3px solid #fff;
            border-radius: 5px;
            height: 110px;
            width: 210px;
            margin-left: 4px;
        }


    </style>

    <script type="text/javascript" src="../../../jquery-1.8.3.js"></script>

    <script type="text/javascript" src="videoshot.js"></script>

    <script type="text/javascript">

        $(function ()
        {
            ZhangHongyang.click2shot.init();
        });

    </script>


</head>
<body>


<video src="media/style.mp4" controls id="video">
</video>
<p id="shotBar">
</p>
</body>
</html>

html and css are quite simple.

Mainly look at the Js code:

/**
 * Created with JetBrains WebStorm.
 * User: zhy
 * Date: 14-6-18
 * Time: 上午12:24
 * 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 = &#39;#ffffff&#39;;
            _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");

        //创建一个和video相同位置的图片
        var $imgBig = $("<img/>");

        $imgBig.width(_videoWidth).height(_videoHeight).css({position: "absolute", left: _video.offsetLeft, top: _video.offsetTop, 
        width: _videoWidth + "px", height: _videoWidth + "px"}).attr("src", dataUrl);
        $("body").append($imgBig);

        //创建缩略图，准备加到shotBar
        var $img = $("<img>");
        $img.attr("src", dataUrl);
        $(this).append($img);

        var offset = _getOffset($img[0]);
        $img.hide();
        //添加动画效果
        $imgBig.animate({left: offset.x + "px", top: offset.y + "px", width: $img.width() + "px", height: $img.height() + "px"}, 200, function ()
        {
            $img.attr("src", dataUrl).show();
            $imgBig.remove();
            _video.play();
        });


    }

    /**
     * 获取元素在显示区域的leftOffset和topOffset
     * @param elem
     * @returns {{x: (Number|number), y: (Number|number)}}
     * @private
     */
    function _getOffset(elem)
    {
        var pos = {x: elem.offsetLeft, y: elem.offsetTop};
        var offsetParent = elem.offsetParent;
        while (offsetParent)
        {
            pos.x += offsetParent.offsetLeft;
            pos.y += offsetParent.offsetTop;
            offsetParent = offsetParent.offsetParent;
        }
        return pos;
    }


    return {init: _init}

})();

It should be noted that after obtaining the attributes and some operations in the video.canplay event, you must removeEventLinstener, otherwise the paused playback will continue to be called This method. When the event is clicked, the video will be paused, and then a picture will be generated at the position of the video, moved to the position of the thumbnail using jquery animation, and then the document will be removed and the thumbnail will be displayed, resulting in an animation effect.

You can add operations such as uploading the pictures yourself. There is another very important point: canvas.toDataURL("image/png"); may need to be accessed in the server to use it normally. I dragged the written page into tomcat. You can start any server at will, otherwise it will report Security Question.

The above is the detailed content of Tempting examples of HTML5/CSS3 - Detailed explanation of imitating Youku video screenshot function. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：HTML5/CSS3 classic case - drag and drop to upload images without plug-in (2)Next article：HTML5/CSS3 classic case - drag and drop to upload images without plug-in (2)

See more

Tempting examples of HTML5/CSS3 - Detailed explanation of imitating Youku video screenshot function

Related articles