Как я могу приостановить встроенное видео Youtube с ванильным Javascript?

Question

Я пытаюсь приостановить встроенное видео на YouTube iframe без связанного с видео события.

Я прочитал youtube embedded api, this answer и this one и вот что я до сих пор (видео обыкновение играть в сниппет из-за вопроса CORS, но я предполагаю, что это на самом деле не имеет значения.):

<iframe id="video1" width="560" height="315" src="http://www.youtube.com/embed/JFBUJ6kNl28" frameborder="0" allowfullscreen></iframe> 
 

 
<script type="text/javascript"> 
 
    //youtube api to pause video when changing section 
 
    var tag = document.createElement('script'); 
 
    tag.src = "//www.youtube.com/iframe_api"; 
 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
 
    var player = false 
 

 
    function onYouTubeIframeAPIReady() { 
 
    player = new YT.Player('video1', {}); 
 
    } 
 

 
    function jump() { 
 
    console.log(player); 
 
    if (player) { 
 
     player.pauseVideo() 
 
    } 
 
    } 
 
</script> 
 
<button type="button" onclick="jump()" name="button">pause button</button>

Что мне не хватает? Объект игрок там, когда я вхожу, но она бросает мне player.pauseVideo() is not a function

Answer 1

Я нашел решение: как описано в this answer, вам нужно добавить ?enablejsapi=1 к видео URL

: У вас есть добавить ?enablejsapi=1 в конце вашего URL: /embed/vid_id?enablejsapi=1

Так или иначе, он не работает с моим сниппет, но работает в моем реальном случае.

Answer 2

<a onclick="playVideoFunction()">Play video</a> 
<a onclick="stopVideoFunction()">Stop video</a> 

<iframe id="videoIframe" width="840" height="473" 
src="https://www.youtube.com/embed/dZ0fwJojhrs?feature=oembed" 
frameborder="0" allowfullscreen></iframe> 

<script type="text/javascript"> 
function playVideoFunction() { 
    document.getElementById("videoIframe").src += "&autoplay=1";} 

function stopVideoFunction() { 
    var ysrc = document.getElementById("videoIframe").src;  
    var newsrc = ysrc.replace("&autoplay=1", ""); 
    document.getElementById("videoIframe").src = newsrc; 
} 
</script> 

Answer 3

Вы можете просто использовать:

iframe.contentWindow.postMessage(message, origin); 

отправить сообщение iframeWindow, от ParentWindow. Все популярные видеоуслуги поддерживают прослушивание этих сообщений.

проверить ссылку ниже для демо:

https://codepen.io/mcakir/pen/JpQpwm 

Примечание: Живые демо проверяет, является ли или нет видео находятся в окне просмотра. Кодовый блок, который я использую, поддерживает воспроизведение/паузу видео iframe с Youtube, vimeo и dailymotion (больше будет добавлено в ближайшее время) без использования каких-либо библиотек игроков или SDK.