如何在 Shiny 中完成嵌入式视频之前禁用操作按钮

Question

我正在构建一个包含嵌入式视频和音频文件的应用程序。我有让用户向前导航的操作按钮，但我需要它们变灰，直到嵌入的视频/音频完成。

对于需要用户输入的东西，我发现使用启用/禁用/切换和 shinyjs 很容易做到这一点，但我找不到使用嵌入式文件来完成它的方法。我想我可以用 observeEvent 做点什么，但我不知道观察到的事件是什么——视频整理是否在某处有一个独特的隐藏 id？

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)

这可能也是可以用javascript排序的东西，但我没有这方面的经验。

任何帮助将不胜感激！

编辑

本例中的视频嵌入与我在代码中嵌入的不同，只是为了保持它的可重现性。我保存了我嵌入的 mp4 文件，而不是 youtube 链接。

Answer 1

一个

iframe

有一个

load

事件。这有效，但视频加载很快，所以不容易看到：

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)