屏幕测试图片全屏

只需记录一些全屏视频技术以及jQuery UI对话框窗口即可 。 我已经在演示中嵌入了YouTube视频，但是您可以嵌入任何视频。

在GitHub上 查看演示 查看项目

正在检查浏览器功能是否进入全屏状态。

将视频元素变成jQuery UI对话框窗口。

使1个元素全屏显示。

使两个元素全屏显示（例如缩略图列表视图）。

现在很酷的东西。 将1个元素全屏显示，将另一个拖动到一个较小的窗口中。

让我们看一些代码

/ **
* jQuery全屏视频测试
*
*促进全屏视频制作和测试的过程
*使用jQuery UI对话框的视频小部件，其中1个视频可拖动。
*
* @copyright版权所有（c）2013 jQuery4u
* @license http://jquery4u.com/license/
* @链接http://jquery4u.com
* @自1.0版起
* @作者Sam Deering
* @filesource jquery4u-fsvid.js
*
* /

（函数（$，W，D，undefined）
{

W.FSVID = W.FSVID || {};

W.FSVID =
{
名称：“全屏视频”，

/ *
* 在里面。
* /
初始化：功能（设置）
{
this.settings = $ .extend（{}，this.settings，settings）;
this.checkFullscreenPossible（）;
this.setupEventHandlers（）;
}，

checkFullscreenPossible：function（）
{
var $ fsStatus = $（'＃fsStatus'）;
如果（W.fullScreenApi.supportsFullScreen）
{
//浏览器支持全屏
$ fsStatus.html（'YES：您的浏览器支持FullScreen！'）。addClass（'fullScreenSupported'）;
}
其他
{
//浏览器不支持全屏
$ fsStatus.html（'抱歉：您的浏览器不支持FullScreen！'）。addClass（'fullScreenNotSupported'）;
}
}，

/ *
*设置按钮单击事件。
* /
setupEventHandlers：function（）
{
var _this = W.FSVID;
$（'＃createWidgets'）。on（'click'，function（e）
{
e.preventDefault（）;
_this [“ createWidgets”]（）;
}）;

// ——————————————————————

//需要防止浏览器安全漏洞
var fsElement1 = document.getElementById（'1'）;

//单击处理按钮
$（“＃gofs1”）。on（'click'，function（）
{
window.fullScreenApi.requestFullScreen（fsElement1）;
}）;

// ——————————————————————

var fsElement2 = document.getElementById（'2'）;

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

//单击处理按钮
$（“＃gofs2”）。on（'click'，function（）
{
window.fullScreenApi.requestFullScreen（fsElement2）;
}）;

// ——————————————————————

var fsContainer = document.getElementById（'vidcontainer'）;

$（“＃gofsall”）。on（'click'，function（）
{
W.fullScreenApi.requestFullScreen（fsContainer）;
}）;

// ——————————————————————

var fsContainer = document.getElementById（'vidcontainer'）;

$（“＃gofsallwidgets”）。on（'click'，function（）
{
$（'＃w_1，＃w_2'）。detach（）。prependTo（'＃vidcontainer'）; //将小部件移到fs容器中
W.fullScreenApi.requestFullScreen（fsContainer）;
}）;

// ——————————————————————

var fsContainer = document.getElementById（'vidcontainer'）;

$（“＃gofssmart”）。on（'click'，function（）
{
$（'＃w_1，＃w_2'）。detach（）。prependTo（'＃vidcontainer'）; //将小部件移到fs容器中
//最大化w1
$（'＃w_1'）。css（{
“身高”：“ 100％”，
“宽度”：“ 100％”，
“ z-index”：“ 1001”，
“左”：“ 0”，
“顶部”：“ 0”
}）;
//移动w2
$（'＃w_2'）。css（{
“高度”：“ 360px”，
“宽度”：“ 480px”，
“ z-index”：“ 1002”，
“左”：“ 2％”，
“最高”：“ 62％”
}）;
W.fullScreenApi.requestFullScreen（fsContainer）;
}）;

//捕获全屏事件
$（W）.on（W.fullScreenApi.fullScreenEventName，function（）
{
如果（W.fullScreenApi.isFullScreen（））
{
// console.log（'enter fullscreen'）;
$（'。f-btns'）。hide（）; //进入全屏
}
其他
{
// console.log（'退出全屏'）;
$（'。f-btns'）。show（）; //退出全屏
}
}）;
}，

/ *
*创建带有视频的jQuery UI小部件。
* /
createWidget：功能（wid）
{
var $ vid = $（'。video＃'+ wid）;

//创建jQuery UI对话框
$ vid.dialog（
{
“标题”：$ vid.find（'。title'），
“宽度”：“ 480”，
“身高”：“ 360”，
“位置”：[（$（'。ui-widget'）。length * 500）+20，290]，
“可调整大小”：正确，
“可拖动”：是
} .css（
{
“宽度”：“ 100％”，
“身高”：“ 100％”
}）;
$ vid.parent（'。ui-widget'）。attr（'id'，'w _'+ wid）.css（
{
“宽度”：“ 480px”，
“高度”：“ 360px”
}）;

//保持简单，否则会遇到全屏浏览器安全问题
var fsButton = document.getElementById（'gofs'+ wid），
fsElement = document.getElementById（'w _'+ wid）;

//删除以前的事件处理程序
$（fsButton）.off（'click'）;
$（fsElement）.off（W.fullScreenApi.fullScreenEventName）;

//处理全屏按钮
$（fsButton）.on（'click'，function（）
{
W.fullScreenApi.requestFullScreen（fsElement）;
}）;
}，

/ *
*将所有视频元素转换为小部件。
* /
createWidgets：function（）
{
$（'。video'）。each（函数（i，v）
{
W.FSVID.createWidget（$（v）.attr（'id'））;
}）;
}

}

$（D）.ready（function（）
{
W.FSVID.init（）; //加载数据并启动仪表板obj
}）;

}）（jQuery，window，document）;

/ *本机全屏JavaScript API
————————————— * /

（function（）{
var fullScreenApi = {
supportsFullScreen：false，
isFullScreen：function（）{return false; }，
requestFullScreen：function（）{}，
cancelFullScreen：function（）{}，
fullScreenEventName：”，
字首： ”
}，
browserPrefixes ='webkit moz o ms khtml'.split（''）;

//检查本机支持
如果（typeof document.cancelFullScreen！='undefined'）{
fullScreenApi.supportsFullScreen = true;
}其他{
//通过供应商前缀检查全屏支持
对于（var i = 0，il = browserPrefixes.length; i

翻译自: https://www.sitepoint.com/fullscreen-video-testing/

屏幕测试图片全屏