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.
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?
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>