let's add a feature - video channel autoplay at timestamp
let's build a new feature for the video channel (･‿･✿)
for this feature, the video channel should be able to autoplay video at a timestamp when specified in a URL.
example: if i access the URL https://fbacarisas.xyz/video/index.html#2233_figure&1:13, it should play the video with the id of '2233_figure' starting at the time '1:13'
currently, the website has the ability to render a video from the URL and it has a function to play a video at a timestamp. however, the channel only interprets the URL's hash value as a single value; it will need to interpret multiple values as i am looking to pass in both the video_id and the timestamp
currently the query is taken from the hash of the URL and then a video is rendered based on if the hash matches a video id. if we try to pass in a hash of 2233_figure&1:13, it will literally try to render a video with an id of 2233_figure&1:13 which does not exist; let's try to allow the hash to support a timestamp parameter
in this case we are looking to use the "&" character to delimit parameters (i.e. separate the video_id and the timestamp). therefore, the timestamp and video_id values themselves should not have an "&" character to avoid unexpected interpretation of the parameters.
we know the timestamp won't use this character (it just uses numbers and colon), but do any of the current video_id's in the channel have "&"? fortunately, when planning out the video channel, i used the standard of including only dash and underline as special characters for video_id. i did a double-check of the file just in case though, and it looks okay ("&" is not in the video_id, only in the title and description values).
to standardize query interpretation in case of future feature building, i moved the query-related code from the main function at the end to the initialization at the start.
the query is now treated in a global variable context and the logic for interpreting the query (if it is present) is moved to the start.
we can now see from the initialization that it parses the parameters from the hash and assigns it to "videoName" and "startTime" which is exactly what is required for the new feature
with "videoName" and "startTime" initialized, let's use the existing playVideoAtTime function to autoplay video at a timestamp from a URL
let's try the feature now. we can see that the video can still render and move to the specified time; also the query has been parameterized correctly based on the assigned values to the global variables.
uh oh, but it looks like there's an unexpected error: Uncaught (in promise) NotAllowedError: play() failed because the user didn't interact with the document first.; let's try to resolve this
on further reading, i found that playing video automatically after loading shouldn't play audio. i am guessing this is probably for user experience as a user may not be expecting audio to play right away after accessing a URL
to resolve this error, let's mute the video's audio when autoplaying the video on loading from a URL
we set a global variable to indicate if the video should autoplay
we know that the video should autoplay after rendering the video
if the video should autoplay, the video element is muted and then played
looks like the error is resolved; the feature now works as expected 🎉
here are some URL examples to demonstrate the new feature: