Video not playing in repl.it but is playing on other platforms

p5.js Beginners
1

Hi all,

Does anyone have any insight as to why my code does not work on repl.it but it does work on OpenProcessing .org and on the p5.js web editor?

Here’s the code:

var vid;
function setup() {
  createCanvas(0, 0);
  vid = createVideo("countdown.mov");
  vid.loop()
}

And here’s the repl.it sketch.

Thanks for any insights :slight_smile:

2
3

Hi GoToLoop,

Thanks for your response! I’m teaching a course online with p5.js and I’m using repl.it as my platform, partly because it allows students to collaborate easily with one another. So I’m afraid I’m tied to repl.it.

I’m reasonably familiar with p5, though I’m self-taught so I’m sure I have all kinds of gaps in my knowledge. I’m also nearly brand-new to using libraries, and I know nothing about DOM. I know that you need to reference libraries when using things like play.js, but I don’t know how to reference DOM using the index.html file. Is there a simple line of code for DOM, as there is for play and for p5.js?

p5

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>

play

<script src="lib/p5.play.js" type="text/javascript"></script>

Best,
Tori

4

The link above refers to a CDN service site:

That’s my favorite way to load libraries btW b/c we can skip having them locally inside our project folder.

The link above implies you’ve got a file “p5.play.js” inside the subfolder “lib/”.

And the subfolder “lib/” gotta be inside the same folder as your HTML file.

For that approach to work, your hosting site https://Repl.it gotta allow you to create subfolders & upload JS file types.

IMO you’re better off looking up for some CDN link for your p5.play library instead.

The example sketch below has an “index.html” file which loads the library Toxiclibs.js - Open-Source Library for Computational Design besides p5js.org along w/ the local file “sketch.js”:

5

Turns out I had an old example sketch using library p5.play:

The online sketch above got the following “index.html” file (simplified):

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=https://MolleIndustria.GitHub.io/p5.play/lib/p5.play.js></script>
<script defer src=sketch.js></script>

I’ve also found an alternative CDN link for p5.play:
https://Unpkg.com/@cmu-eberly-center/p5.play

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=https://Unpkg.com/@cmu-eberly-center/p5.play></script>
<script defer src=sketch.js></script>
6

Hi GoToLoop,

Thanks again for your responses :slight_smile: I think we’ve gotten our wires crossed again though. What I need to know is if there is a library that I need to reference in my HTML code in order to run this code in my script.js file:

var vid;
function setup() {
  createCanvas(0, 0);
  vid = createVideo("countdown.mov");
  vid.loop()
}
7

That code of yours above is pure p5*js library: :asterisk:
p5js.org/reference/#/p5/createVideo

So you just need to load the “p5.js” file inside your “index.html” file for it to run: :running_woman:

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=sketch.js></script>
8

Ok, great–good to know. Any idea why it’s not working here then?

9

Have you compared my “index.html” file w/ yours there? :man_shrugging:

10

Just pasted yours in. No luck–still doesn’t work. Maybe I should ask someone at repl.it?

11

Maybe b/c in my “Index.html” file the sketch is called “sketch.js” and yours is “script.js”. :woozy_face:

Here’s the same “Index.html” fixed to load “script.js” instead: :adhesive_bandage:

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=script.js></script>
12

It works!! That’s amazing! Thank you so much GoToLoop!!

1 Like