Как добавить событие keydown на iframe во время воспроизведения видео на YouTube? - PullRequest
Новая
       2

Как добавить событие keydown на iframe во время воспроизведения видео на YouTube?

0 голосов
/ 21 октября 2018

Я не смог использовать тег <video> для видео на YouTube, поэтому я вставил 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 во время воспроизведения видео.Кажется, что видео берет управление с клавиатуры во время воспроизведения.Есть ли способ прослушать событие клавиатуры в iframe youtube? 

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

Я пытался воспроизвести видео через api iframe youtube , но событие keydown не вызывается, когдавидео играет.Этот код можно найти: https://codepen.io/zhaoyi0113/pen/YJvJay. Прослушиватель событий не запускается, если видео получает фокус и воспроизведение.

Ответы [ 2 ]

0 голосов
/ 21 октября 2018

Вам нужно будет использовать API-интерфейс IFrame Player YouTube, чтобы достичь желаемого.Код вставит требуемый API, создаст на вашей странице iframe и загрузит видео, идентификатор которого вы предоставляете:

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

Плеер YouTube не позволяет настраивать сочетания клавиш, и вы не можете прослушивать события браузера, когда видеососредоточенный.Кстати, вы можете использовать пробел для воспроизведения / приостановки видео.

0 голосов
/ 21 октября 2018

Это правильный способ добавить видео Iframe из YouTube с помощью API-интерфейс 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...