Youtube videosunun aktif zamanını değişkene atama

flashman3858

http://webegrafi.com.tr/video
2.örnekte duration yazıyor. Videonun toplam zamanını ve o anki zamanını alıyor.
http://webegrafi.com.tr/video/video.html
bu linktede benim kullandığım hazır video player var plyr adında , burada o zaman sayacını dışarı almak istediğimde alamıyorum https://github.com/sampotts/plyr#getters-and-setters burada sanırım onunla ilgili birşeylerden bahsetmiş ama ben tam olarak çözemedim.yardımcı olursanız sevinirim.

Halil Han BADEM

flashman3858 Merhaba,
player.currentTime; geçerli zamanı verir size. Tabi bu normal dakika cinsinde değil saniye cinsinden anladığım kadarıyla.
Matematik işlemleri ile istediğiniz zamana çevirebilirsiniz.

flashman3858

Halil Han BADEM öncelikle cevapladığınız için çok teşekkür ederim.Ancak ilk örnekteki gibi html sayfada göstermek için ne kadar uğraştıysamda yapamadım.Biraz yazılım konusunda yeniyim.

<body> <div class="discerceve"> <div class="plyr__video-embed" id="player"> <iframe src="https://www.youtube.com/embed/Xa0Q0J5tOP0?origin=https://plyr.io&iv_load_policy=3&modestbranding=1&playsinline=1&showinfo=0&rel=0&enablejsapi=1" allowfullscreen allowtransparency allow="autoplay" ></iframe> </div> </div> </body>

html sayfada bu şekilde kodlar bunun neresine yazmam gerekli player.currentTime; bu kodu şimdiden çok teşekkür ederim.

Halil Han BADEM

flashman3858 Merhaba,
kütüphaneyi kullanmadığım için pek test etme fırsatım olmadı.
Bu gece sizin için kütüphaneyi indirip bir örnek hazırlayacağım.
Gün içi yoğun geçiyor gece vakti yardımcı olabilirim 🙂

flashman3858

Halil Han BADEM kardeşim malesef yazılım konusunda türkçe kaynak bulmak çok zor ama bu site yapı itibariyle ve kullanıcı dostu arayüzüyle çok hoşuma gitti inşallah yolunuz açık olur çok büyük bir uluslararası platform olursunuz.Bende kendimi geliştirdikçe buradaki destek ihtiyacı olan arkadaşlara elimden geldiğince destek vereceğim.İlgilendiğin içinde çok teşekkür ederim.

Halil Han BADEM

flashman3858 Rica ederim, iyi dileklerin için teşekkürler. Elimizden geldikçe ücretsiz olarak insanlara yardım etmeye çalışıyoruz. Hem yardım hemde Türkçe kaynak ihtiyacını gidermek.
Dediğim gibi iş çıkışı eve geçince kütüphaneyi inceleyip örnek atarım buradan.
İyi çalışmalar dilerim.

Halil Han BADEM

flashman3858 Kendimi tutamadım; hemen bakayım dedim. Aslında demosu varmış.

Öncellikle JavaScript tanımlamalarımızı yapalım:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js"></script>
<script src="https://www.youtube.com/iframe_api"></script>
<script src="script.js"></script>

ve CSS tanımlamaları. Kendi CSS'leriniz varsa tanım yapmanıza gerek yoktur. (Bunlar index.html'e yapılması gerekir.)

 <link rel="stylesheet" href="demo.css" type="text/css">
 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/default.min.css">
  <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/styles/tomorrow.min.css">

script.js'de bulunan initalize kodlar aslında tüm kütüphaneyi başlatıyor.

<body>
<div class="discerceve">
<div class="plyr__video-embed" id="player">
<iframe
src="https://www.youtube.com/embed/Xa0Q0J5tOP0?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
allowfullscreen
allowtransparency
allow="autoplay"
></iframe>
</div>
</div>
</body>

Bu kodunuzu şu şekilde değiştirmeniz gerekir.

<body>
<div class="discerceve">
<div class="plyr__video-embed" id="player">
<iframe
src="https://www.youtube.com/embed/Xa0Q0J5tOP0?origin=https://plyr.io&amp;iv_load_policy=3&amp;modestbranding=1&amp;playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1"
allowfullscreen
allowtransparency
allow="autoplay"
></iframe>
<p><span id="current-time">0:00</span> / <span id="duration">0:00</span></p>
</div>
</div>
</body>

Bu şekilde yaparsanız istediğiniz sonucu elde edersiniz.
Eğer doğru sonuç elde etmiyorsanız; tanımlamalarda hata olabilir.
script.js dosyasını incelemenizde yarar var.

Örnek demo linki için tıklayınız.

Böyle güzel bir kütüphanenin tanıtımı için sizlere ve yapımcısına ayrıca teşekkürler 🙂

flashman3858

Halil Han BADEM zaten ilk mesajımda şöyle bir link vermiştim http://webegrafi.com.tr/video bu link sizin paylaştığınız indirme dosyasındakilerin aynısı bende oradan buldum bunu.ama dediğiniz gibi yaptım sonucu linkte payşaşıyorum http://webegrafi.com.tr/video/video.html sayfayı yenilerseniz önbellekte önceki hali kalmış olabiliyor.Sonuç olarak plyr isimli video playerde bu çalışmadı ve css ve jsleri ekleyince playerin tasarımı bozuluyor.sizin ilk dediğiniz player.currentTime; çözüm burada bi yerde gizli ama ben bu kodu html sayfada görüntülemek için nasıl kullanacağımı bulamadım.

Halil Han BADEM

flashman3858 Bana kodlarınızın hepsini atabilir misiniz eğer özel değilse?

flashman3858

Halil Han BADEM http://webegrafi.com.tr/video/kodlar.rar kodlar burada kardeşim. https://github.com/sampotts/plyr buda kullandığım özel playerin sayfası

flashman3858

Halil Han BADEM kardeşim inceleme firsatin oldumu ?

flashman3858

Halil Han BADEM Halil kardeşim inceleme fırsatın oldumu ?

flashman3858

Bu konuda yardımcı olacak kimse yok mu arkadaşlar ?

Halil Han BADEM

flashman3858 Mesai biter bu çocuk kaçar 🙂
Dün inceledim ama pek sonuç alamadım.
Şimdi tekrar incelemeye alıyorum.

flashman3858

Halil Han BADEM eyvallah kardeşim eğer bi sonuç alabilirsek çok büyük işime yarayacak inan hiçbir yerden yardım alamıyorum bu konuyla ilgili

flashman3858

Halil Han BADEM kardeşim sorunu çözdüm aynı sorunu yaşayan diğer arkadaşlara yardımcı olabilir diye paylaşıyorum kodları.

öncelikle sayfaya şu javascript kodlarını ekledim.

<script>
	const player = new Plyr('#player');



	player.on('timeupdate', event => {
		const instance = event.detail.plyr;
		document.getElementById("curtime").innerHTML = formatTime(player.currentTime);
		document.getElementById("duration").innerHTML = formatTime(player.duration);
		document.getElementById("playing").innerHTML = formatTime(player.playing);
	});

	function formatTime(time){
		time = Math.round(time);

		var minutes = Math.floor(time / 60),
				seconds = time - minutes * 60;

		seconds = seconds < 10 ? '0' + seconds : seconds;

		return minutes + ":" + seconds;
	}


</script>

daha sonra playeri eklediğim iframein altına şu kodu ekledim.

<p id="curtime">0:00</p><p id="duration">0:00</p>

sonuç :
http://webegrafi.com.tr/video/video.html

Halil Han BADEM

flashman3858 Eline sağlık kardeşim, çözmene sevindim 🤟