dom

//video play pause
var playing = false;
var fingers;
var button;
var col;
function setup() {
var myCanvas = createCanvas(320, 250);
myCanvas.parent('myContainer');
fingers = createVideo(['asset/m1.mp4','asset/m1.webm']);
background(0);
fingers.position(0, 0);
col= color(80,80,230,200);
button = createButton('play');
button.position(150, 252);
button.size(170,30)
button.style("font-size", "17px");
button.style("color", "#fff");
button.style("background-color",col)
button.mousePressed(toggleVid); // attach button listener
}

function toggleVid() {
if (playing) {
fingers.pause();
button.html('play');
} else {
fingers.loop();
button.html('pause');
}
playing = !playing;
}

//tablet

function setup() {
var myCanvas = createCanvas(320, 250);
myCanvas.parent('myContainer');
var video = createVideo(['asset/m1.mp4','asset/m1.webm']);
background(0);
video.position(0, 0);
video.play();
video.showControls();
}

function draw() {

}

preview

//button style

var button;
var col;
function setup() {
var myCanvas = createCanvas(300, 300);
myCanvas.parent('myContainer');
background(0);
col= color(80,80,230,200);
button = createButton('Click Start');
button.position(100, 305);
button.size(200,30)
button.style("font-size", "17px");
button.style("color", "#fff");
button.style("background-color",col)
// button.html("Click Restart2");
button.mousePressed(changeBG);
// button.hide();
}

function changeBG() {
var val = color(random(255),random(255),random(255));
background(val);
// button.hide();
// button.show();
}
function draw() {
noStroke();
textAlign(CENTER);
textSize(18);
fill(255);
var hd = "BackGround color Change\nClick Start";
text(hd, width/2, 150);
}

preview