[SOLVED] [p5.dom] Problem loading video

p5.js Coding Questions
1

Hi everyone. I don’t know what I’m doing wrong when loading a video (in order to display it just after loading). Here is my .js and .html code:

js.code

function preload() {
  
 vid = createVideo('videos/20th_Century_Starwars_intro.mp4');
 soundtrack = loadSound('sounds/star_wars_opening.mp3');
 
}

html.code

<html>
<head>
  <meta charset="UTF-8">

  <!-- PLEASE NO CHANGES BELOW THIS LINE (UNTIL I SAY SO) -->
  <script language="javascript" type="text/javascript" src="libraries/p5.js"></script>
  <script language="javascript" type="text/javascript" src="libraries/p5.sound.js"></script>
  <script language="javascript" type="text/javascript" src="creditsroll3d.js"></script>
  <!-- OK, YOU CAN MAKE CHANGES BELOW THIS LINE AGAIN -->

  <!-- This line removes any default padding and style. 
       You might only need one of these values set. -->
  <style> body {padding: 0; margin: 0;} </style>
</head>

<body>
</body>
</html>

And I get the following error code (in Chrome debuger):

Uncaught ReferenceError: createVideo is not defined
    at preload (creditsroll3d.js:35)
    at p5.<anonymous> (p5.js:9038)
    at new p5 (p5.js:9323)
    at _globalInit (p5.js:5602)

I’ve already done this in the same way in another sketch under Processing ide and Chrome and it works… But here no idea about what’s wrong.

Any insight?

Thanks for your attention! :slight_smile:

1 Like
2

Not sure, can you move createVideo to setup?

examples | p5.js

Kf

3

Consider using this “index.html” minimum template file:

<!DOCTYPE html>

<meta charset=utf-8>
<meta name=viewport content=width=device-width,initial-scale=1>

<script defer src=https://cdn.JsDelivr.net/npm/p5></script>
<script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.dom.min.js>
<script defer src=https://cdn.JsDelivr.net/npm/p5/lib/addons/p5.sound.min.js></script>

<script defer src=sketch.js></script>
4

Thanks for your suggestions! I’ve found the solution but not the cause of the problem: the p5.sound was not in the ‘libraries’ folder of the project and could not be loaded. Apparently Chrome debugger does not say anything in the console when a script import into html page fails and you can search for a moment when confronted to this kind of problem if you don’t have this in mind. It seems this file disappearence occured when I saved from Processing IDE a copy of a project (with ‘Save as…’) in order to avoid rewriting all code in a new project. But I’m not sure. What I’m sure about is that I have not deleted this p5.sound.js script into ‘libraries’ folder. Anyway, everything is fine now and I know what to look for if this happens in another time. Thanks and a nice week-end! :smiley:

2 Likes