How to embed videos in Shiny

shiny
,
1

I would like to embed a short mp4 video from Google Drive into my Shiny App.

Here is my UI:

ui <- navbarPage(strong("Balltistics - 2018"), 
                 theme = shinytheme("yeti"),
                 collapsible = T,
                 sidebarLayout(
                   sidebarPanel(
                     selectInput(inputId = "dataset",
                                 label = "Select Dataset:",
                                 choices = c("NBA Players 2018",
                                             "NBA Teams 2018",
                                             "NBA 4th Quarter Lineups",
                                             "WNBA Players 2018",
                                             "WNBA Teams 2018",
                                             "WNBA 4th Quarter Lineups")),
                     hr(),
                     
                     selectInput(inputId = "stat",
                                 label = "Select Stat of Interest:",
                                 choices = ""),
                     
                     hr(),
                     
                     h3("Stuck? Here's some instructional videos!", br()),
                     
                     a(href = "https://drive.google.com/open?id=1EogQ_56J2YpgOhFH86uHbU2j7NIgCEH7",
                       "Balltistics Instructional Video (Teams)"),
                     
                     br(),
                     
                     a(href = "https://drive.google.com/open?id=1ZNaitSfW7mm4wEB4RGVLS4oI12rDdAmS",
                       "Balltistics Instructional Video (Lineups)"),
                     
                     br(),
                     
                     a(href = "https://drive.google.com/open?id=1e-mJv28kznxqVIadm-LYq4lLUnGHq9NH",
                       "Balltistics Instructional Video (Players)")),
                   
                   mainPanel(
                     h4("Data Snippet"),
                     tableOutput("table"),
                     #verbatimTextOutput("fields"),
                     shiny::tags$video(src = "Brush Tool Gif.mp4",
                                type = "video/mp4"))),
                 
                 tabPanel("Graphs", icon = icon("bar-chart-o"),
                          h2("Team Graphs"),
                          plotOutput("barplot"),
                          hr(),
                          h2("Lineup Graphs"),
                          plotOutput("scatter", brush = brushOpts(id = "plot_brush")),
                          h4("Brush the plot to view lineups of interest"),
                          sliderInput(inputId = "avg_pm",
                                      label = "Set Range for Plus/Minus Score",
                                      value = c(0,10), min = min(wnba_q4_lineups$PLUS_MINUS),
                                      max = max(wnba_q4_lineups$PLUS_MINUS)),
                          hr(),
                          
                          fluidRow(verbatimTextOutput("brush_info")),
                          h2("Player Graphs"),
                          plotOutput("scatter2", brush = brushOpts(id = "plot_brush2")),
                          h4("Brush the plot to view players of interest"),
                          fluidRow(verbatimTextOutput("brush_info2"))),
                 
                 tabPanel("Full Data Table", icon = icon("table"),
                          DT::dataTableOutput("fullTableDT")))

I'm wondering if I've placed the video incorrectly? Does it not show up because it's in the Main Panel? Or is it because its not saved properly?

Please help!

2

This simpler reprex works:

library(shiny)
ui <- fluidPage(
  HTML('<iframe width="560" height="315" src="https://www.youtube.com/embed/T1-k7VYwsHg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>')
)
server <- function(input, output, session) {
}
shinyApp(ui, server)

So it's not something general to Shiny.

3

There's also tags$iframe():

library(shiny)
ui <- fluidPage(
    tags$iframe(width="560", height="315", src="https://www.youtube.com/embed/T1-k7VYwsHg", frameborder="0", allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture", allowfullscreen=NA)
)
server <- function(input, output, session) {
}
shinyApp(ui, server)
4

So, I'm seeing a pattern that the best practice is to simply use HTML and iframes. Am I right?

Also, I tried to put this video

https://drive.google.com/drive/folders/1VDslSm_Hm0Iz14_hlosP5QFzsoric-PO

into the app and it shows the space where the video would pop up, but it doesn't play. I know the video is saved in Google drive. Is that a problem?

And thank you Hadley for responding, you're a legend!

5

I wouldn't say it's best practice, just that it confirms it is at least possible to embed a video, so it's not a general problem with videos + shiny. Unfortunately I don't understand how video streaming works on the web these days, but I would be surprised if just linking to a file on google drive works.

6

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.