Получить текущее время Youtube видео, встроенного в блестящее приложение - PullRequest
Новая
       11

Получить текущее время Youtube видео, встроенного в блестящее приложение

0 голосов
/ 03 июля 2019

Я пытаюсь сохранить текущее время встроенного видео YouTube в блестящем приложении по нажатию кнопки. В конце концов я хотел бы иметь возможность вернуть данные этого времени в свою среду R, но сейчас я просто борюсь с тем, как использовать API YouTube в блестящем.

Я знаю по API YouTube и по этому вопросу, что вы можете узнать текущее время встроенного видео YouTube. Но когда я обертываю это видео в интерфейсе Shiny, у него есть класс глянцевый-html-выход глянцевый-выходной , и я не могу найти элемент нижнего уровня, который соответствует управляемому видео YouTube, по API. 

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs()

  ,titlePanel("Hello Shiny!")

  ,sidebarLayout(

    sidebarPanel(
      actionButton("button", "Capture Video Time")
    ),

    mainPanel(
      uiOutput("video")
    )
  )
)

server <- function(input, output) {

  output$video <- renderUI({
    HTML('<iframe width="560" height="315" src="https://www.youtube.com/embed/FR4QIeZaPeM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>')
  })

  observeEvent(input$button, {
    runjs(
      "ytplayer = document.getElementById('video');
      var time = ytplayer.getCurrentTime();
      alert(time);"
    )
  })
}

shinyApp(ui = ui, server = server)

Я ожидаю, что когда я нажму кнопку в приложении Shiny, появится окно с текущим временем видео на YouTube, но вместо этого ничего не произойдет. Так что моя самая большая потребность в том, чтобы получить этот код javascript прямо внутри функции runjs() (или что-то еще, если runjs() здесь не подходит), чтобы я мог реально найти время проигрывателя видео. Если у вас есть какое-то понимание того, как вернуть текущее значение времени в мою среду R, это также будет оценено, но я, вероятно, смогу разобраться с этой частью, как только схожу по правильному пути. Большое спасибо заранее!

1 Ответ

0 голосов
/ 08 июля 2019

Я смог понять это сам. Проблема заключалась в том, что я неправильно настроил API iframe для YouTube. Как только я это понял, остальная часть кода заработала так, как я и ожидал. Для справки здесь - документация по API iframe YouTube.

Мой рабочий код выглядит следующим образом: 

library(shiny)
library(shinyjs)

ui = shinyUI(fluidPage(
  useShinyjs(),
  headerPanel("New Application"),
  sidebarPanel(
    actionButton("getTime","Get Video Time")
  )
  ,mainPanel(
    uiOutput("video")
  )
))

server = function(input, output) {

  output$video <- renderUI({
    HTML(
      '<html>
        <body>
          <iframe id="existing-iframe"
              width="640" height="360"
              src="https://www.youtube.com/embed/fmuUQCB3pAE?enablejsapi=1"
              frameborder="0"
          ></iframe>

          <script type="text/javascript">
            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(\'existing-iframe\');
            }
          </script>
        </body>
      </html>'
    )
  })

  observeEvent(input$getTime,{
    runjs("alert(player.getCurrentTime())")
  })
}

shinyApp(ui = ui, server = server)

Обратите внимание, что основное различие заключается в оболочке HTML (), начинающейся в строке 18. Я настроил iframe таким же образом, но с id="existing-iframe" и enablejsapi=1 внутри URL. Затем мне понадобился тег <script> ниже, который содержал весь код JavaScript, необходимый для того, чтобы приложение распознало, что я использую API iframe YouTube. Я также очистил код внутри оболочки runjs () в строке 44.

...