温馨提示:本文翻译自stackoverflow.com,查看原文请点击:javascript - Get Current Time of Youtube Video Embedded in a Shiny app

javascript - 获取嵌入在有光泽的应用程序中的YouTube视频的当前时间

发布于 2020-03-27 10:49:35

我想在单击按钮时将嵌入式YouTube视频的当前时间存储在一个闪亮的应用程序中。最终,我希望能够将这些时间数据带回到我的R环境中,但是现在,我只是在努力使用闪亮的YouTube API。

I know from looking at the YouTube API and from this question that you can get the current time of an embedded YouTube video. But when I wrap that video in the Shiny interface, the video has class shiny-html-output shiny-bound-output and I can't seem to find the underyling element that corresponds to the YouTube video that's controllable by the 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)

What I expect is that when I click the button in the Shiny app, a window should pop up with the current time of the YouTube video, but instead nothing happens. So what my biggest need is to get that javascript code right inside the runjs() function (or something else if runjs() isn't appropriate here) so that I can actually find the video player's time. If you have any insight on how to bring that current time value back into my R environment it would be appreciated as well, but I can probably figure that part out once I get on the right track with this. Thanks so much in advance!

查看更多

查看更多

提问者
Pete M
被浏览
15
Pete M 2019-07-09 01:26

我自己就能弄清楚。问题是我没有正确设置YouTube iframe API。一旦实现,其余的代码就会按我预期的那样工作。仅供参考这里是在YouTube的iframe API的文档。

我的工作代码如下:

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)

请注意,主要区别在于从第18行开始的HTML()包装器内部。我以相同的方式设置了iframe,但在URL内id="existing-iframe"同时进行enablejsapi=1了设置。然后,我需要<script>下面标记,该标记具有使应用程序识别出我在使用YouTube iframe api所需的所有JavaScript代码。我还清理了第44行的runjs()包装器中的代码。

发布
问题

分享
好友

手机
浏览

扫码手机浏览