Buscando un código que pueda ayudarme a resolver la pregunta anterior usando solo HTML, css, javascript.
Me ayudaría mucho, gracias de antemano.
set urlPath es una ruta de su tienda de videos en el argumento de la función changeSrc :
const video = document.querySelector('#video') const source = document.querySelector('#source') function changeSrc(urlPath) { video.pause(); source.setAttribute('src', urlPath); source.setAttribute('type', 'video/mp4'); video.load(); video.play(); } div { display: flex; flex-direction: column; } button{ width: 200px } <div> <button onclick="changeSrc('https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4')">Click to change video</button> <video id="video" width="320" height="240" controls autoplay> <source id= "source" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4"> </video> </div>Espero que esto te ayude mucho.
function loadTheVideo() { //alert(URL.createObjectURL(document.getElementById("file").files[0])); document.getElementById("video").src = URL.createObjectURL(document.getElementById("file").files[0]); document.getElementById("video").play(); } video { width: 400px; height: 400px; border: 1px solid black; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <video controls id="video"></video> <br> <input onchange="loadTheVideo()" type="file" id="file" name="file"> </body> </html>