Video元件的基本操作

今天來整理video元件的基本操作以及與Canvas的整合
在p5.js中，可以使用 createVideo()來建立video元件
其中 ['assets/small.mp4', 'assets/small.ogv', 'assets/small.webm']
代表可以支援的影片格式有 mp4, ogv, webm
比較要注意的是，如何製作出有透明背景的影片格式，以及有哪些瀏覽器支援透明背景的影片格式，在之後的文章會另有說明整理。

let can;
let vid;
function setup() {
	can = createCanvas(560, 320);
	can.id("can1");
	can.class("c1");
	can.position(0, 0);
	background(255, 255, 0);
	console.log(can);
	console.log(can.elt);

	vid = createVideo(['assets/small.mp4'], () => {
		vid.loop();
		vid.volume(0);
	});

	vid.size(560, 320);
	vid.id("vid1");
	vid.class("v1");
	vid.position(400, 0);
	vid.hide();
	console.log(vid);
	console.log(vid.elt);
}

function draw() {
  image(vid, 0, 0, 560, 320);
}

產生的canvas以及video的元件如下

<canvas id="can1" class="c1" width="400" height="400" style="width: 400px; height: 400px; position: absolute; left: 0px; top: 0px;"></canvas>

<video crossorigin="anonymous" width="560" height="320" style="width: 560px; height: 320px; position: absolute; left: 400px; top: 0px;" id="vid1" class="v1" loop="true"><source src="assets/small.mp4"></video>

其中canvas產生的元件類別是 Renderer2D
video產生的元件類別是 MediaElement

因此canvas與video是完不相同的元件。
如果想要將video置入到canvas中的話，
需要將原本的video隱藏
重新利用image(video, 0, 0); 繪入canvas中。

video的基本操作指令
play()
stop()
pause()
loop() //-- 設定循環播放，執行loop()時，都會重頭開始播放
noLoop()
autoplay()
volume() //-- 0.0 ~ 1.0
speed() //-- 0.5, 1.0, 2.0, -1.0 代表反向原速播放
time() //-- 以 second 為單位
duration() //-- 以 second 為單位
onended() //-- 影片播完事件
connect()
disconnect()
showControls()
hideControls()
addCue()
removeCue()
clearCues()

其中video的鏡像(Flipped Webcam)操作為

let capture;

function setup() {
  createCanvas(320, 240);
  capture = createCapture(VIDEO);
  capture.hide();
}

function draw() {  
  push();
  translate(width,0);
  scale(-1, 1);
  image(capture, 0, 0, 320, 240);
  pop();
}