感谢@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 中全屏显示时,这对我有用。