- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 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>
最佳答案
感谢@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 中全屏显示时,这对我有用。
关于reveal.js - Xaringan 幻灯片中的背景视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58381602/
我是一名优秀的程序员,十分优秀!