在R中创建带可点击视频表格的HTML输出问题求助

问题分析 #

之前的方案存在几个关键问题：

• DT对象直接转字符会丢失组件结构，无法正确渲染表格
• 视频iframe设置了display:none导致无法显示
• JS中rowData索引错误（JS数组从0开始，P列对应rowData[0]而非rowData[1]）
• 本地路径未使用相对路径，分享后他人无法访问视频

方案一：纯R脚本生成独立HTML #

直接用DT和htmltools生成可分享的HTML，确保表格和视频正常渲染：

library(DT)
library(htmltools)
library(tidyverse)

# 读取数据
data <- read_csv("path/to/data.csv") %>%
  head(8) %>%
  mutate(P = 1:8) %>%
  select(P, Pitcher, TaggedPitchType, RelSpeed, Tilt, SpinRate,
         InducedVertBreak, HorzBreak, Extension, RelHeight, RelSide)

# 生成可交互表格
datatable_obj <- datatable(
  data,
  rownames = FALSE,
  options = list(pageLength = 10),
  callback = JS("
    // 点击行触发视频加载
    table.on('click.dt', 'tr', function() {
      var rowData = table.row(this).data();
      var videoElement = document.getElementById('video_player');
      // 视频文件夹需和HTML文件同级，用相对路径
      var videoPath = './videos/' + rowData[0] + '.mp4';
      videoElement.src = videoPath;
      // 自动播放（部分浏览器需用户手动允许）
      videoElement.play();
    });
  ")
)

# 创建视频播放容器（替换隐藏iframe）
video_container <- tags$div(
  style = "margin-top:20px; width:640px; height:360px;",
  tags$video(
    id = "video_player",
    controls = TRUE,
    style = "width:100%; height:100%;",
    tags$source(src = "", type = "video/mp4")
  )
)

# 组合表格和视频容器，保存为HTML
save_html(
  tagList(datatable_obj, video_container),
  file = "bullpen_report.html"
)

注意事项 #

• 路径设置：创建videos文件夹，把所有.mp4视频放入其中，确保该文件夹和生成的bullpen_report.html在同一目录下
• 兼容性：部分浏览器会阻止自动播放，需用户点击视频控件启动播放
• 分享方式：将HTML文件和videos文件夹一起打包发给他人

方案二：RMarkdown生成HTML报告 #

如果需要带标题和说明文档，用RMarkdown更合适，修正后的代码如下：

---
title: "Baseball Bullpen Report"
output: html_document
---

```{r setup, include=FALSE}
knitr::opts_chunk$set(echo = FALSE)
library(DT)
library(htmltools)
library(tidyverse)

data <- read_csv("path/to/data.csv") %>%
  head(8) %>%
  mutate(P = 1:8) %>%
  select(P, Pitcher, TaggedPitchType, RelSpeed, Tilt, SpinRate,
         InducedVertBreak, HorzBreak, Extension, RelHeight, RelSide)

投球数据表格 #

点击任意行查看对应投球视频：

datatable(
  data,
  rownames = FALSE,
  options = list(pageLength = 10),
  callback = JS("
    table.on('click.dt', 'tr', function() {
      var rowData = table.row(this).data();
      var videoElement = document.getElementById('video_player');
      var videoPath = './videos/' + rowData[0] + '.mp4';
      videoElement.src = videoPath;
    });
  ")
)

视频播放区 #

注意事项 #

• 同样需要在RMarkdown生成的HTML文件同级目录下创建videos文件夹存放视频
• 渲染后直接分享生成的HTML文件和videos文件夹即可

内容的提问来源于stack exchange，提问作者MichaelSampson123