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

**URL:** <https://discourse.processing.org/t/video-not-playing-in-repl-it-but-is-playing-on-other-platforms/27414>\
**Category:** Beginners\
**Created:** [January 27, 2021, 5:28pm UTC](https://discourse.processing.org/t/video-not-playing-in-repl-it-but-is-playing-on-other-platforms/27414 "2021-01-27T17:28:08Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![SheCurvesMobius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shecurvesmobius/32/7054_2.png) [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Post date:** [January 27, 2021, 5:28pm UTC](https://discourse.processing.org/t/video-not-playing-in-repl-it-but-is-playing-on-other-platforms/27414/1 "2021-01-27T17:28:08Z")

</div>

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:

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

```

And here’s the [repl.it sketch](https://repl.it/@ToriFoster/17-Video-1#script.js).

Thanks for any insights 🙂

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 27, 2021, 5:37pm UTC](https://discourse.processing.org/t/video-not-playing-in-repl-it-but-is-playing-on-other-platforms/27414/2 "2021-01-27T17:37:35Z")

</div>

> [@Help! Why I cannot use the P5JS](https://discourse.processing.org/t/help-why-i-cannot-use-the-p5js/18067/2):
>
> For an absolute beginner, my advice is to start on some p5js online editor, such as this 1: man_student[OpenProcessing.org/sketch/create](http://OpenProcessing.org/sketch/create) Some sketches I’ve got there btW: grinning By using such specialized p5js online resources we don’t need to make our own “index.html” file. wink When you decide it’s time to learn how to code your own “index.html” file, you can use more generic JS online editors, such as these 2 below: sunglasses You can also take a look at my sketches I…

---

<div class="post-metadata">

**Author:** ![SheCurvesMobius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shecurvesmobius/32/7054_2.png) [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Post date:** [January 27, 2021, 6:31pm UTC](https://discourse.processing.org/t/video-not-playing-in-repl-it-but-is-playing-on-other-platforms/27414/3 "2021-01-27T18:31:19Z")

</div>

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

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

```

play

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

```

Best,  
Tori

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 28, 2021, 1:46am UTC](https://discourse.processing.org/t/video-not-playing-in-repl-it-but-is-playing-on-other-platforms/27414/4 "2021-01-28T01:46:05Z")

</div>

> [@SheCurvesMobius](#):
>
> `<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"></script>`

The link above refers to a CDN service site:

> **[Content delivery network](https://en.wikipedia.org/wiki/Content_delivery_network)**
>
> A content delivery network, or content distribution network (CDN), is a geographically distributed network of proxy servers and their data centers. The goal is to provide high availability and performance by distributing the service spatially relative to end users. CDNs came into existence in the late 1990s as a means for alleviating the performance bottlenecks of the Internet as the Internet was starting to become a mission-critical medium for people and enterprises. Since then, CDNs have CDNs ...

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

> [@SheCurvesMobius](#):
>
> `<script src="lib/p5.play.js" type="text/javascript"></script>`

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](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](http://haptic-data.com/toxiclibsjs) besides [p5js.org](http://p5js.org) along w/ the local file “sketch.js”:

https://glitch.com/embed/#!/embed/blob-growth-p5js?path=index.html&previewSize=0&sidebarCollapsed=true

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 28, 2021, 2:23am UTC](https://discourse.processing.org/t/video-not-playing-in-repl-it-but-is-playing-on-other-platforms/27414/5 "2021-01-28T02:23:28Z")

</div>

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

> **[p5.Play Instance Mode Example](https://Bl.ocks.org/GoSubRoutine/cf739128f389766f5d9cb631c9c358a6)**
>
> GoSubRoutine’s Block cf739128f389766f5d9cb631c9c358a6

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

```auto
<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](https://Unpkg.com/@cmu-eberly-center/p5.play)

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![SheCurvesMobius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shecurvesmobius/32/7054_2.png) [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Post date:** [January 28, 2021, 6:17pm UTC](https://discourse.processing.org/t/video-not-playing-in-repl-it-but-is-playing-on-other-platforms/27414/6 "2021-01-28T18:17:46Z")

</div>

Hi GoToLoop,

Thanks again for your responses 🙂 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:

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

```

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 28, 2021, 7:00pm UTC](https://discourse.processing.org/t/video-not-playing-in-repl-it-but-is-playing-on-other-platforms/27414/7 "2021-01-28T19:00:43Z")

</div>

That code of yours above is pure p5\*js library: *️⃣  
[p5js.org/reference/#/p5/createVideo](http://p5js.org/reference/#/p5/createVideo)

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

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

```

---

<div class="post-metadata">

**Author:** ![SheCurvesMobius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shecurvesmobius/32/7054_2.png) [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Post date:** [January 28, 2021, 7:02pm UTC](https://discourse.processing.org/t/video-not-playing-in-repl-it-but-is-playing-on-other-platforms/27414/8 "2021-01-28T19:02:22Z")

</div>

Ok, great–good to know. Any idea why it’s not working [here](https://repl.it/@ToriFoster/17-Video-1#script.js) then?

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 28, 2021, 7:04pm UTC](https://discourse.processing.org/t/video-not-playing-in-repl-it-but-is-playing-on-other-platforms/27414/9 "2021-01-28T19:04:32Z")

</div>

Have you compared my “index.html” file w/ yours there? 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![SheCurvesMobius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shecurvesmobius/32/7054_2.png) [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Post date:** [January 28, 2021, 7:06pm UTC](https://discourse.processing.org/t/video-not-playing-in-repl-it-but-is-playing-on-other-platforms/27414/10 "2021-01-28T19:06:32Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [January 28, 2021, 7:09pm UTC](https://discourse.processing.org/t/video-not-playing-in-repl-it-but-is-playing-on-other-platforms/27414/11 "2021-01-28T19:09:51Z")

</div>

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

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

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

```

---

<div class="post-metadata">

**Author:** ![SheCurvesMobius](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/shecurvesmobius/32/7054_2.png) [@SheCurvesMobius](https://discourse.processing.org/u/SheCurvesMobius)\
**Post date:** [January 28, 2021, 7:11pm UTC](https://discourse.processing.org/t/video-not-playing-in-repl-it-but-is-playing-on-other-platforms/27414/12 "2021-01-28T19:11:10Z")

</div>

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