Soy bastante grande en js y no entiendo por qué el siguiente código no funciona.
JS - Código:
function videoUrl(moin) { document.getElementById("video_item").src = moin; }Código HTML:
<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>Producción:
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-mA-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>