Using JS to change a video when a...

User 2699991 Photo


Registered User
3,561 posts
Online Now

Hi all you JS gurus

I have a client wanting to play different videos within a reveal, such that if a visitor selects a button (title of video) then that video is loaded into the reveal,
so for example the first video is called (vid1) which is the default one loaded, then if a visitor selects a different link, then the second video called (vid2) is loaded.

Is that at all possible?? I cannot work it out as that is possibly a little bit beyond my JS lnoweledge

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 187934 Photo


Senior Advisor
19,572 posts

I might not be understanding correctly but why not put each video in a reveal just like the first? Or do you want the link to the next video to be within the open reveal? Next and Prev?
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2699991 Photo


Registered User
3,561 posts
Online Now

Eric Rohloff wrote:
I might not be understanding correctly but why not put each video in a reveal just like the first? Or do you want the link to the next video to be within the open reveal? Next and Prev?


it's ok Eric
I already did that, and it worked wondefully, but he wanted jusat one video player skin with different videos

We have now however gone back to the original suggestion

I have however another question

when the user clicks on the close button for the modal (if they decide to close before the video ends playing)
I can get the video to pause but not stop

pause is ok but it would be better to have it stop

here is the code I am using

<script>
window.onload = function () {
document.getElementById("close1").onclick = function(){
document.getElementById("vid1").pause();
}
document.getElementById("close2").onclick = function(){
document.getElementById("vid2").pause();
}

document.getElementById("close3").onclick = function(){
document.getElementById("vid3").pause();
}
document.getElementById("close4").onclick = function(){
document.getElementById("vid4").pause();
}
}
</script>

is there a way rto make it stop

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 379556 Photo


Registered User
1,215 posts

I think it's just using an addition to pause. So one has -

video.pause();
video.currentTime = 0;

I attach an example where the script has a function 'halt' using the above.

Frank
Attachments:
User 2699991 Photo


Registered User
3,561 posts
Online Now

Frank Cook wrote:
I think it's just using an addition to pause. So one has -

video.pause();
video.currentTime = 0;

I attach an example where the script has a function 'halt' using the above.

Frank


Thanks Frank I will give it a whirl

The Help You Need: When You Need It The Most
Website Design & Development
Website Renovations
Wayans' Theme Park
Watch Listen & Learn Video Tutorials
User 187934 Photo


Senior Advisor
19,572 posts

All of the skins can be the same. and you won't see the difference when loading another video.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
19,572 posts

As I understand your need.
https://ericrohloff.com/coffeecup/ccfor … veal-ajax/
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 187934 Photo


Senior Advisor
19,572 posts

Here's the php for the above example's js. You can read the source code to grab the js.
<?php
$video_number = $_POST['video_number'];
if(isset($video_number)){
if($video_number == 1){
$url = "video1.mp4";
$pic = "video1-pic.jpg";
}else if($video_number == 2){
$url = "video2.mp4";
$pic = "video2-pic.jpg";
}else{
$url = "video3.mp4";
$pic = "video3-pic.jpg";}
// if successfully Updated
if($url) {
$return_data=array('video_number'=>$video_number,'url'=>$url,'pic'=>$pic);
}else{$return_data=array('url'=>'0');}
header('Content-Type: application/json');
echo json_encode($return_data);
exit();
} else{
header('Location: ../index.html');
exit;
}
?>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.