I am trying to build a video retrieval system using tags on Shiny. I have been able to crack most parts of it, except for rendering the videos in a loop. I tried looking up and found that if I can replicate the following HTML code in R shiny syntax I will be sorted with my code.
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
HTML CODE
<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>
Equivalent Shiny Code
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)
Could someone help me solve this error?
Here is the working code:
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)
Here are the two key points:
renderUI, the script has to go into the render expression as well. You can't leave in the UI. The script is been run when the UI is constructed, but here we want to wait till the video tag is rendered.video tag, you shouldn't use loop = "loop". This will cause the video "ended" event to never be triggered (it's looping, but not ending). In the script, the loop behavior is controlled by myvid.play() command.Bonus tip: you may want to set the width and height of your video tag. Different videos have different dimensions. If you let it set automatically, you will see the video element size changes between videos on your UI. Fixing the width and height may give your users a better experience.