播放 youtube 视频时如何在 iframe 上添加 keydown 事件？答案

【问题标题】：How to add keydown event on iframe while playing youtube video?播放 youtube 视频时如何在 iframe 上添加 keydown 事件？
【发布时间】：2019-03-25 14:09:37
【问题描述】：

我无法为 youtube 视频使用 <video> 标签，因此我将 youtube 嵌入到 <iframe> 中，如下所示以播放 youtube 视频：

<iframe type="text/html" 
    width="640" 
    height="385" 
    src="http://www.youtube.com/embed/VIDEO_ID"
    frameborder="0">
</iframe>

播放视频效果很好。但我需要支持按escape 键停止播放视频。下面的代码适用于<video> 标签，但在播放视频时不适用于 iframe。似乎视频在播放时需要键盘控制。有没有办法让我收听 youtube iframe 的键盘事件？

window.addEventListener('keydown',(e) => {
    if (e.key === 'Escape') {
         ...
    }
});

我尝试通过youtube api iframe 播放视频，但播放视频时未触发 keydown 事件。可以找到此代码：https://codepen.io/zhaoyi0113/pen/YJvJay。如果视频获得焦点并播放，则不会触发事件侦听器。

【问题讨论】：

标签： javascript html video iframe

【解决方案1】：

这是使用The youtube api iframe添加 youtube 视频 iframe 的正确方法，检查此代码希望对您有所帮助（视频无法运行，复制代码并在浏览器中运行）：

<!DOCTYPE html>
<html>

<body>

<div id="player"></div>

<script>

// This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;

function onYouTubeIframeAPIReady() {
	player = new YT.Player('player', {
		height: '360',
		width: '640',
		videoId: 'M7lc1UVf-VE',
		events: {
			'onReady': onPlayerReady,
			'onStateChange': onPlayerStateChange
		}
	});
}

// The API will call this function when the video player is ready.
function onPlayerReady(event) {
	event.target.playVideo();
}

// 	  The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;

function onPlayerStateChange(event) {
	if (event.data == YT.PlayerState.PLAYING && !done) {
		setTimeout(stopVideo, 6000);
		done = true;
	}
}

// Stop video
function stopVideo() {
	player.stopVideo();
}

// Your event listener on keydown
document.addEventListener('keydown',(e) => {
	alert("video will be stoped !!");
    if (e.key === 'Escape') {
         stopVideo()
    }
}, false);

</script>
</body>

</html>

【讨论】：

当我键入任何键时，keydown 事件监听器没有被触发
您是否将代码复制到一个新的html文件中并运行它？
当我按下 Escape 键时它正在工作（单击空白区域然后按 Escape 键）
如果我点击外部视频 iframe，它会起作用。但我想要的是当 iframe 获得焦点时逃脱。

【解决方案2】：

您必须使用 YouTube 的 IFrame Player API 来实现您想要的。该代码将注入所需的 api，在您的页面上创建 iframe 并加载您提供的 id 的视频：

HTML：

<!-- The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>

JavaScript：

// 1. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 2. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'M7lc1UVf-VE',
        events: {
            'onReady': onPlayerReady
        }
    });
}

// The API will call this function when the video player is ready.
function onPlayerReady(event) {
    event.target.playVideo();
}
// Pause the video
function pauseVideo() {
    player.pauseVideo();
}
// your existing code
window.addEventListener('keydown', (e) => {
    if (e.key === 'Escape') {
        pauseVideo();
    }
});

有关详细信息，请使用他们的API Reference

YouTube 播放器不允许自定义键盘快捷键，并且您无法在视频聚焦时收听浏览器事件。顺便说一句，您可以使用空格键来播放/暂停视频。

【讨论】：

我尝试了您的解决方案。它非常适合通过 youtube api iframe 播放视频，但播放视频时不会触发 keydown 事件。
请注意，当您专注于视频时（当您单击它时），键盘事件将不起作用，因为视频在不同的帧中播放。如果您在视频外部单击并尝试退出键，视频将暂停。
YouTube 有自己的一组键盘快捷键，例如按空格键将播放/暂停视频。
有没有办法在 YouTube 上收听自己的键盘快捷键？
事件没有被传播，所以你不能监听它们。