Estoy tratando de construir un sistema de recuperación de video usando etiquetas en Shiny. Pude descifrar la mayoría de sus partes, excepto renderizar los videos en un bucle. Intenté buscar y descubrí que si puedo replicar el siguiente código HTML en la sintaxis brillante de R, me clasificarán con mi código.
TypeError no capturado: no se pueden leer las propiedades de nulo (leyendo 'addEventListener')
CÓDIGO HTML
<html> <head> <video src="http://www.w3schools.com/html/mov_bbb.mp4" id="myvideo" width="320" height="240" controls style="background:black"> </video> <div> <span>ADD in any button or anything here what you want </span> <span> You entire HTML content goes here </span> </div> <script type="text/javascript"> var myvid = document.getElementById('myvideo'); var myvids = [ "http://www.w3schools.com/html/mov_bbb.mp4", "http://www.w3schools.com/html/movie.mp4" ]; var activeVideo = 0; myvid.addEventListener('ended', function(e) { // update the active video index activeVideo = (++activeVideo) % myvids.length; // update the video source and play myvid.src = myvids[activeVideo]; myvid.play(); }); </script> </head> <body> </body> </html>Código brillante equivalente
ui <- navbarPage("", tabPanel("exp",id = 'exp', fluidPage( tags$script(src ="hope.js"), fluidRow("i",uiOutput("vid")) )) ) server <- function(input, output,session) { output$vid <- renderUI({ tags$video(id='myvideo',type = 'video/mp4',src = "http://www.w3schools.com/html/mov_bbb.mp4",controls="controls",controlsList="nodownload",loop = "loop", autoplay ="autoplay",muted="muted") }) } shinyApp(ui, server)¿Alguien podría ayudarme a solucionar este error?
Aquí está el código de trabajo:
library(shiny) ui <- navbarPage("", tabPanel("exp",id = 'exp', fluidPage( fluidRow("i",uiOutput("vid")) )) ) server <- function(input, output,session) { output$vid <- renderUI({ tagList( tags$video( id='myvideo',type = 'video/mp4', src = "http://www.w3schools.com/html/mov_bbb.mp4", controls="controls",controlsList="nodownload", autoplay ="autoplay",muted="muted"), tags$script( ' var myvid = document.getElementById("myvideo"); var myvids = [ "http://www.w3schools.com/html/mov_bbb.mp4", "http://www.w3schools.com/html/movie.mp4" ]; var activeVideo = 0; myvid.addEventListener("ended", function(e) { // update the active video index console.log("Video stopped") activeVideo = (++activeVideo) % myvids.length; // update the video source and play myvid.src = myvids[activeVideo]; myvid.play(); }); ' ) ) }) } shinyApp(ui, server)Estos son los dos puntos clave:
renderUI , el script también debe ingresar en la expresión de representación. No se puede dejar en la interfaz de usuario. El script se ejecutó cuando se construyó la interfaz de usuario, pero aquí queremos esperar hasta que se represente la etiqueta de video .video , no debe usar loop = "loop" . Esto hará que el evento de video "ended" nunca se active (está en bucle, pero no finaliza). En el script, el comportamiento del bucle está controlado por el comando myvid.play() . Consejo adicional: es posible que desee establecer el width y el height de su etiqueta de video . Diferentes videos tienen diferentes dimensiones. Si deja que se configure automáticamente, verá que el tamaño del elemento de video cambia entre videos en su interfaz de usuario. Fijar el ancho y el alto puede brindarles a sus usuarios una mejor experiencia.