html - 在 xaringan 幻灯片的全屏模式下如何更改内容位置

Question

我正在录制一段视频，将我自己和 xaringan 幻灯片并排放置。因此，我想将幻灯片的容器 float 到右侧，以便我有空间站在左侧。

这是一个示例幻灯片:

---
title: "Incremental Slides with xaringan / remark.js"
author: "Yihui Xie"
date: "2017/08/31"
output:
  xaringan::moon_reader:
    css: ["test.css", "default", "default-fonts"]
    lib_dir: libs
    nature:
      countIncrementalSlides: false
      ratio: '16:9'
---

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

# Three ways to build incremental slides

In remark.js, you may use

这是我试图将容器向右移动的 CSS 代码:

html.remark-container, body.remark-container {
  width: 93%;
  float: right;
}

.remark-container:-webkit-full-screen {
  width: 93%;
  height: 100%;
  float: right;
}

渲染幻灯片后，当它不是全屏时，位置就是我想要的。但是进入演示或全屏模式后，容器居中，我不知道如何将其移动到右侧。有任何想法吗？谢谢!

这是我的 session 信息:

R version 3.4.2 Patched (2017-10-01 r73429)
Platform: x86_64-apple-darwin15.6.0 (64-bit)
Running under: macOS High Sierra 10.13.1

Matrix products: default
BLAS: /System/Library/Frameworks/Accelerate.framework/Versions/A/Frameworks/vecLib.framework/Versions/A/libBLAS.dylib
LAPACK: /Library/Frameworks/R.framework/Versions/3.4/Resources/lib/libRlapack.dylib

locale:
[1] en_US.UTF-8/en_US.UTF-8/en_US.UTF-8/C/en_US.UTF-8/en_US.UTF-8

attached base packages:
[1] stats     graphics  grDevices utils     datasets  methods   base     

loaded via a namespace (and not attached):
 [1] compiler_3.4.2  backports_1.1.1 magrittr_1.5    rsconnect_0.8   rprojroot_1.2   htmltools_0.3.6 tools_3.4.2     xaringan_0.4.4 
 [9] yaml_2.1.14     Rcpp_0.12.13.2  stringi_1.1.5   rmarkdown_1.7   knitr_1.17.9    stringr_1.2.0   digest_0.6.12   evaluate_0.10.1

Answer 1

你应该inspect the CSS classes当您的幻灯片全屏时。我的猜测是类名可能不同。

我没有时间直接回答你的问题，但是here is an indirect answer .两个关键部分是:(1) 您可以使用 navigator.getUserMedia() API 通过相机嵌入视频，例如，

<video autoplay id="webcam" width="200" height="200" style="position:absolute;top:0;right:0;z-index:100;cursor:move;" draggable="true"></video>

<script>
(function() {
  if (/remark-presenter-mode/.test(document.body.className)) return;

  // http://www.html5rocks.com/en/tutorials/getusermedia/intro/
  navigator.getUserMedia_ = navigator.getUserMedia || navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia || navigator.msGetUserMedia;
  if (!navigator.getUserMedia_) return;

  navigator.getUserMedia_({video: true, audio: false}, function(stream) {
    var video = document.getElementById('webcam');
    video.src = window.URL.createObjectURL(stream);
  }, function(e) {});
</script>

(2) 您可以通过 includes 选项(after_body 子选项)将此 HTML 片段包含在 xaringan 幻灯片中。或者简单地复制并粘贴到您的 Rmd 源文档中(我没有测试后一种方式)。