JQuery kullanarak video src'yi nasıl değiştirirsiniz?

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

Bu HTML'yi aldım:

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

Bu çalışmıyor:

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

Firebug kullanarak incelersem src'yi değiştirir, ancak oynatılan videoyu gerçekten değiştirmez.

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

$("#divVideo video")[0].load();Src özniteliğini değiştirdikten sonra deneyin .

Böyle yapmayı tercih ederim

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

</video>

ve sonra kullan

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

Otomatik oynatma etiketini kullanmayı denedim ve .load () .play () en azından chrome'da çağrılması gerekiyor (belki de benim ayarlarım).

Örneğinizi kullanarak jquery ile bunu yapmanın en basit çapraz tarayıcı yolu

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

Ancak bunu yapmanızı önereceğim yol (okunaklılık ve basitlik açısından)

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

Daha Fazla Okuma http://msdn.microsoft.com/en-us/library/ie/hh924823(v=vs.85).aspx#ManagingPlaybackInJavascript

Ek bilgi: .load () yalnızca video öğesinin içinde bir html kaynak öğesi varsa çalışır (yani <source src="demo.mp4" type="video/mp4" />)

Jquery olmayan yol şu şekilde 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();

JQUERY

<script type="text/javascript">
$(document).ready(function() {
  var videoID = 'videoclip';
  var sourceID = 'mp4video';
  var newmp4 = 'media/video2.mp4';
  var newposter = 'media/video-poster2.jpg';
 
  $('#videolink1').click(function(event) {
    $('#'+videoID).get(0).pause();
    $('#'+sourceID).attr('src', newmp4);
    $('#'+videoID).get(0).load();
     //$('#'+videoID).attr('poster', newposter); //Change video poster
    $('#'+videoID).get(0).play();
  });
});

Benim için işe yarayan, kaynağı değiştirdikten sonra 'oynat' komutunu vermekti. Garip bir şekilde bir jQuery örneği üzerinden 'play ()' kullanamazsınız, bu nedenle getElementByID'yi aşağıdaki gibi kullanırsınız:

HTML

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

JAVASCRIPT

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

     $(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.

En kolay yol, otomatik oynatmayı kullanmaktır.

<video autoplay></video>

Src'yi javascript ile değiştirdiğinizde, load () 'dan bahsetmenize gerek yoktur.

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

<script>
    flowplayer().load({
         sources: [
            { type: "video/mp4",  src: variable }
            ]
        });
</script>

nerede değişken bir javascript / jquery değişken değeridir video etiketi şey bu olmalı

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

Umarım herkese yardımcı olur.