Фоновое видео в слайдах Xaringan - PullRequest
Новая
       34

Фоновое видео в слайдах Xaringan

0 голосов
/ 14 октября 2019

Я пишу презентацию, используя Xaringan. Я хочу встроить видео таким образом, чтобы при переходе к слайду, содержащему видео, оно автоматически воспроизводилось в полноэкранном режиме. (т. е. я не хочу нажимать на видео, чтобы воспроизвести его).

Я мог бы добиться того, чего хочу, используякарты с: 

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

, но я потратил около30 часов на написание презентации на Xaringan, включая некоторые пользовательские стили CSS (я начинающий CSS), поэтому я не хочу конвертировать в revejs (тем более, что я не использовалкартную трансляцию, кроме как для проверки вышеупомянутого).

Есть ли эквивалент в Xaringan? Учитывая, что это основано на раскрытии, я предполагаю, что это возможно, но, несмотря на многие часы в Интернете, я не могу понять, как.

В качестве альтернативы, есть ли способ активировать не полноэкранное видео с помощью нажатия на клавиатуре. Например, как пошаговый шаг воспроизведения видео:

Это не работает. Он воспроизводит звук при нажатии клавиш, но не видео: 

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

Ответы [ 2 ]

0 голосов
/ 15 октября 2019

Благодаря @ 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, который (в данном случае) хранится в том же каталоге, что и уценка. Этот файл содержит следующее: 

<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 также вызывает файл css с именем 'my_styles' (также в том же каталоге, что и файл уценки), который используется для воспроизведения видео в полноэкранном режиме. Я полагаю, вы могли бы включить это в блок CSS прямо в уценке, но я хотел оставить его внешнимФайл содержит: 

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

Чтобы заставить это работать, обратите внимание, что когда я ссылаюсь на видео в уценке, я включаю id="my_video".

Это работает для меня, когда презентация находится вполноэкранный в Firefox.

0 голосов
/ 15 октября 2019

Я не смог получить полностью работающее решение за ограниченное время, но вы можете использовать это только для начала.

Есть несколько проблем по этому поводу, как в remark, так и xaringan:
- https://github.com/yihui/xaringan/issues/218
- https://github.com/gnab/remark/issues/322

afterInit.html должно начинаться с <script type='text/javascript'> и заканчиваться </script>, если я правильно понимаю. 

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