# P5 panning with sliders and play video with button
**URL:** https://discourse.processing.org/t/p5-panning-with-sliders-and-play-video-with-button/30255
**Category:** Libraries
**Created:** [May 24, 2021, 7:28pm UTC](https://discourse.processing.org/t/p5-panning-with-sliders-and-play-video-with-button/30255 "2021-05-24T19:28:17Z")
**Posts on this page:** 7
**Page:** 1
Hi! I’m trying to create a website with p5 that plays a video back and then also uses a slider to pan a song that is simultaneously playing. I followed example code from the p5 website, however for some reason, my button doesn’t start the video when clicked and my slider is not panning the audio. Can anyone help me figure this out?
SKETCH:
```auto
let cnv;
let video;
let videoReady = false;
let playButton;
let song;
let sliderPan;
function modelLoaded() {
console.log("Model Loaded");
videoReady = true;
}
function songLoaded() {
song.play();
}
//setup code
function setup() {
const w = 640;
const h = 480;
video = createVideo(['randomvid.mp4', 'randomvid.ogv', 'randomvid.webm']);
video.parent('video');
video.size(w, h);
playButton = document.getElementById('play-button');
playButton.addEventListener('click', playPressed);
song = loadSound('dhol_main_loop.mp3', songLoaded);
sliderPan = createSlider(-1, 1, 0, 0.01);
}
function draw() {
if (!videoReady) {
textSize(32);
fill('#222');
textAlign(CENTER, CENTER);
text('loading...', 320, 240);
return;
}
background(150);
song.pan(sliderPan.value());
}
function mousePressed() {
video.play();
}
function toggleVideo() {
if (!video.isLooping()) {
video.loop();
playButton.innerText = "Stop Video";
} else {
video.stop();
playButton.innerText = "Play Video";
}
}
function playPressed() {
toggleVideo();
}
```
INDEX:
```auto
Sample Website
Hi @karenmani ,
Welcome to the forum! 😉
Your code is a bit difficult to test since we don’t have access to the videos, sounds and we need to setup the libraries…
Can you maybe upload it to the online editor? [https://editor.p5js.org/](https://editor.p5js.org/)
From what I see, you have :
- A button with an id `play-button`
- You are adding an event to the click user action :
- The `playPressed()` function does the following :
- the `video.loop()` method plays the video when it’s not looping otherwise it’s stopping it
Should work right? Are you seeing your video? Can you open the web console (F12) and paste any errors in the console?
---
Hi! Thanks for the quick reply! My video was too big to upload to the p5 editor but I put it on github if you can take a look at it there and see if you can help me with the panning slider and play button!
[https://github.com/karenmani/websitetester.git](https://github.com/karenmani/websitetester.git)
In my code, I set the mousePressed function to play the video in order to make sure it would play in general but I want the Play button to start the video and the slider to pan audio on the song file I put in there
---
Thanks!
If you take a look at the console when you press your button, you have this :
```auto
Uncaught TypeError: video.isLooping is not a function
togglePlay http://0.0.0.0:8000/sketch.js:54
playPressed http://0.0.0.0:8000/sketch.js:64
```
It’s because the `video` variable holds a HTML5 video DOM object, not the p5 DOM video object (which is returned by the `createVideo` method) like in this example :
[https://p5js.org/examples/dom-video.html](https://p5js.org/examples/dom-video.html)
but it seems that the `isLooping` only exist for sounds :
> **[p5.js | isLooping() Function - GeeksforGeeks](https://www.geeksforgeeks.org/p5-js-islooping-function/)**
>
> A Computer Science portal for geeks. It contains well written, well thought and well explained computer science and programming articles, quizzes and practice/competitive programming/company interview Questions.
You should use the `play()` and `stop()` methods of the `p5.MediaElement` :
[https://p5js.org/reference/#/p5.MediaElement](https://p5js.org/reference/#/p5.MediaElement)
---
THANK YOU! That fixed the issue!!! Do you think you could take one more look at the github and just help me with figuring out how to pan the song that automatically plays when you open my code using the slide? I updated my code so the slider sits under the canvas but I’m not sure if my code is incorrect or what. Just pushed my latest version to Github. And please let me know if you’re having problems with the p5 library because it was working a second ago and now my audio content isn’t loading!
---
Ok, I saw the issue :
in your `draw()` function, you are doing :
```auto
if (!videoReady) {
textSize(32);
fill('#222');
textAlign(CENTER, CENTER);
text('loading...', 320, 240);
return;
}
```
but the `videoReady` variable is always `False` (you are setting it to true in the `modelLoaded()` function but it’s never called)
So it’s returning and therefore not getting the slider value and panning your sound!
---