我想制作一个闪亮的应用程序，它随机选择两个视频之一，并且仅在视频播放后，才会生成一个单选按钮，询问人们是否观看了该视频。
此代码适用于一个视频，如下所示：
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
uiOutput("video"),
hidden(
radioButtons(
"instructions",
"Have you finished watching the instructions?",
choices = list(
"Yes" = 'finished_instructions'
),
width = '100%',
selected = character(0)
)
)
)
server <- function(input, output) {
output$video <- renderUI({
HTML(
'<html>
<body>
<iframe id="my-iframe"
width="560" height="315"
src="https://www.youtube.com/embed/-CrOeCzMFSQ?si=3pKfFn_AnvVXKASX?&enablejsapi=1"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
></iframe>
<script type="text/javascript">
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player("my-iframe");
player.addEventListener("onStateChange", function(state){
if (state.data === 0) {
document.getElementById("instructions").classList.remove("shinyjs-hide");
}
});
}
</script>
</body>
</html>'
)
})
}
shinyApp(ui, server)
但是，无论我如何编码，当我尝试用多个视频实现这一点时，单选按钮根本不会出现。损坏的代码如下所示 - 视频将填充，但与上面的示例不同，单选按钮永远不会出现。关于如何解决这个问题有什么想法吗？
library(shiny)
library(shinyjs)
ui <- fluidPage(
useShinyjs(),
uiOutput("video"),
hidden(
radioButtons(
"instructions",
"Have you finished watching the instructions?",
choices = list(
"Yes" = 'finished_instructions'
),
width = '100%',
selected = character(0)
)
)
)
server <- function(input, output) {
vec2 <- c(1,2)
arm_condition <- sample(vec2,1)
if (arm_condition == 1){
output$video <- renderUI({
HTML(
'<html>
<body>
<iframe id="my-iframe"
width="560" height="315"
src="https://www.youtube.com/embed/-CrOeCzMFSQ?si=3pKfFn_AnvVXKASX?"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
></iframe>
<script type="text/javascript">
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player("my-iframe");
player.addEventListener("onStateChange", function(state){
if (state.data === 0) {
document.getElementById("instructions").classList.remove("shinyjs-hide");
}
});
}
</script>
</body>
</html>'
)
})}
if (arm_condition == 2){
output$video <- renderUI({
HTML(
'<html>
<body>
<iframe id="my-iframe"
width="560" height="315"
src="https://www.youtube.com/embed/HlYFfFUdPcw?si=v3V_FzhmndmYXJSS"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen
></iframe>
<script type="text/javascript">
var tag = document.createElement("script");
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName("script")[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player("my-iframe");
player.addEventListener("onStateChange", function(state){
if (state.data === 0) {
document.getElementById("instructions").classList.remove("shinyjs-hide");
}
});
}
</script>
</body>
</html>'
)
})
}}
shinyApp(ui, server)
我已经尝试了分配随机运算符、随机选择两个 src 之一的各种版本，但是当有两个以上的视频时，没有任何方法可以让单选按钮出现。我还尝试专门创建“video1”和“instructions1”以及“video2”和“instructions2”，但这也不起作用。
您必须启用
JS?&enablejsapi=1
在视频链接的末尾（请参阅第一个示例）。如果您将其添加到每个链接的扩展示例中，它将起作用。