Book
Υποενότητα 10.2: Βίντεο στο p5
Υποενότητα 10.2: Βίντεο στο p5
- Εισαγωγή video
- Εργασίες με video
- Συνάρτηση createCapture()
Εισαγωγή video
Για να εισαγάγουμε ένα βίντεο στο p5.js χρησιμοποιούμε τη συνάρτηση createVideo()
. Μέσα σε αυτή τη συνάρτηση βάζουμε τη διαδρομή στο αρχείο βίντεο.
Μπορούμε να συνδυάσουμε βίντεο με στοιχεία ελέγχου συμβάντων - event για αναπαραγωγή / παύση του βίντεο.
Παράδειγμα
Ακολουθεί ένα παράδειγμα κώδικα που δείχνει ένα βίντεο μαζί με ένα κουμπί ελέγχου:
// set let playing to be false in the beginning
let playing = false;
let myVideo;
let myButton;
function setup() {
// display the video
myVideo = createVideo(['videos/Star.mp4']);
myButton = createButton('play');
// when button is pressed call the PausePlay function
myButton.mousePressed(PausePlay);
}
// play or pause video
function PausePlay() {
// if playing is true
if (playing) {
// make the video pause
myVideo.pause()
playing = false;
}
// else let the video play
else {
myVideo.play();
playing = true;
}
}
Μπορείτε να δείτε το αποτέλεσμα του παραπάνω κώδικα here
Exercise
- Open your Visual Studio editor and the
p5yourName
folder. - Open the file
ex812.js
in your editor and save it asex1021.js
- Open the file
ex812.html
in your editor and save it asex1021.html
- In the
ex1021.html
file, update the link toex1021.js
from exersice812.js - Go to the
index.html
file and create, underModule 10
, alink
to theex1021.html
file with the title "Insert video".
Modify the ex1021.js
file and use as a base the above example to create a video which will automatically replay. You can see here an example.
// set let playing to be false in the beginning
let playing = false;
let myVideo;
let myButton;
function setup() {
// display the video
myVideo = createVideo(['videos/Star.mp4']);
myButton = createButton('play');
// when button is pressed call the PausePlay function
myButton.mousePressed(PausePlay);
}
// play or pause video
function PausePlay() {
// if playing is true
if (playing) {
// make the video pause
myVideo.pause();
playing = false;
}
// else let the video play
//use loop to make it replay
else {
myVideo.loop();
playing = true;
}
}
Κάντε μια Git commit με το μήνυμα "Insert video".
- Δείτε περισσότερα για την createVideo() function
- Δείτε περισσότερα για την loop() function