reveal.js - Xaringan 幻灯片中的背景视频

Question

我正在使用 Xaringan 编写演示文稿。我想嵌入视频，这样当我转换到包含视频的幻灯片时，它会自动全屏播放。 (即，我不想必须点击视频才能播放)。

我可以使用 revealjs 实现我想要的:

## {data-background-video="my_video.mp4"}

但我已经花了大约 30 个小时在 Xaringan 中编写演示文稿，包括一些自定义 css 样式(我是一个完整的 css 新手)所以我不想转换为 revealjs(尤其是因为我没有使用过 revealjs除了测试上述内容之外)。

在 Xaringan 中是否有等效项？鉴于它基于 revealjs，我认为这是可能的，但尽管在互联网上花费了很多时间，但我无法弄清楚如何实现。

或者，有没有办法通过键盘按键激活非全屏视频。例如，像播放视频的增量步骤:

这行不通。它在按键时播放音频但不播放视频:

---
--
<video width="100%" height="100%" controls>
    <source src="media/my_video.mp4" type="video/mp4">
</video>
---

这会在演示文稿开始时播放音频(不是我想要的幻灯片)并且没有视频(可能是因为我在第一张幻灯片上设置了背景图片):

<video width="100%" height="100%" autoplay>
    <source src="media/my_video.mp4" type="video/mp4">
</video>

Answer 1

感谢@pat-s 和他链接到的页面，我可以正常工作。如果它对其他人有帮助，这里有一个可以在幻灯片切换时自动播放音频和视频(全屏)的最小工作示例。

R Markdown 是:

title: "Video Example"
author: "Andy Field"
output:
  xaringan::moon_reader:
    css: ["default", "my_styles.css"]
    includes:
      after_body: "afterInit.html"

---

# Minimal example of autoplaying audio and fullscreen video 

## Andy Field

```{r setup, include=FALSE}
options(htmltools.dir.version = FALSE)
```

---
class: inverse
background-image: url("http://www.metalmusicarchives.com/images/covers/dio-killing-the-dragon-20160817062111.jpg")
background-size: cover

<audio controls>
  <source src="http://www.discoveringstatistics.com/repository/misc/dio_killing_the_dragon.mp3" type="audio/mpeg">
  <source src="http://www.discoveringstatistics.com/repository/misc/dio_killing_the_dragon.ogg" type="audio/ogg"/>
</audio>


.center[Here's the audio.

It is a song by the band Dio.

Like many of their songs, it involves a dragon.

Next up, video.]

---
layout: false

<video width="100%" height="100%" controls id="my_video">
    <source src="http://www.discoveringstatistics.com/repository/misc/shrek_burp.mp4" type="video/mp4">
</video>

请注意，YAML 包含对名为“afterInit.html”的文件的引用，该文件(在本例中)与 markdown 存储在同一目录中。该文件包含以下内容:

<script type='text/javascript'>

var slideElements

  function getElementForSlide(slide) {
    slideElements = slideElements || document.querySelectorAll('.remark-slide')
    return slideElements[slide.getSlideIndex()]
  }

  slideshow.on('showSlide', function (slide) {
    Array.from(getElementForSlide(slide).querySelectorAll('video, audio')).forEach(function (vid) {
      vid.loop = false
      vid.currentTime = 0
      vid.play()
    })
  })

  slideshow.on('hideSlide', function (slide) {
    Array.from(getElementForSlide(slide).querySelectorAll('video, audio')).forEach(function (vid) {
      vid.pause()
    })
  })

</script>

YAML 还调用名为“my_styles”的 css 文件(也在与 markdown 文件相同的目录中)，该文件用于让视频全屏播放。我猜你可以将其直接包含在 markdown 中的 css block 中，但我想将其保留在外部。该文件包含:

#my_video {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
  width: 100%;
}

要使其正常工作，请注意，当我在 Markdown 中引用视频时，我包含了 id="my_video"。

当演示文稿在 Firefox 中全屏显示时，这对我有用。