im quite a bigginer in js and do not understand, why the following code isnt working.
JS - Code:
function videoUrl(moin)
{
document.getElementById("video_item").src = moin;
}
HTML - Code:
<section id="second">
<div id="slide">
<div id="videos">
<video class="video_item" src="videos\Hair - 43633.mp4" autoplay muted loop> </video>
<!-- <video class="video_item" src="videos\Road - 81676.mp4" autoplay muted loop> </video>
<video class="video_item" src="videos\Skyscrapers - 80724.mp4" autoplay muted loop> </video>
<video class="video_item" src="videos\Tunnel - 84938.mp4" autoplay muted loop> </video> -->
</div>
<ul id="video_navigation">
<li> <img src="image\moon-6616172_1920.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('Hair - 43633.mp4')"> </li>
<li> <img src="image\background-313415.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('Road - 81676.mp4')"> </li>
<li> <img src="image\blue-5457731_1920.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('Skyscrapers - 80724.mp4')"> </li>
<li> <img src="image\adventure-5077752_1920.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('Tunnel - 84938.mp4')"> </li>
</ul>
</div>
</section>
Output:
var video = document.getElementById('video');
function videoUrl(url){
video.pause();
const source = video.querySelector("source");
source.setAttribute('src', url);
video.load();
video.play();
}<div id="videos">
<video class="video_item" id="video" width="320" height="240" autoplay muted loop controls>
<source src="https://imdb-video.media-imdb.com/vi1229043737/1434659607842-pgv4ql-1525282650955.mp4?Expires=1633358484&Signature=oU3FcWKNZz2uAI~mBFOmBvhQ3EAXzZEfWUzRKGCOvFMoVddy5NTm5Px0bUNKhohSRvtS5veQ02lg44jUd5I9FYyHZpEbTIKtBI8~rklmoi6yAV1jprzHRQiazRr1Cx2cfPoT7-EWJ3Psxy6HYfZZFT8StX~udIEw0cIQofLwGyUzRL-OQc-RPWjkY0FSB~9cJbM0hrE-RNrZUwDyZgRk-5vk-t4xHpZJiQ5QR8Hjw1Izg9U0RYdkksnhucaZlX~OF7v-xPuK0y0oObn1TtOSnO4wwxWW8eh7hSj5cu6v8snWRW5IQb4F~0EMwtHqF3X1RoDhe697J8Au7wlLsv1XlA__&Key-Pair-Id=APKAIFLZBVQZ24NQH3KA">
</video>
<!--<video class="video_item" src="videos\Hair - 43633.mp4" autoplay muted loop> </video>-->
</div>
<ul id="video_navigation">
<li> <img src="image\moon-6616172_1920.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('https://imdb-video.media-imdb.com/vi1229043737/1434659607842-pgv4ql-1525282650955.mp4?Expires=1633358484&Signature=oU3FcWKNZz2uAI~mBFOmBvhQ3EAXzZEfWUzRKGCOvFMoVddy5NTm5Px0bUNKhohSRvtS5veQ02lg44jUd5I9FYyHZpEbTIKtBI8~rklmoi6yAV1jprzHRQiazRr1Cx2cfPoT7-EWJ3Psxy6HYfZZFT8StX~udIEw0cIQofLwGyUzRL-OQc-RPWjkY0FSB~9cJbM0hrE-RNrZUwDyZgRk-5vk-t4xHpZJiQ5QR8Hjw1Izg9U0RYdkksnhucaZlX~OF7v-xPuK0y0oObn1TtOSnO4wwxWW8eh7hSj5cu6v8snWRW5IQb4F~0EMwtHqF3X1RoDhe697J8Au7wlLsv1XlA__&Key-Pair-Id=APKAIFLZBVQZ24NQH3KA')"> </li>
<li> <img src="image\background-313415.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('https://imdb-video.media-imdb.com/vi4210998297/1434659607842-pgv4ql-1557169076640.mp4?Expires=1633358564&Signature=kdOmIWItw1tSY3BTzVNLATmRS1RFyf1J-5HjJZPesSrxk50c02E4Mefb8z6B76i7AGsiNRmbXw5mZBn6qv6KY~Ag15voKEVK~6mxmM9N9EV52YXYzYosqK2YfuSmHE-QiwyQt3IeQ41jC1mSFXlh8uqXOXmBMx1vaRLWHU1K2toJmE1vXSycbwwtm6pARUdVnUY5rQcT0vthpdEMvZRQn~58meyUv8Ml8GWNvKZ91~N2Ivu-0czpMJFm4VL71beSXpP6N4b9fVE~1Jp6yslWPFU99o0tVb0GIb8nW6VEGo~xVC300BxDi-EkyJqVrxTq75hzMX8aOq~jM-m-A-WCGg__&Key-Pair-Id=APKAIFLZBVQZ24NQH3KA')"> </li>
<li> <img src="image\blue-5457731_1920.jpg" alt="moon" class="img_video_nav" onclick="videoUrl('https://www.w3schools.com/jsref/movie.mp4')"> </li>
</ul>