I thought this would be easier, but clearly I haven't touched JavaScript/HTML in a long time. I am closer with the following code to getting this to work, yet it seems like webpage still throws an error:
GET https://newapo.apo.nmsu.edu/media/skywatcher/dailyVids/[date]_24hr.webm net::ERR_ABORTED 404 (Not Found)
So the following seems to just not be working at the right 'time' as the alert that pops up is the correct string.
<script>
document.querySelector('#daily').src = document.querySelector('#daily').src.replace('[date]', finalDay);
alert(document.querySelector('#daily').src);
</script>
Later in my HTML code I want to use that finalDay as part of a dynamic link:
<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>
This is in a Django template though this particular page is doing no server side items. In reality the src should be:
<source src ="{{ MEDIA_URL }}skywatcher/dailyVids/20220512_24hr.webm#t=0.5" type="video/webm">
So not sure, I thought I could use some special tag like {{ }} to have it show up but realized that is variables coming FROM the Django server. Hopefully I don't have to do a whole innerHTML call figuring out somehow what that source src id is etc...
Is there really no way to insert a JavaScript variable easily into HTML?
you could simply add an id attribute to your source tag, then use:
if you add this arribute to source tag
<source id = "source">
then
finalDay = someCalculatedDate();
const source = document.querySelector("#source");
source.src = `${MEDIA_URL}skywatcher/dailyVids/${finalDay}_24hr.webm#t=0.5`
media_url and finalday are javascript variable
Changed .toLocaleDateString('en-US') to .toLocaleDateString('en-GB'), I forgot US doesn't pad with zeros and the UK does. The difference is:
| Lang-Country | Format | Example |
|---|---|---|
en-US |
D/M/YYYY | 1/1/1970 |
en-GB |
DD/MM/YYYY | 01/01/1970 |
.toLocaleDateString('en-GB'), returns a string: "05/13/2022".split('/') to remove all "/", returns an array ["05","13","2022"].reverse() to switch "05" and "2022" around, returns an array ["2022","13","05"].join('') to combine the array into a single string, returns "20221305"const finalDay = function() {
const today = new Date();
return today.toLocaleDateString('en-GB').split('/').reverse().join('');
}
Next, interpolate that string from finalDay() into a template literal (a string with superior syntax):
const url = `${MEDIA_URL}skywatcher/dailyVids/${finalDay()}_24hr.webm#t=0.5`;
Unfortunately MEDIA_URL is unknown (either you don't know it yet or you forgot to include it?), so we will continue with a working example. You can replace the following url with the one above if or when you have MEDIA_URL:
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>