Shiny：无法渲染 js 文件答案

【问题标题】：Shiny: unable to render a js fileShiny：无法渲染 js 文件
【发布时间】：2022-01-08 06:01:23
【问题描述】：

我正在尝试使用 Shiny 上的标签构建视频检索系统。我已经能够破解它的大部分内容，除了循环渲染视频。我尝试查找，发现如果我可以用 R 闪亮语法复制以下 HTML 代码，我将使用我的代码进行排序。

未捕获的 TypeError：无法读取 null 的属性（正在读取 'addEventListener'）

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>

等效闪亮代码

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)

有人可以帮我解决这个错误吗？

【问题讨论】：

hope.js 中的内容
var myvid = document.getElementById('myvideo'); var myvids = [ "w3schools.com/html/mov_bbb.mp4", "w3schools.com/html/movie.mp4" ]; var activeVideo = 0; myvid.addEventListener('ended', function(e) { // 更新活动视频索引 activeVideo = (++activeVideo) % myvids.length; // 更新视频源并播放 myvid.src = myvids[activeVideo]; myvid .play(); })

标签： javascript r shiny

【解决方案1】：

这是工作代码：

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)

这里有两个关键点：

如果你想使用renderUI，脚本也必须进入渲染表达式。你不能离开用户界面。该脚本在构建 UI 时运行，但这里我们要等到呈现 video 标记。
在video 标记中，您不应使用loop = "loop"。这将导致视频"ended" 事件永远不会被触发（它正在循环，但没有结束）。在脚本中，循环行为由myvid.play() 命令控制。

额外提示：您可能需要设置video 标签的width 和height。不同的视频有不同的尺寸。如果你让它自动设置，你会在你的 UI 上看到视频元素大小的变化。固定宽度和高度可能会给您的用户带来更好的体验。

【讨论】：

感谢您提供宝贵的技巧和基础知识 :)