Question

我试图创建一些POC来尝试使用jwplayer，但出于某种原因，jwplayer的全屏不起作用。

有没有办法在jwfyer的jsfiddle中全屏工作

here is my jsfiddle
    http://jsfiddle.net/hiteshbhilai2010/6YyXH/63/

Answer 1

回答得太晚，但由于现在没有共享按钮，全屏显示的新方法是复制小提琴的网址并附加＆＃34; / show＆＃34;它。

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

这将仅以全屏显示结果框架。

Answer 2

您可以点击“分享”按钮，然后选择全屏结果网址，打开它，在播放器中转到全屏，然后（可选）点击F11

另一种快捷方式：右键点击jsfiddle结果 - ＆gt;查看框架来源 - ＆gt;在视图源选项卡中，取iframe URL并将其打开，播放器全屏应该可以正常工作。如果您打算使用小提琴作为演示，您可以编写一些javascript来获取底层iframe的url并在新窗口中打开它。

Answer 3

仅在 Firefox 中：

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

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

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

Answer 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'))

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

全屏在jsfiddle中不起作用

4 个答案: