How to change a video when I press on a image with onclick?

Question

I´m a newbie in JS and i have written some code but it doesnt work.

I want to change the video in the background, when i click on a image.

Heres my code:

HTML:

<div id="slide">
    
     <video src="videos\Hair - 43633.mp4" class="source" class="video_item" id="videos" autoplay muted loop controls> </video>
    
     <ul id="video_navigation">
    
          <li onclick="videoUrl('videos\Hair - 43633.mp4')"> <img src="image\moon-6616172_1920.jpg" alt="moon" class="img_video_nav" > </li> 
          <li onclick="videoUrl('videos\Road - 81676.mp4')"> <img src="image\background-313415.jpg" alt="moon" class="img_video_nav" > </li> 
          <li onclick="videoUrl('videos\Skyscrapers - 80724.mp4')"> <img src="image\blue-5457731_1920.jpg" alt="moon" class="img_video_nav" > </li> 
          <li onclick="videoUrl('videos\Tunnel - 84938.mp4')"> <img src="image\add-plus-button.png" alt="moon" class="img_video_nav" > </li>
                        
     </ul>
    
</div>

JS:

function videoUrl(src_video)
{
    document.querySelector(".source").src = src_video;
}

Thank you in advance.

Including any error messages you see would be helpful. I suspect this may be your issue: [href syntax : is it okay to have space in file name](https://stackoverflow.com/questions/4172579/href-syntax-is-it-okay-to-have-space-in-file-name) — Michael Cleary, Oct 16 '21 at 04:53

score 0 · Accepted Answer · answered Oct 16 '21 at 05:42

Don't set src to video tag directly.

Instead use a <source src="foo"> tag inside the video tag. HTML5 Video tag with no source?

You forgot to close img tag but it's not a big problem, just don't forget it.

I used video.poster to display the proof.

function videoUrl(src_video) {
  alert(src_video)
  document.querySelector(".source").poster = src_video;
  // I used poster the proof that it's working
  // document.querySelector('source').src = src_video
};

<div id="slide">

  <video class="source" class="video_item" id="videos" autoplay muted loop controls>
    <!-- <source src="foo" /> -->
  </video>

  <ul id="video_navigation">

    <li onclick="videoUrl('https://i.pinimg.com/564x/30/cd/77/30cd77b3532c329568b2029ca4f5f398.jpg')"> <img src="https://i.pinimg.com/564x/30/cd/77/30cd77b3532c329568b2029ca4f5f398.jpg" alt="moon" class="img_video_nav" width="128px" height="128px"/> </li>
    <li onclick="videoUrl('https://i.pinimg.com/564x/bf/36/9b/bf369b962ce5ed2cb5cdd6589327fe28.jpg')"> <img src="https://i.pinimg.com/564x/bf/36/9b/bf369b962ce5ed2cb5cdd6589327fe28.jpg" alt="moon" class="img_video_nav"  width="128px" height="128px"/> </li>
    <li onclick="videoUrl('https://i.pinimg.com/564x/a3/6a/5a/a36a5aa6533b4a1f570eb571bf17f89d.jpg')"> <img src="https://i.pinimg.com/564x/a3/6a/5a/a36a5aa6533b4a1f570eb571bf17f89d.jpg" alt="moon" class="img_video_nav"  width="128px" height="128px"/> </li>
    <li onclick="videoUrl('https://i.pinimg.com/564x/2a/82/23/2a8223502f356fc936398307912b3313.jpg')"> <img src="https://i.pinimg.com/564x/2a/82/23/2a8223502f356fc936398307912b3313.jpg" alt="moon" class="img_video_nav"  width="128px" height="128px"/> </li>

  </ul>

</div>

So that sort of works but my video isn´t loading. – Oct 16 '21 at 09:36 — , Oct 16 '21 at 09:36

How to change a video when I press on a image with onclick?

1 Answers1