2016-05-25 3 views
0

Я использую IFrame для воспроизведения видео на YouTube. Он отлично работает, но я хочу остановить его при нажатии кнопки. Как это сделать. Пожалуйста помоги.Как остановить воспроизведение видео YouTube в приложении Ionic

<div class="padding-css"> 
    <iframe ng-model="myframe" class="frameclass" src="https://www.youtube.com/embed/CR5zjazP3hg?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe> 
</div> 

ответ

0

Вы можете создать iframe через java-скрипт и управлять проигрывателем с помощью кнопок в качестве остановки.

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

    <script> 
     // 2. 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); 

     // 3. 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, 
      'onStateChange': onPlayerStateChange 
      } 
     }); 
     } 

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

     // 5. 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; 
     } 
     } 
     function stopVideo() { 
     player.stopVideo(); 
     } 
    </script> 
    </body> 
</html> 

Для получения более подробной информации вы можете перейти по этой ссылке.

https://developers.google.com/youtube/iframe_api_reference#Getting_Started

+0

ОХК ... но как это сделать с угловыми? –

+0

сделать сервис в угловых js, таких как youtubeService и написать функцию в этой службе. – Keshav

1

Раствор для Ionic2

ionViewWillLeave() { 
    let listaFrames = document.getElementsByTagName("iframe"); 
    for (var index = 0; index < listaFrames.length; index++) { 
     let iframe = listaFrames[index].contentWindow;   
     iframe.postMessage('{"event":"command","func":"pauseVideo","args":""}', '*'); 
    } 
} 

Не забудьте включить JS в конце ссылки видео *? Enablejsapi = 1

Смежные вопросы