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 = '#ffffff';
_ctx.fillRect(0, 0, _videoWidth, _videoWidth);
_ctx.drawImage(_video, 0, 0, _videoWidth, _videoHeight, 0, 0, _videoWidth, _videoHeight);
var dataUrl = _canvas.toDataURL("image/png");Nach dem Login kopieren
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>Nach dem Login kopieren
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 = '#ffffff';
_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}
})();Nach dem Login kopieren
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!
