控件播放视频，播放暂停循环等功能，以及画布的scratch缓冲处理视频

最新推荐文章于 2024-09-02 14:39:58 发布

andrewleeeeee

最新推荐文章于 2024-09-02 14:39:58 发布

阅读量1.6k

点赞数

分类专栏： Javascript JS成品代码

本文链接：https://blog.csdn.net/andrewleeeeee/article/details/14230615

版权

本文探讨了Scratch缓冲画布的工作原理，它由video层、处理画布和展现画布三层组成，实现了视频的播放、暂停和循环功能。同时，详细解释了一帧视频如何通过像素的R、G、B、ALPHA四个值来呈现。

摘要由CSDN通过智能技术生成

1.scratch缓冲画布是怎么工作的，由最下层的video，中间的处理画布，最上层的展现画布组成

2.视频的一帧 = 一个像素 = 4个值（R G B ALPHA）

var videos = {
video1: "video/demovideo1",
video2: "video/demovideo2"
};


var effectFunction = null;


window.onload = function() {


var video = document.getElementById("video");
video.src = videos["video1"] + getFormatExtension();
video.load();


// add click handlers to control anchors
var controlLinks = document.querySelectorAll("a.control");
for (var i = 0; i < controlLinks.length; i++) {
controlLinks[i].onclick = handleControl;
}


// add click handlers to effect anchors
var effectLinks = document.querySelectorAll("a.effect");
for (var i = 0; i < effectLinks.length; i++) {
effectLinks[i].onclick = setEffect;
}

// add click handlers to videoSelection anchors
var videoLinks = document.querySelectorAll("a.videoSelection");
for (var i = 0; i < videoLinks.length; i++) {
videoLinks[i].onclick = setVideo;
}


// add click handlers to video play
//video.onplay = processFrame;
//video.onended = endedHandler;
video.addEventListener("play", processFrame, false);
video.addEventListener("ended", endedHandler, false);


pushUnpushButtons("video1", []);
pushUnpushButtons("normal", []);
};


function setEffect(e) {
var id = e.target.getAttribute("id");
if (id == "normal") {
pushUnpushButtons("normal", ["west