Background video in Xaringan slides

user_4057750 0
Viewed 936

I'm writing a presentation using Xaringan. I want to embed video such that when I transition to the slide containing the video it plays automatically in fullscreen. (i.e., I do not want to have to click on the video to play it).

I could achieve what I want using revealjs with:

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

but I've spent about 30 hours writing the presentation in Xaringan, including some custom css styles (I'm a complete css novice) so I don't want to convert to revealjs (especially as I haven't used revealjs other than to test the above).

Is there an equivalent in Xaringan? Given it's based on revealjs I assume it's possible but despite many hours on the internet I can't work out how.

Alternatively, is there a way to activate non-fullscreen video from a keyboard press. For example, like an incremental step that plays the video:

This doesn't work. It plays the audio upon a keypress but not the video:

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

This plays the audio at the start of the presentation (not from the slide I want) and there's no video (possibly because I have a background image set up on the first slide):

<video width="100%" height="100%" autoplay>
    <source src="media/my_video.mp4" type="video/mp4">
</video>
reveal.js xaringan
2 Answers

Thanks to @pat-s and the pages to which he linked, I have this working. In case it helps others, here's a working minimal example that autoplays audio and video (in fullscreen) upon slide transition.

The R Markdown is:


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>

Note that the YAML includes a reference to a file called "afterInit.html", which (in this case) is stored in the same directory as the markdown. This file contains the following:

<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>

The YAML also calls on a css file called 'my_styles' (also in the same directory as the markdown file), which is used to get the video to play fullscreen. I guess you could include this in a css chunk directly in the markdown, but I wanted to keep it external. The file contains:

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

To get this to work, note that when I reference a video in the markdown I include id="my_video".

This works for me when the presentation is in fullscreen in Firefox.

user_40577500

I couldn't get a fully working solution in limited time, but you can use this is a start.

There are multiple issues already about this, both in remark and xaringan:
- https://github.com/yihui/xaringan/issues/218
- https://github.com/gnab/remark/issues/322

afterInit.html should start <script type='text/javascript'> and end with </script> if I understand correctly.

---
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>
user_41857850
Related