Управление встроенным видео YouTube при наблюдении за другим событием в R Shiny - PullRequest
Новая
       97

Управление встроенным видео YouTube при наблюдении за другим событием в R Shiny

1 голос
/ 09 июля 2020

У меня есть приложение R Shiny. Пользовательский интерфейс имеет встроенное видео 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)

EDIT: Эта веб-страница делает то, что я хотел бы сделать с R Shiny (часть воспроизведения / паузы)

1 Ответ

0 голосов
/ 10 июля 2020

Я нашел ответ на свой вопрос, если он кому-то понадобится: код javascript должен был быть включен только в серверную часть. Я включил событие 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)
...