2010-10-20 15 views
44

jQuery'yi kullanarak HTML5 video etiketinin src'sini nasıl değiştirirsiniz?jQuery'yi kullanarak video src'yi nasıl değiştirirsiniz?

var videoFile = 'test2.mp4'; 
$('#divVideo video source').attr('src', videoFile); 

Ben kundakçı kullanarak incelemek eğer src değiştirir, ama aslında Yürütülen videoyu değişmez: Bu işe yaramazsa

<div id="divVideo"> 
    <video controls> 
    <source src="test1.mp4" type="video/mp4" /> 
    </video> 
</div> 

:

ben bu HTML var.

.pause() ve .load() hakkında okudum, ancak bunları nasıl kullanacağımı bilmiyorum.

cevap

80

src niteliğini değiştirdikten sonra $("#divVideo video")[0].load();'u deneyin.

+0

Teşekkürler. İyi çalışıyor. :) –

-1

En kolay yol autoplay kullanıyor.

Javascript aracılığıyla src'yi değiştirdiğinizde, load() öğesinden bahsetmeniz gerekmez.

11

Doğrusu bu

<video id="v1" width="320" height="240" controls="controls"> 

</video> 

gibi yapmak ve sonra kullanmak bana kaynağını değiştirdikten sonra komutu 'oynat' veren edildi çalıştı Ne

$("#v1").html('<source src="test1.mp4" type="video/mp4"></source>'); 
0

.

<video id="videoplayer" width="480" height="360"></video> 

JAVASCRIPT'i

HTML ben autoplay etiketi kullanılarak denedim

$("#videoplayer").html('<source src="'+strSRC+'" type="'+strTYPE+'"></source>'); 
document.getElementById("videoplayer").play(); 
4

şu şekildedir: Sadece getElementByID kullanmak böylece Garip bir jQuery örneği aracılığıyla ') (oynat' kullanamaz ve .load() .play() hala en azından kromda çağrılabilir (belki benim ayarlarım).

ben öneririm yolu (okunabilmesi ve basitlik için) bunu

var video = $('#divVideo video')[0]; 
video.src = videoFile; 
video.load(); 
video.play(); 

olduğunu Bununla

var $video = $('#divVideo video'), 
videoSrc = $('source', $video).attr('src', videoFile); 
$video[0].load(); 
$video[0].play(); 

olacağını sizin örneği kullanarak Jquery ile Bunu yapmanın en kolay çapraz tarayıcı yolu İleri Okuma http://msdn.microsoft.com/en-us/library/ie/hh924823(v=vs.85).aspx#ManagingPlaybackInJavascript

Ek bilgi: .load() sadece video eleme içinde bir html kaynak elemanı varsa çalışır nt (ör.<source src="demo.mp4" type="video/mp4" />)

olmayan jquery yolu olacaktır:

HTML

<div id="divVideo"> 
    <video id="videoID" controls> 
    <source src="test1.mp4" type="video/mp4" /> 
    </video> 
</div> 

JS

var video = document.getelementbyid('videoID'); 
video.src = videoFile; 
video.load(); 
video.play(); 
+0

Yükün desteklenmediğini söyleyen bir javascript hatası alıyorum. IE 11. – Wade

+0

Hata Wade'inizle ilgili bazı ek bilgiler ekledim. – vipero07

1
 $(document).ready(function() {  
    setTimeout(function() { 
        $(".imgthumbnew").click(function() { 
         $("#divVideo video").attr({ 
          "src": $(this).data("item"), 
          "autoplay": "autoplay",   
         }) 
        }) 
       }, 2000); 
      } 
     }); 

here ".imgthumbnew" is the class of images which are thumbs of videos, an extra attribute is given to them which have video url. u can change according to your convenient. 
i would suggest you to give an ID to ur Video tag it would be easy to handle. 
-1

Bu Flowplayer 6.0.2üzerinde çalışıyor.

<script> 
    flowplayer().load({ 
     sources: [ 
      { type: "video/mp4", src: variable } 
      ] 
     }); 
</script> 
değişken bir javascript/jquery değişken değeri olan

, video etiketi bir şey bu

<div class="flowplayer"> 
    <video> 
     <source type="video/mp4" src="" class="videomp4"> 
    </video> 
</div> 

bunun kimseye yardımcı Umut olmalıdır.

İlgili konular