在 R Shiny 中观察另一个事件时控制嵌入的 YouTube 视频

Question

我有一个 R Shiny 应用程序。 UI 有一个嵌入的 YouTube 视频，以及一个简单的图像。我希望能够暂停嵌入的视频并通过单击我的图像而不是视频再次播放，或者单击为此目的专门添加的操作按钮。我已经看到使用 JavaScript 可以做到这一点。不幸的是，我还没有走多远。

我目前的可重现代码如下：

library(shiny)
library(shinyjs)
library(shinydashboard)

ui <- 
  dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      useShinyjs(),
      fluidPage(uiOutput("video")),
      img(id = 'image', src = 'http://www.zorro.com/wp-content/uploads/2014/04/005.jpg'),
      
    )
  )

server <- function(input, output, session){
  
  onclick(id = 'image', function(x) {
    tags$script('function () {
                player.playVideo();}')})
  
  output$video <- renderUI({
    HTML('<iframe width = "100%" height = "250" src = "https://www.youtube.com/embed/oW2c4KBLIeE" frameborder="0" allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>') 
  })
}
shinyApp(ui, server)

编辑：This webpage 做了我想用 R Shiny 做的事情（play/pause 部分）

Answer 1

如果有人需要的话，我找到了我自己的问题的答案： javascript 代码仅包含在服务器部分。我在 UI:

中包含了 onclick 事件

library(shiny)
library(shinyjs)
library(shinydashboard)

ui <- 
  dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      useShinyjs(),
      fluidPage(uiOutput("video")),
      img(id = 'image', src = 'http://www.zorro.com/wp-content/uploads/2014/04/005.jpg', onclick = 'myFunction()'),
      
    )
  )
output$video <- renderUI({
HTML('<div id="player"></div>
           
       <script>
       
       var tag = document.createElement("script");
       
       tag.src = "https://www.youtube.com/iframe_api";
       var firstScriptTag = document.getElementsByTagName("script")[0];
       firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
       
       var player;
       function onYouTubeIframeAPIReady() {
       player = new YT.Player("player", {
       height: "390",
       width: "640",
       videoId: "', input$modal_youtube_link, '" 
       playerVars: { "autoplay": 1, "modestbranding": 1 },
       events: {}
       });
       }
       var myFunction = function(){
       player.playVideo();
       
       </script>')})

shinyApp(ui, server)

在 R Shiny 中观察另一个事件时控制嵌入的 YouTube 视频

Controlling an embedded YouTube video when observing another event in R Shiny

javascript

youtube-api

youtube-javascript-api

shiny

shinyjs