Nativescript ile YouTube Iframe API'sı kullanılsın mı?

9gt53wS 2019-06-28 23:09.

GÜNCELLEME: Aşağıdaki @ Manoj kodundan ve diğer bazı kaynaklardan, artık youtube oynatıcısını Youtube iframe api'sine dayalı bir web görünümüne yükleyebiliyorum. Ancak soru hala şudur: Uygulamamın videonun kendisi oynamaya başladığında bunu tanımasını nasıl sağlayabilirim? (video yüklendikten sonra ve herhangi bir reklam oynatıldıktan sonra).

Anahtar kodu web görünümünde "yakalandı".

Web görünümünden bilgi almanıza izin veren bir yerel simge-webview arayüz eklentisi vardır. Burada gerekli olan buysa, videonun kendisi oynamaya başladığında kaydolmak için bu eklentiye sahip doğru kod nedir?

Bu eklentinin repo'sundaki örnekler oldukça spesifik ve burada aklımda olanlardan farklı görünüyor.

Orijinal Soru:

İOS ve Angular kullanan bir Nativescript uygulamam var. Uygulamada youtube videolarının oynatılmasını istiyorum ve oynatmayı kontrol edebilmek istiyorum. Bu yüzden programlı olarak otomatik oynatmak ve video gerçekten oynatılırken kaydolmak gibi şeyler yapmak istiyorum.

Bunu nasıl yapabilirim?

Daha fazla detay:

Bir nativescript-youtubeplayer eklentisi var ama bunu burada kullanamıyorum, bc bir api anahtarı ve başka nedenler gerektiriyor.

Aşağıdaki gibi bir kodla bir Web Görünümü'ne temel bir iframe yerleştirebiliyorum:

<WebView (loaded)="onWebViewLoaded($event)" requiresUserActionForMediaPlayback="false" [src]="urlSource"></WebView>

ve ts cinsinden:

 public urlSource= '<iframe src="https://www.youtube.com/embed/ZwO3PG-c5Cs?playsinline=1&autoplay=1&fs=0&controls=1&enablejsapi=1"></iframe>'

Bu videoyu yükler. Ancak normal youtube kontrollerine sahip değil (videodaki büyük duraklatma düğmesi gibi) - belki de web görünümü tarafından geçersiz kılındı. Daha da önemlisi, otomatik olarak OYNATMAZ ve iframe bilgilerine programlı olarak erişmem için bir yol sağlamaz - bu nedenle, örneğin videonun gerçekte ne zaman oynatıldığını ve ne zaman duraklatıldığını anlayamıyorum.

Youtube Iframe Player API bu amaçla yapılır, ama Nativescript ile nasıl kullanılır? Nativescript'in daha önce yaptığını görmediğim bir şekilde dom manipülasyonu gerektiriyor gibi görünüyor.

Örneğin, bunun temel kodu:

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

Ancak, şaşırtıcı olmayan bir şekilde, bu, 'YT adını bulamıyorum' gibi hatalara yol açar.

Peki, bir youtube videosunu iframe ile Nativescript'e nasıl yerleştirebilirim ve bir web uygulamam olsa yapabildiğim gibi kontrol edebilirim?

nativescript

2 answers

Manoj 2019-06-29 15:18.

YouTubeIframeAPI'yi WebView içinde kullanabilir, komut dosyalarını tutabilen ayrı bir yerel html dosyası oluşturabilirsiniz.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<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', {
          width: '100%',
          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>

Oyun Alanı Örneği

Not: VideoId'yi veya başka bir parametreyi sorgu dizesinde bile iletebilir, ardından aynısını html dosyasında ayrıştırıp kullanabilirsiniz.

9gt53wS 2020-07-31 21:13.

Buna bir süredir bakmadım, ancak benim durumumda bunun en çok neyin işe yaradığını göstermek için takip etmenin faydalı olacağını düşündüm. Umarım burada başkalarına yardımcı olabilecek bazı kodlar vardır.

Benim için temel fikir, temel youtube kodunu ( burada size verdikleri ) TS bileşenindeki bir değişkene koymaktı:

Başlamak için, TS bileşenim Youtube kodunu şu şekilde yerleştirdi:

exportClass YoutubeComponent implements OnInit {
        public youtubeVideoId = [ID OF VIDEO I WANT TO PLAY]
        public youtubeCode = 
          `
           <!DOCTYPE html>
          <html>
          <body>
             <!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
               <iframe id="player"
                width="90%" height="375"
                src="https://www.youtube.com/embed/` + this.youtubeVideoId + `?enablejsapi=1&playsinline=1&autoplay=1&fs=0&controls=1" 
            frameborder="0"
                 ></iframe>
           <script>
           /**
           * WebViewInterface class to handle communication between webView and Android/iOS.
          */
         var NSWebViewinterface = (function () {
               function NSWebViewinterface() {
         
          [PUT IN THE REST OF THE WHOLE YOUTUBE CODE IN THIS VARIABLE]
             ...   
        `

Ve sonra html'de:

<WebView row="0" src="{{youtubeCode}}" #webView></WebView>

Ve sonra, yukarıdaki ile aynı TS bileşeninde web görünümüyle etkileşim kurmak için:

 @ViewChild('webView') webView: ElementRef;

  onWebViewLoaded(args) {
     let webView: WebView = this.webView.nativeElement;
     this.oWebViewInterface = new WebViewInterface(webView); 
     this.nextFunction()
   }

  nextFunction {
     this.oWebViewInterface.on('onPlayerStateChange, (data) =>{
       if (data.state === 5){ //video cued
         console.log('video is cued up')
       }
    })
  }

Japanese Spanish German French Thai Portuguese Russian Vietnamese Italian Korean Turkish Indonesian Polish Hindi

MORE COOL STUFF

Jana Duggar: Aşk ve 'Bir'i Bulmak İçin 5 Yıllık Penceresi Hakkında Söylediği Her Şey

Jana Duggar, aşkı arayışı konusunda açıktı. İşte konu hakkında söylediği her şey ve beş yıllık evlilik penceresi.

2023-06-12.

Sam Heughan, "Outlander" Setinden Ne Alacağını Tam Olarak Biliyor - "Onları Giydiğimde Jamie Olduğumu Hissediyorum"

Outlander'ın yıldızı Sam Heughan kısa süre önce kendisini yıldız yapan rol olan Jamie Fraser'ı hatırlamak için setten ne alacağını açıkladı.

2023-06-12.

Bir Fab Four Insider'a Göre Grubun 'En Heyecan Verici Performanslarından' Biri Olan Erken Beatles Şarkısı

'She Loves You' bir saatte yazıldı, bir günde kaydedildi ve kariyerlerinin en iyi performanslarından birine sahip The Beatles şarkısı oldu.

2023-06-11.

Dolly Parton, 'Geçersiz' Büyükannesine Diğer Torunların Hiçbiri Yapmayacakken Yardım Etti - O da Ona Şaka Yapardı

Dolly Parton ve büyükannesi Bessie'nin özel bir ilişkisi vardı. Büyükanne Parton çok hastaydı ama bu Dolly'nin ona şaka yapmasını engellemedi.

2023-06-11.

Okyanusun Derinliklerinde Gizlenen En Korkunç 10 Deniz Yaratığı

Okyanus güzelliklerle dolu, ama aynı zamanda gezegenimizin en korkunç deniz canlılarından bazılarını da içinde barındırıyor. Bu hayvanların çoğu, okyanus yüzeyinin çok altında, derin denizin karanlık ve yüksek basınçlı dünyasında gizleniyor.

2025-10-29.

Minecraft'taki En İyi 10 Kılıç Büyüsü

Düşman yaratıklarla savaşıyorsanız veya PvP senaryolarına hazırlanıyorsanız, Minecraft'taki en iyi kılıç büyülerini bilmek size büyük bir avantaj sağlayabilir. Kılıçları büyülemek daha fazla hasar vermenizi, yaratıklardan düşen düşman sayısını artırmanızı ve kılıcınızın dayanıklılığını uzatmanızı sağlar.

2025-10-29.

Marvel'ın Kara Panter Gösterisi Şimdiye Kadarki En Önemli Animasyon Gösterisi Olacak

Eyes of Wakanda doğrudan MCU'ya bağlanıyor ve ayrıca X-Men '97, What If..., Daredevil ve daha fazlasıyla ilgili güncellemeler sunuyor.

2024-07-03 19:03.

Laguna Beach Oyuncuları: Şimdi Nerede?

'Laguna Beach', 2000'lerin ortalarında lise öğrencileri Lauren Conrad, Kristin Cavallari, Stephen Colletti ve daha fazlasının hayatlarını takip ediyordu. İşte MTV gerçeklik dizisinin oyuncu kadrosunun şu anki hali.

2024-07-15.

Ava Gardner'ın flört geçmişi: Hollywood ikonunun evliliklerine ve aşklarına bir bakış

Ava Gardner, Mickey Rooney ve Frank Sintra ile evlenecekti ve birkaç Hollywood yıldızıyla daha çıktı. İşte Ava Gardner'ın çıkma geçmişine bir bakış.

2024-06-23.

Yazma Becerinizi Geliştirmenin Kanıtlanmış 3 Yolu

Yazmanın faydaları ve bunu yapmanıza yardımcı olacak stratejiler

2022'de GPT-3'ün piyasaya sürülmesiyle yazma becerisinin önemi azalmış gibi görünüyor. AI ile, zayıf yazıya sahip kişiler de kaliteli personel oluşturabilir.

Yavaş Erozyon: İnsanların Kariyerlerinde Boşa Harcadıkları Yolları Ortaya Çıkarma

Günümüzün hızlı tempolu ve rekabetçi dünyasında, kişinin kariyeri kişisel gelişim, finansal istikrar ve genel yaşam memnuniyetinde önemli bir rol oynamaktadır. Bununla birlikte, birçok kişi profesyonel yaşamlarında giderek tükenmekte olan amansız bir durgunluk ve tatminsizlik döngüsüne kapılmış durumda.

Bir podcast'i etkili kılan nedir?

Geçen hafta PressGazette (İngiliz medya haber sitesi) aracılığıyla gönderilen bir basın bildirisi fark ettim. Makale, Scandi podcast barındırma ve reklamcılık şirketi Acast'ın podcasting alanında "muhtemelen en etkili" yayıncılardan oluşan bir konsorsiyuma liderlik edeceğini duyurdu.