请求全屏HTML5视频onPlay
请求全屏HTML5视频onPlay
提问于 2013-06-14 18:11:59
我使用以下代码在用户单击<video>元素上的play按钮时触发全屏：
var video = $("#video");
video.on('play', function(e){
if (video.requestFullscreen) {
video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
video.mozRequestFullScreen();
} else if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}
});但当我单击播放按钮时，没有任何反应。
知道为什么吗？
编辑:这是我的HTML代码：
<video width="458" height="258" controls id='video' >
<source src='<?= bloginfo('template_directory'); ?>/inc/pilot.mp4' type="video/mp4">
<source src='<?= bloginfo('template_directory'); ?>/inc/pilot.ogv' type="video/ogg">
<source src='<?= bloginfo('template_directory'); ?>/inc/pilot.webm' type="video/webm">
</video>回答 2
Stack Overflow用户
发布于 2013-06-14 22:12:03
这里有几件事要做：
首先，在您的代码中，video是一个jQuery对象，而不是实际的视频元素。对于jQuery对象，可以按如下方式引用它：
var actualVideo = video[0]; // (assuming '#video' actually exists)其次，为了安全和良好的用户体验，浏览器只允许你在用户触发的事件中触发全屏，比如“点击”。你不能让每个网页在你一访问它的时候就全屏显示，你可以让视频自动开始播放，这违反了这一规则。
因此，另一种解决方案是在单击事件中请求全屏，如下所示：
var video = $("#video");
video.on('click', function(e){
var vid = video[0];
vid.play();
if (vid.requestFullscreen) {
vid.requestFullscreen();
} else if (vid.mozRequestFullScreen) {
vid.mozRequestFullScreen();
} else if (vid.webkitRequestFullscreen) {
vid.webkitRequestFullscreen();
}
});理想情况下，您可能希望构建一个更完整的播放器ui，但这应该会给您一个大致的概念。
Stack Overflow用户
发布于 2018-02-14 06:08:44
这是一种不那么繁琐的方式，可以将来自this和other questions的答案组合在一起进行全屏切换。
这应该可以处理所有类型的浏览器:基于chromium和webkit的浏览器、firefox、opera和基于MS的浏览器。
var p = document.querySelector('#videoplayer');
if (!window.isFs) {
window.isFs = true;
var fn_enter = p.requestFullscreen || p.webkitRequestFullscreen || p.mozRequestFullScreen || p.oRequestFullscreen || p.msRequestFullscreen;
fn_enter.call(p);
} else {
window.isFs = false;
var fn_exit = p.exitFullScreen || p.webkitExitFullScreen || p.mozExitFullScreen || p.oExitFullScreen || p.msExitFullScreen;
fn_exit.call(p);
}p表示video元素的DOM对象，而window.isFs只是一个用于存储当前全屏状态的随机变量。
如果您的player是一个jQuery对象，那么您可以使用var p = player.get(0)获取底层的DOM-element。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17106131
复制相关文章
相似问题
腾讯云开发者
