Pensé que esto sería más fácil, pero claramente no he tocado JavaScript/HTML en mucho tiempo. Estoy más cerca con el siguiente código para que esto funcione, pero parece que la página web todavía arroja un error:
GET https://newapo.apo.nmsu.edu/media/skywatcher/dailyVids/[date]_24hr.webm net::ERR_ABORTED 404 (Not Found)Entonces, lo siguiente parece no estar funcionando en el "momento" correcto, ya que la alerta que aparece es la cadena correcta.
<script> document.querySelector('#daily').src = document.querySelector('#daily').src.replace('[date]', finalDay); alert(document.querySelector('#daily').src); </script> Más adelante en mi código HTML, quiero usar ese finalDay como parte de un enlace dinámico:
<div class="col-xs-6 col-sm-6"> <p> Video (Last 24Hours): </p> <video width="800" controls="controls" preload="metadata"> <source id="daily" src ="{{ MEDIA_URL }}skywatcher/dailyVids/[date]_24hr.webm#t=0.5" type="video/webm"> </video> </div> Esto está en una plantilla de Django, aunque esta página en particular no está haciendo elementos del lado del servidor. En realidad, el src debería ser:
<source src ="{{ MEDIA_URL }}skywatcher/dailyVids/20220512_24hr.webm#t=0.5" type="video/webm"> Así que no estoy seguro, pensé que podría usar alguna etiqueta especial como {{ }} para que apareciera, pero me di cuenta de que las variables provienen del servidor Django. Con suerte, no tengo que hacer una llamada innerHTML completa para averiguar de alguna manera cuál es la identificación de fuente src, etc.
¿Realmente no hay forma de insertar una variable de JavaScript fácilmente en HTML?
simplemente puede agregar un atributo de identificación a su etiqueta de origen y luego usar:
si agrega este arribute a la etiqueta de origen
<source id = "source">después
finalDay = someCalculatedDate(); const source = document.querySelector("#source"); source.src = `${MEDIA_URL}skywatcher/dailyVids/${finalDay}_24hr.webm#t=0.5`media_url y finalday son variables de javascript
Cambié .toLocaleDateString('en-US') a .toLocaleDateString('en-GB') , olvidé que EE. UU. no rellena con ceros y el Reino Unido sí. La diferencia es:
| Lang-País | Formato | Ejemplo |
|---|---|---|
en-US | D/M/AAAA | 1/1/1970 |
en-GB | DD/MM/AAAA | 01/01/1970 |
.toLocaleDateString('en-GB') , devuelve una cadena: "05/13/2022".split('/') para eliminar todo "/", devuelve una matriz ["05","13","2022"].reverse() para cambiar "05" y "2022" , devuelve una matriz ["2022","13","05"].join('') para combinar la matriz en una sola cadena, devuelve "20221305" const finalDay = function() { const today = new Date(); return today.toLocaleDateString('en-GB').split('/').reverse().join(''); } A continuación, interpole esa cadena de finalDay() en una plantilla literal (una cadena con sintaxis superior):
const url = `${MEDIA_URL}skywatcher/dailyVids/${finalDay()}_24hr.webm#t=0.5`; Desafortunadamente MEDIA_URL es desconocido (¿aún no lo sabe o se olvidó de incluirlo?), por lo que continuaremos con un ejemplo de trabajo. Puede reemplazar la siguiente URL con la anterior si tiene MEDIA_URL o cuando lo tenga:
const vidSrc = document.querySelector('source'); // This is a working example vidSrc.src = `https://glpjt.s3.amazonaws.com/so/av/vid5.mp4`; let MEDIA_URL; const finalDay = function() { const today = new Date(); return today.toLocaleDateString('en-GB').split('/').reverse().join(''); } const url = `${MEDIA_URL}skywatcher/dailyVids/${finalDay}_24hr.webm#t=0.5`; const vidSrc = document.querySelector('source'); // This is a working example vidSrc.src = `https://glpjt.s3.amazonaws.com/so/av/vid5.mp4`; // This is the real src for your OP /* vidSrc.src = url; */ console.log(`This is what the real segment would look like without MEDIA_URL`) console.log(`skywatcher/dailyVids/${finalDay()}_24hr.webm#t=0.5`); <video width="800" controls="controls" preload="metadata"> <source type="video/webm"> </video>