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

Posted 2023-03-08

【中文标题】如何在 xaringan 幻灯片的全屏模式下更改内容位置

【英文标题】：How to change content position when in full screen mode for xaringan slides

【发布时间】：2018-05-14 13:33:53

【问题描述】：

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

这是一个示例幻灯片：

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

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

这是我的会话信息：

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

【问题讨论】：

我最终使用了浏览器的完整模式（即 Windows 上的 F11）而不是完整的备注模式。

【参考方案1】：

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

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

<video autoplay id="webcam"   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 源文档中（我没有测试后一种方式）。