Heim > Artikel > Web-Frontend > H5+C3 sorgt für einen Youku-Video-Screenshot-Effekt

H5+C3 sorgt für einen Youku-Video-Screenshot-Effekt

php中世界最好的语言Original: 2018-03-26 14:19:051634Durchsuche

Dieses Mal bringe ich Ihnen H5+C3 mit, um einen Screenshot eines Youku-Videos zu erstellen. Welche Vorsichtsmaßnahmen sind beim Erstellen eines Screenshots eines Youku-Videos mit H5+C3 zu beachten?

Allgemeine Video-Websites können einen Screenshot des vom Benutzer hochgeladenen Videos erstellen, nachdem der Benutzer es hochgeladen hat, und ihn dann als Anzeigebild des Videos verwenden. Eine solche Funktion kann auch im Projekt eingeführt werden, um Benutzern ein gutes Erlebnis zu bieten, anstatt Benutzer aufzufordern, ein zusätzliches Anzeigebild hochzuladen.

Rendering:

Lassen Sie mich den Kerncode für Sie analysieren:

_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");

Der Kerncode besteht nur aus diesen Zeilen. Bei Verwendung von ctx.drawImage kann der erste Parameter das Videoobjekt sein, und dann wird die DataUrl über die Leinwand abgerufen Dem IMG-Tag zugewiesen. Das sind die Kernpunkte.

Sehen Sie sich das gesamte Beispiel unten an:

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>

Sowohl HTML als auch CSS sind recht einfach.

Sehen Sie sich hauptsächlich den Js-Code an:

/** 
 * 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}  
  
})();

Es sollte beachtet werden, dass nach Erhalt der Attribute und einiger Vorgänge im Video. canplay event , achten Sie darauf,EventLinstener zu entfernen, andernfalls wird diese Methode ständig aufgerufen, wenn die Wiedergabe angehalten wird. Wenn auf das Ereignis geklickt wird, wird das Video angehalten. Anschließend wird an der Position des Videos ein Bild generiert, mithilfe der JQuery-Animation an die Position des Miniaturbilds verschoben. Anschließend wird das Dokument entfernt und das Miniaturbild angezeigt , was zu einem Animationseffekt führt.

Sie können Vorgänge wie das Hochladen der Bilder selbst hinzufügen. Es gibt noch einen weiteren sehr wichtigen Punkt: Möglicherweise muss auf den Server zugegriffen werden, um ihn normal verwenden zu können. Sie können die geschriebene Seite nach Belieben starten Sicherheitsfrage melden.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

So verwenden Sie die Constraint-Verification-API in H5

zepto implementiert nahtloses Auf- und Abscrollen auf der mobilen Seite

Das obige ist der detaillierte Inhalt vonH5+C3 sorgt für einen Youku-Video-Screenshot-Effekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php tomcat jquery css html JS 对象事件 canvas

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So implementieren Sie das Hochladen von Datei-Haltepunkten für Lebensläufe in H5Nächster Artikel：So implementieren Sie das Hochladen von Datei-Haltepunkten für Lebensläufe in H5

In Verbindung stehende Artikel

Mehr sehen