【问题标题】:Background video in Xaringan slidesXaringan 幻灯片中的背景视频
【发布时间】:2020-02-11 08:42:58
【问题描述】:

我正在使用 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>

【问题讨论】:

  • Xaringan 基于remark.js 而不是reveal.js

标签: reveal.js xaringan


【解决方案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 文件位于同一目录中),该文件用于让视频全屏播放。我想您可以将其直接包含在降价中的 css 块中,但我想将其保留在外部。该文件包含:

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

要使其正常工作,请注意,当我在降价中引用视频时,我会包含 id="my_video"

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

【讨论】:

  • 感谢分享!对我来说,当我使用 YouTube 视频时它不起作用
  • 可能它不起作用,因为您链接到的不是 mp4 文件本身的 URL。您是否尝试过使用 vembedr,它专为在 HTML 中嵌入 youtube 视频而设计?
  • 谢谢!我正在尝试在 xaringan 幻灯片中全屏自动播放 YouTube 视频,但到目前为止我一直无法。选项 1-> 工作但不是全屏:&lt;iframe width="1600" height="648" src="https://www.youtube.com/embed/0cXZv-8DiWA" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen&gt;&lt;/iframe&gt; 选项 2 -> 工作但不是全屏:library(vembedr) embed_youtube("0cXZv-8DiWA") %&gt;% use_start_time("10s") %&gt;% use_align("center") %&gt;% use_rounded(10)
  • 选项 3 -> 全屏容器,但没有视频:如答案layout: false &lt;video width="100%" height="100%" controls id="my_video"&gt; &lt;source src="https://www.youtube.com/embed/0cXZv-8DiWA" type="video/mp4"&gt; &lt;/video&gt;
【解决方案2】:

我无法在有限的时间内得到一个完全有效的解决方案,但你可以使用这是一个开始。

remarkxaringan 中已经存在多个问题:
- https://github.com/yihui/xaringan/issues/218
- https://github.com/gnab/remark/issues/322

如果我理解正确,afterInit.html 应该以 &lt;script type='text/javascript'&gt; 开头并以 &lt;/script&gt; 结尾。

---
title: "Presentation Ninja"
subtitle: "⚔<br/>with xaringan"
author: "Yihui Xie"
institute: "RStudio, Inc."
date: "2016/12/12 (updated: `r Sys.Date()`)"
output:
  xaringan::moon_reader:
    includes:
      after_body: "afterInit.html"
    lib_dir: libs
    nature:
      highlightStyle: github
      highlightLines: true
      countIncrementalSlides: false
---

background-image: url(https://upload.wikimedia.org/wikipedia/commons/b/be/Sharingan_triple.svg)

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

---


<iframe width="560" height="315" src="https://www.youtube.com/embed/MWnZ8SoMeHc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

【讨论】:

    猜你喜欢
    • 2019-04-10
    • 2019-01-18
    • 2011-03-26
    • 1970-01-01
    • 2018-12-09
    • 1970-01-01
    • 2012-09-14
    • 2015-12-02
    相关资源
    最近更新 更多