我怎样才能让小提琴进入全屏？答案

【问题标题】：How can I make fiddles enter full-screen?我怎样才能让小提琴进入全屏？
【发布时间】：2015-03-15 02:01:39
【问题描述】：

我试图创建一些 POC 来尝试使用 jwplayer，但由于某种原因，jwplayer 的全屏无法正常工作。

有什么办法可以让jwplayer中的jsfiddle全屏工作吗？

Here is my jsfiddle

    http://jsfiddle.net/hiteshbhilai2010/6YyXH/63/

【问题讨论】：

这里也可以设置primary为flash。
@EthanJWPlayer：请检查，我试过primary:flash，但它停止工作了....jsfiddle.net/hiteshbhilai2010/6YyXH/74
什么停止了工作？它仍然适合我。

标签： fullscreen jwplayer jsfiddle video-player jwplayer6

【解决方案1】：

回答为时已晚，但由于现在没有可用的分享按钮，全屏显示的新方法是复制小提琴的 URL 并在其上附加“/show”。

示例：https://fiddle.net/xyz123/show/

这只会全屏显示结果帧。

【讨论】：

但是你会遇到一个“运行这个小提琴”的横幅。
@AndersLindén 这显然是一项安全功能，您只需点击它
分享按钮哪里去了？

【解决方案2】：

您可以点击分享按钮，然后获取全屏结果 URL，打开它，在播放器中进入全屏，然后（可选）点击 F11

另一种快速方法：右键单击 jsfiddle 结果 --> 查看框架源 --> 在查看源选项卡中获取 iframe URL 并打开它，播放器全屏应该可以工作。如果您打算使用 fiddle 作为演示，您可以编写一些 javascript 来获取底层 iframe 的 url 并在新窗口中打开它。

【讨论】：

但是还是要按F11，是不是因为stackoverflow？
F11 是进入全屏的常用浏览器热键。由于 jsfiddle 使用 iframe，播放器的全屏按钮将仅在 iframe 上展开其面板
@TJ：您仍然可以通过右键单击放置播放器的区域并选择“查看帧源”（在 Chrome 中）来获取帧 URL。在新选项卡中，您可以删除前缀“view-source：”，您将获得单帧 URL。然后全屏将在该页面上工作。祝你好运
没有分享按钮

【解决方案3】：

仅在 Firefox 中：

在 Jsfiddle 中右击结果窗口
选择“此框架”
选择“仅显示此帧”
页面将仅在全屏模式下重新加载结果（其中没有“运行此小提琴”横幅。）

但有时这不起作用，我不知道为什么，但您始终可以像 Zameer Fouzan 所说的那样在 URL 中添加“/show”。如果您不想看到“在 Jsfiddle 中编辑”按钮，您可以随时将其删除：

在 URL 中添加“/show”并按 ENTER
按“运行这个小提琴”按钮
在 FireFox 或 Chrome 中按 F12 进入开发者模式
在 Firefox 中按：CTRL + SHIFT + C 从页面中选择一个元素
点击“Edit in Jsfiddle”按钮，对应的代码会高亮显示
右键单击突出显示的代码行
选择“删除节点”
按 F12 关闭开发者模式

【讨论】：

【解决方案4】：

打开浏览器的控制台并运行：

const div = document.createElement('div')
div.classList.add('actionItem', 'visible')
div.style.cursor = 'pointer'

const a = document.createElement('a')
a.innerText = 'Fullscreen'
a.classList.add('aiButton')
a.title = 'Fullscreen'
a.addEventListener('click', function() {
  document.querySelector('iframe[name=result]').requestFullscreen()
})

div.appendChild(a)
document.querySelector('.actionCont').insertBefore(div, document.getElementById('app-updates'))

这将在“嵌入”按钮旁边添加一个带有“全屏”文本的按钮。如果你点击它，你的浏览器应该全屏显示结果。

或者，如果您不想每次编辑小提琴时都在浏览器控制台中粘贴某些内容，请使用用户脚本：

// ==UserScript==
// @name        JSFiddle Fullscreen
// @match       *://jsfiddle.net/*
// @version     1.0
// @author      GalaxyCat105
// @description Adds a fullscreen button in the JSFiddle navigation menu when editing a fiddle
// @grant       none
// ==/UserScript==

const div = document.createElement('div')
div.classList.add('actionItem', 'visible')
div.style.cursor = 'pointer'

const a = document.createElement('a')
a.innerText = 'Fullscreen'
a.classList.add('aiButton')
a.title = 'Fullscreen'
a.addEventListener('click', function() {
  document.querySelector('iframe[name=result]').requestFullscreen()
})

div.appendChild(a)
document.querySelector('.actionCont').insertBefore(div, document.getElementById('app-updates'))

在您最喜欢的用户脚本管理器中创建一个新脚本并将代码复制粘贴到其中。

【讨论】：