如何结合现有的全屏模式和视频暂停
How to combine exisiting full screen mode and video pause?
我设法把两个选项放在一个按钮上:当点击时,视频开始播放,同时进入全屏。
这是html:
<video id="video1" class="video-small">
<source src="video/Marinela+Pinguinos-HD.mp4" type="video/mp4" class="video-file">
<source src="video/Marinela_Pinguinos-HD.webm" type="video/webm" class="video-file">
</video>
<button id="play" class="full-play-button" onclick="vidplay(); goFullscreen('video1')">Play fullscreen</button>
JAVASCRIPT: function vidplay() {
var video = document.getElementById("video1");
var button = document.getElementsByClassName("full-play-button");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
}
到目前为止,一切都很顺利。当进入全屏时,底部有一个默认的类似播放器的东西,有一个按钮提供退出全屏的可能性。我想要实现的是能够在点击该按钮时暂停视频,但我不知道如何。
我能想到的是某种功能,检测我们是否全屏,如果我们不是,它会暂停/停止(不确定我更喜欢哪个)视频。
这是我想到的,但我是JS的新手,它不起作用:
function exitPause() {
var video = document.getElementById("video1");
if (document.exitFullscreen) {
video.pause();
}
else if (document.mozCancelFullScreen) {
video.pause();
}
else if (document.webkitExitFullscreen) {
video.pause();
}
else if (element.msExitFullscreen) {
video.pause();
}
}
我做错了什么?我怎样才能实现呢?
使用fullscreenchange
事件处理程序:
video.addEventListener(
'fullscreenchange',
function(event) {
if (!document.fullscreenElement) {
video.pause();
}
},
false
);
注意:注意供应商前缀
感谢Igor Gilyazov,我成功地走得更远了一点。这是代码现在的样子:
function vidplay() {
var video = document.getElementById("video1");
var button = document.getElementsByClassName("full-play-button");
video.addEventListener(
'webkitfullscreenchange',
function(event) {
if (!document.fullscreenElement && video.paused) {
video.play();
}
else {
video.pause();
}
},
false
);
}
和全屏:
function goFullscreen(id) {
// Get the element that we want to take into fullscreen mode
var element = document.getElementById(id);
// These function will not exist in the browsers that don't support fullscreen mode yet,
// so we'll have to check to see if they're available before calling them.
if (element.mozRequestFullScreen) {
// This is how to go into fullscren mode in Firefox
// Note the "moz" prefix, which is short for Mozilla.
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
// This is how to go into fullscreen mode in Chrome and Safari
// Both of those browsers are based on the Webkit project, hence the same prefix.
element.webkitRequestFullScreen();
}
// Hooray, now we're in fullscreen mode!
}
现在发生的是当我第一次点击按钮时,它全屏播放视频。当返回小屏幕时,它会暂停。
这太好了。
不幸的是,它只会每隔一秒发生一次(下一次它一直被暂停,无论它是full还是small,然后再次正确,然后错误,等等)。
我知道我很接近了,但是它还没有完全工作,有什么修改的想法吗?
相关文章:
- Javascript,访问一个主要对象模块模式中的每个对象
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 试图在引导模式内动态生成图表,得到offsetWidth错误
- 同位素库错误:未捕获错误无布局模式包装生产线8
- 如何临时暂停浏览器渲染,然后恢复整个页面
- jQuery循环在特定位置暂停
- 在DOM中查找一个模式并替换它's的内容使用jquery
- 如何缩短MongoDB ObjectId并在Mongoose模式中使用它
- NodeJS-readline暂停和恢复事件发射器(逐行读取)
- D3.js模式不适用于弧形或圆环图
- Webdriver.io pageObject模式-通过传递参数来定义元素选择器
- 模块模式和这个
- 最小化时暂停Javascript动画
- 带有let的JS/EECMAScript6私有字段的模式
- 我是否可以检测到javascript正在被卸载(作为调试模式)
- 执行动态模式弹出
- 显示模式对话框并暂停代码执行
- 在Bootstrap模式中暂停Vzaar视频
- 如何结合现有的全屏模式和视频暂停
- 如何防止播放和暂停点击操作在jwplayer5视频,只有当设置为全屏模式