Soy un novato en JS y he escrito algo de código pero no funciona.
Quiero cambiar el video en el fondo, cuando hago clic en una imagen.
Aquí está mi código:
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; }Gracias de antemano.
No configure src en la etiqueta de video directamente .
En su lugar, use una etiqueta <source src="foo"> dentro de la etiqueta de video. ¿Etiqueta de video HTML5 sin fuente?
Usé video.poster para mostrar la prueba .
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>