How to disable an actionbutton until embedded video is complete in Shiny

Question

I'm building an app which includes embedded video and audio files. I've got action buttons that let users navigate forwards, but I need them to be greyed out until the embedded video/audio is complete.

With things that require user input I find this easy enough to do with enable/disable/toggle and shinyjs, but I can't find a way to do it with embedded files. I imagine I could do something with observeEvent, but I don't know what the observed event would be - does a video finishing have a unique hidden id somewhere?

library(shiny)
ui <- fluidPage(
  HTML('<iframe width="560" height="315" src="https://www.youtube.com/embed/Hrc1WrC8ihE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'), #random youtube video without copyright
  br(),
  br(),
  actionButton("test", "test") #need this disabled out until the video is complete
)
server <- function(input, output, session) {
}
shinyApp(ui, server)

It's probably something that could be sorted with javascript too, but I have no experience there.

Any help would be appreciated!

Edit

The video embedding in this example is different to what I've got in my code just to keep it reproducible. I have saved mp4 files that I'm embedding, not youtube links.

Answer 1

An iframe has a load event. This works but the video is quickly loaded so it's not easy to see:

library(shiny)

js <- "
$(document).ready(function() {
  $('#thebutton').prop('disabled', true);
  $('iframe').on('load', function() {
    $('#thebutton').prop('disabled', false);
  });
});
"

ui <- fluidPage(
  tags$head(
    tags$script(HTML(js))
  ),
  HTML('<iframe width="560" height="315" src="https://www.youtube.com/embed/Hrc1WrC8ihE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>'), #random youtube video without copyright
  br(), br(),
  actionButton("thebutton", "test") 
)

server <- function(input, output, session) { }

shinyApp(ui, server)