如何解决按下空格键不会切换视频播放或暂停
我正在尝试设置重写video
的一些快捷功能。除非按空格键,否则一切正常。这是我的代码:
let video = document.getElementById("video")
video.addEventListener("keydown",(e) => {
if (e.which == 32 || e.which == 80) {
e.preventDefault();
e.stopPropagation();
video.paused ? video.play() : video.pause();
return false;
}
})
<video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls></video>
在这里,我使用spacebar
和P
切换播放和暂停。使用spacebar
会以某种方式切换两次,而不会使用P
。
我尝试添加keyup
和keypress
的事件侦听器以拒绝spacebar
输入。但这也行不通。
关于我缺少的HTML5视频有什么吗?
解决方法
由于默认情况下空格键会播放和暂停视频,因此您必须反转三元运算符中的函数。处理p
标签时无需更改它们。
因此,唯一的方法是在2个不同的ifs
中处理两个不同的密钥代码。
请参见下面的工作代码段。
let video = document.getElementById("video")
video.addEventListener("keydown",(e) => {
if (e.which == 32) {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.pause() : video.play();
return false;
}
else if (e.which == 80) {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.play() : video.pause();
return false;
}
})
<video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls></video>
如果无法拆分它,那么嵌套if-else怎么样?
let video = document.getElementById("video")
video.addEventListener("keydown",(e) => {
if (e.which == 32 || e.which == 80) {
if (e.which == 80) {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.play() : video.pause();
return false;
} else {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.pause() : video.play();
return false;
}
}
})
<video id="video" src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" width="300" controls></video>
,
Neo.ClientError.Statement.TypeError: Cannot subtract `Duration` from `Long`
let video = document.getElementById("video")
video.addEventListener("keydown",(e) => {
if ([32,80].includes(e.which)) {
e.preventDefault();
e.stopImmediatePropagation();
video.paused ? video.pause() : video.play();
return false;
}
})
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。