html5 mp4,mp3 player kod arıyorum ?

10 yıl

Yarbay

Konu Sahibi

Aşağıdaki mp3 çalıyor.mp4 calıyor ama goruntu yok tek eksik goruntu :(

bu koda ek bişeyler girsek bi büyü yapsak acaba görüntüyü getirtebilir miyim ? yani çift işlemli olcak hayal ediyorum sadece :))

<div class="form-group">
<audio autoplay="autoplay" controls="controls" preload="metadata" style="width:100%">
<source src="<?php echo $sku; ?>" type="audio/mp3">
</audio></div>

M

MOLİVER

10 yıl

Yüzbaşı

Html 5 içinhttps://github.com/videojs/video.js/blob/stable/docs/guides/setup.md bu linke bakabilirsin.Birde ayriyeten video player oluşturmak içinhttp://jarisflvplayer.org/generator bu linke bakabilirsin.

< Bu ileti mobil sürüm kullanılarak atıldı > Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @virtualdjcubase

V

virtualdjcubase

10 yıl

Yarbay

Konu Sahibi

quote:

Orijinalden alıntı: MOLİVER

Html 5 içinhttps://github.com/videojs/video.js/blob/stable/docs/guides/setup.md bu linke bakabilirsin.Birde ayriyeten video player oluşturmak içinhttp://jarisflvplayer.org/generator bu linke bakabilirsin.

selam,

evet html5 istiyodum yukarıdakini inceledim ama script kodları falna vardı oysa ben yukardkai mp3 player kodum gibi scriptisz basit birşey arıyodum bulaiblirmiyim acaba ?

Bu mesaja 1 cevap geldi.

M

MOLİVER

10 yıl

Yüzbaşı

O zaman şu kod işinizi görecektir.

<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @virtualdjcubase

V

virtualdjcubase

10 yıl

Yarbay

Konu Sahibi

quote:

Orijinalden alıntı: MOLİVER

O zaman şu kod işinizi görecektir.

<video width="320" height="240" autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

sanırım bu yalnızca video için.

ben şöyle bir kod arıyorum :
mp3 linki giridldiğinde mp3 calsın,mp4 ink igirdiğind emp4 calsın ve göstersin.

Aşağıdaki kodumun tek eksiği mp4 göstermemesi yani çalıyor.yani ben hani dedim siz uzmanlar bir kod ekler belki asagıdakine ve istedğim olur :) ?

<div class="form-group">
<audio autoplay="autoplay" controls="controls" preload="metadata" style="width:100%">
<source src="<?php echo $sku; ?>" type="audio/mp3">
</audio></div

Bu mesaja 1 cevap geldi.

M

MOLİVER

10 yıl

Yüzbaşı

Bunun ses dosyası için olan versiyonuda var.En iyisi size bir tab menu oluşturayım.

HTML kodlarımız;

<div id="container"> 
      <div id="tab-head"> 
          <ul> 
              <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=108429082&url=#tab1" data-href="#tab1">Video</a></li> 
              <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=108429082&url=#tab2" data-href="#tab2">Müzik</a></li> 
          </ul> 
      </div> 
      <div style="clear:both;"></div> 
      <div id="tab-content"> 
          <div id="tab1" class="content"><video width="320" height="240" autoplay>  
  <source src="video.mp4" type="video/mp4">  
  <source src="video.ogg" type="video/ogg">  
  </video> </div> 
          <div id="tab2" class="content"><audio controls> 
    <source src="ses.ogg" type="audio/ogg"> 
    <source src="ses****" type="audio/mpeg"> 
  </audio></div> 
      </div> 
  </div>

CSS kodumuz;

#container { width: 500px; margin: 0 auto;} 
  ul { list-style-type: none; margin:0; padding:0; } 
  ul li { float:left; background: #e5e5e5; padding: 3px 8px 3px 8px; margin-right: 3px; } 
  ul li a { text-decoration: none; color: #333; } 
  .active {background:#ccc;} 
  #tab-content .content { height: 200px; background: #ccc; display: none; padding:4px;  } 
  #tab-content { width: 500px; }

JS kodumuz;

$(document).ready(function(){ 
      $('#tab-head ul li:first').addClass('active'); 
      $('.content:first').show(); 
       
      $('#tab-head ul li a').click(function(){ 
          var id = $(this).attr('href'); 
          $('#tab-head ul li').removeClass('active'); 
          $(this).parent().addClass('active'); 
          $('.content').hide(); 
          $(id).fadeIn(); 
      }); 
  });

Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @virtualdjcubase

V

virtualdjcubase

10 yıl

Yarbay

Konu Sahibi

quote:

Orijinalden alıntı: MOLİVER

Bunun ses dosyası için olan versiyonuda var.En iyisi size bir tab menu oluşturayım.

HTML kodlarımız;

<div id="container"> 
      <div id="tab-head"> 
          <ul> 
              <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=108429744&url=#tab1" data-href="#tab1">Video</a></li> 
              <li><a data-test="test" rel="nofollow" style="word-wrap: break-word; text-decoration: underline;" target="_blank" onclick="return dhExternalLinkRedirect(this)" href="/ExternalLinkRedirect?module=pgdcode&messageId=108429744&url=#tab2" data-href="#tab2">Müzik</a></li> 
          </ul> 
      </div> 
      <div style="clear:both;"></div> 
      <div id="tab-content"> 
          <div id="tab1" class="content"><video width="320" height="240" autoplay>  
  <source src="video.mp4" type="video/mp4">  
  <source src="video.ogg" type="video/ogg">  
  </video> </div> 
          <div id="tab2" class="content"><audio controls> 
    <source src="ses.ogg" type="audio/ogg"> 
    <source src="ses****" type="audio/mpeg"> 
  </audio></div> 
      </div> 
  </div>

CSS kodumuz;

#container { width: 500px; margin: 0 auto;} 
  ul { list-style-type: none; margin:0; padding:0; } 
  ul li { float:left; background: #e5e5e5; padding: 3px 8px 3px 8px; margin-right: 3px; } 
  ul li a { text-decoration: none; color: #333; } 
  .active {background:#ccc;} 
  #tab-content .content { height: 200px; background: #ccc; display: none; padding:4px;  } 
  #tab-content { width: 500px; }

JS kodumuz;

$(document).ready(function(){ 
      $('#tab-head ul li:first').addClass('active'); 
      $('.content:first').show(); 
       
      $('#tab-head ul li a').click(function(){ 
          var id = $(this).attr('href'); 
          $('#tab-head ul li').removeClass('active'); 
          $(this).parent().addClass('active'); 
          $('.content').hide(); 
          $(id).fadeIn(); 
      }); 
  });

çok teşekkür ederim gerçekten ama sadece aşağıdaki koduma ek bişey girilerek mp4 lerinde gösterilmesini sağlamak istiyorum çalıyor ama goruntu yok**** ler ise mukemmel sorun yok.

Sitem yapılı ve hazır bir altypapı kullanılıyor yani tab lar falan hazır.Ben sadece link giriyorum mp3 yada mp4.
bundan dolayı sadece aşağıdaki kodu modifiye ederek hem mp3 hem mp4 göstermesini sağlmak istiyorum html5 olarak.

tabi böyle bişey varsa
gerçekten çok sevinirim.

<div class="form-group">
<audio autoplay="autoplay" controls="controls" preload="metadata" style="width:100%">
<source src="<?php echo $sku; ?>" type="audio/mp3">
</audio></div>

Bu mesaja 1 cevap geldi.

M

MOLİVER

10 yıl

Yüzbaşı

Bu kod zaten html5 ses dosyaları için kullanılan koddur.Video için html5 kodlarını da gösterdim.Şimdi bu koda ben, <source src="<?php echo $sku; ?>" type="video/mp4"> bunu ekleme yaparsam hem mp3 hemde mp4 dosyasını aynı anda oynatacaktır.Bu yüzden tab menüde 2 farklı kod kullandım.
<audio autoplay="autoplay" controls="controls" preload="metadata" style="width:100%">
<source src="<?php echo $sku; ?>" type="audio/mp3">
</audio>

Bunu denemedim ama aşağıdaki kodu diğer tab münüye eklerseniz istediğiniz şekilde olur mu bilmiyorum.
<video autoplay="autoplay" controls="controls" preload="metadata" style="width:100%">
<source src="<?php echo $sku; ?>" type="video/mp4">
</video>

Sizin istediğiniz sanırım admin panelinden sadece mp3,mp4 vs. linkleri girerek sitede gözükmesini sağlamak.

Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @virtualdjcubase

V

virtualdjcubase

10 yıl

Yarbay

Konu Sahibi

quote:

Orijinalden alıntı: MOLİVER

Bu kod zaten html5 ses dosyaları için kullanılan koddur.Video için html5 kodlarını da gösterdim.Şimdi bu koda ben, <source src="<?php echo $sku; ?>" type="video/mp4"> bunu ekleme yaparsam hem mp3 hemde mp4 dosyasını aynı anda oynatacaktır.Bu yüzden tab menüde 2 farklı kod kullandım.
<audio autoplay="autoplay" controls="controls" preload="metadata" style="width:100%">
<source src="<?php echo $sku; ?>" type="audio/mp3">
</audio>

Bunu denemedim ama aşağıdaki kodu diğer tab münüye eklerseniz istediğiniz şekilde olur mu bilmiyorum.
<video autoplay="autoplay" controls="controls" preload="metadata" style="width:100%">
<source src="<?php echo $sku; ?>" type="video/mp4">
</video>

Sizin istediğiniz sanırım admin panelinden sadece mp3,mp4 vs. linkleri girerek sitede gözükmesini sağlamak.

eve doğru son cümlenizdeki gibi mp3 girince mp3,mp4 grince mp4 calsın istiyorum.ama bu son verdiğiniz kodda mp3 eklesemde mp4 eklemişim gibi büyük gösteriyor yani video var gibi...

bana son bi şans veremezmisiniz yani ben mp3 girince mp3 lerde gösterim olmadıgından sadece minik player gostersini istiyorum ki konudalki ilk kod bunu yapıyor. Sadece mp4 girince buyük gostersin gosterim oldugundan dolayı
bunu yapamazmıyım acaba ? yani siz yapamazmısınız daha doğrusu :)

Bu mesaja 1 cevap geldi.

M

MOLİVER

10 yıl

Yüzbaşı

Admin panelinizin kodlarını pm atar mısınız, siz sanırım mp3 kodunuzun yerine bu son attığım kodu yerleştirdiniz.Doğal olarakta mp3 linkinizi mp4 linkiymiş gibi algılıyor.Ben o kodu tab menünüzün ikinci sekmesine eklemeniz için gönderdim.Yani;

----------------------------------------------------------------
1.Tab Menü= MÜZİK
<audio autoplay="autoplay" controls="controls" preload="metadata" style="width:100%">
<source src="<?php echo $sku; ?>" type="audio/mp3">
</audio>
----------------------------------------------------------------

----------------------------------------------------------------
2.Tab Menü= VİDEO
<video autoplay="autoplay" controls="controls" preload="metadata" style="width:100%">
<source src="<?php echo $sku; ?>" type="video/mp4">
</video>
----------------------------------------------------------------

Şeklinde ekleyerek yapmanız gerekti.Ancak sizin admin paneli kodlarınızı bilmediğim için, girdiğiniz link 2 menüde de gözükecekti.Şimdi bunu ayarlamamız gerek.

Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @virtualdjcubase

V

virtualdjcubase

10 yıl

Yarbay

Konu Sahibi

quote:

Orijinalden alıntı: MOLİVER

Admin panelinizin kodlarını pm atar mısınız, siz sanırım mp3 kodunuzun yerine bu son attığım kodu yerleştirdiniz.Doğal olarakta mp3 linkinizi mp4 linkiymiş gibi algılıyor.Ben o kodu tab menünüzün ikinci sekmesine eklemeniz için gönderdim.Yani;

----------------------------------------------------------------
1.Tab Menü= MÜZİK
<audio autoplay="autoplay" controls="controls" preload="metadata" style="width:100%">
<source src="<?php echo $sku; ?>" type="audio/mp3">
</audio>
----------------------------------------------------------------

----------------------------------------------------------------
2.Tab Menü= VİDEO
<video autoplay="autoplay" controls="controls" preload="metadata" style="width:100%">
<source src="<?php echo $sku; ?>" type="video/mp4">
</video>
----------------------------------------------------------------

Şeklinde ekleyerek yapmanız gerekti.Ancak sizin admin paneli kodlarınızı bilmediğim için, girdiğiniz link 2 menüde de gözükecekti.Şimdi bunu ayarlamamız gerek.

toplam 1 tab var 2.tab olusturamıyorum :(

1 kod ile bu iş olmuyor mu ? 2 tab 2 ayrı kod mecbur mu ?
tşekkürler

Bu mesaja 1 cevap geldi.

M

MOLİVER

10 yıl

Yüzbaşı

Yukarıdaki mesajımın birinde nasıl ikili tab menü oluşturulur kodları ile verdim.Aynı kodda hem video hem mp3 mantık olarak mümkün değil.Çünkü etiketleri farklıdır.Buda birinin doğru çalışırken diğerinin çalışmamasına neden olacaktır.

Bu mesaja 2 cevap geldi.

Bu mesajda bahsedilenler: @virtualdjcubase

V

virtualdjcubase

10 yıl

Yarbay

Konu Sahibi

quote:

Orijinalden alıntı: MOLİVER

Yukarıdaki mesajımın birinde nasıl ikili tab menü oluşturulur kodları ile verdim.Aynı kodda hem video hem mp3 mantık olarak mümkün değil.Çünkü etiketleri farklıdır.Buda birinin doğru çalışırken diğerinin çalışmamasına neden olacaktır.

Çok ama çok teşekkür ederim saatlerce yazdınız konu için.
sayenizde boş bişeyin peşinde koşmıcam dediğiniz şkeilde gideceğim.
teşekkürler tekrar.

V

virtualdjcubase

10 yıl

Yarbay

Konu Sahibi

quote:

Orijinalden alıntı: MOLİVER

Yukarıdaki mesajımın birinde nasıl ikili tab menü oluşturulur kodları ile verdim.Aynı kodda hem video hem mp3 mantık olarak mümkün değil.Çünkü etiketleri farklıdır.Buda birinin doğru çalışırken diğerinin çalışmamasına neden olacaktır.

size birşey dha sorabilir miyim ?

link girilmemişse player hiç görünmesin.bunu yapabilir miyim ?

Bu mesaja 1 cevap geldi.

M

MOLİVER

10 yıl

Yüzbaşı

İlk aklıma gelen yöntemi yazıyorum.Text box yanlarına bir buton koyalım.
<button onclick="myFunction()">Gösterme</button>
Daha sonra göstermek istemediğimiz playerı bir div içine alalım.
<div id="kesinliklegosterme">BURADA BİZİM PLAYER KODLARIMIZ OLACAK</div>
Şimdi butona basında divi gizlemesi için gerekli js kodlarımızı yazalım.
<script>function myFunction() {document.getElementById("kesinliklegosterme").style.display = "none";}</script>

Bu mesaja 1 cevap geldi.

Bu mesajda bahsedilenler: @virtualdjcubase

V

virtualdjcubase

10 yıl

Yarbay

Konu Sahibi

quote:

Orijinalden alıntı: MOLİVER

İlk aklıma gelen yöntemi yazıyorum.Text box yanlarına bir buton koyalım.
<button onclick="myFunction()">Gösterme</button>
Daha sonra göstermek istemediğimiz playerı bir div içine alalım.
<div id="kesinliklegosterme">BURADA BİZİM PLAYER KODLARIMIZ OLACAK</div>
Şimdi butona basında divi gizlemesi için gerekli js kodlarımızı yazalım.
<script>function myFunction() {document.getElementById("kesinliklegosterme").style.display = "none";}</script>

aşağıdaki koduma ek bişeyler yapılarak olmaz dimi :)

1.Tab Menü= MÜZİK
<audio autoplay="autoplay" controls="controls" preload="metadata" style="width:100%">
<source src="<?php echo $sku; ?>" type="audio/mp3">
</audio>

sadece sordum özür ve js kullanmadan yapmak istiyodum html5

teşekkür ederm :))

Bu mesaja 1 cevap geldi.

M

MOLİVER

10 yıl

Yüzbaşı

Sadece html5 kodu ile olmaz.İlla dışarıdan bir denetleyici gerekiyor.Örneğin, bir sitede kayıt formu doldururken doldurulması gereken bir kutuyu boş olarak gönderdiğimizde bize boş bırakmayın için bir uyarısı verir.Burada bile birlikte çalışan kodlar vardır.Yukarıdaki koduna o şekilde düşünebilirsiniz.

EDİT:Aşağıda php ile de bir form oluşturdum.İsterseniz bunu kullanın, sizin istediğiniz şekle daha yakın bir yöntem.

<form method="POST" action="#"> 
  <p><input type="text" name="doldur"> 
  <input type="submit" value="Göster/Gizle" name="gonder"></p> 
  </form> 
   
  <?php 
  $text = $_POST["doldur"]; 
  if($text == "") 
  { 
  $display = "display:none"; 
  } 
  else 
  { 
  echo "<audio autoplay='autoplay' controls='controls' preload='metadata' style='width:100%'>  
  <source src='<?php echo $sku; ?>' type='audio/mpeg'>  
  </audio> "; 
  } 
  ?>

Tabi bu kodları kendime göre yazdım.Siz kullanacağınız zaman örnek kodları kendinize göre ayarlayın.

< Bu mesaj bu kişi tarafından değiştirildi MOLİVER -- 1 Ağustos 2015; 22:58:39 >

Bu mesajda bahsedilenler: @virtualdjcubase