Shiny：无法渲染 js 文件

Posted 2023-03-24

技术标签:

【中文标题】Shiny：无法渲染 js 文件【英文标题】：Shiny: unable to render a js file 【发布时间】：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"   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(); ) 【参考方案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

video

loop = "loop"

"ended"

myvid.play()

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

【讨论】：

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

以上是关于Shiny：无法渲染 js 文件的主要内容，如果未能解决你的问题，请参考以下文章

在 Shiny 上渲染或下载动画 GIF

Shiny modal 中的handsontable 无法正确渲染