Як змінити відео src за допомогою jQuery?

Як змінити src відеотегу HTML5 за допомогою jQuery?

Я отримав цей HTML:

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

Це не працює:

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

Це змінює src, якщо я перевіряю його за допомогою firebug, але насправді не відтворює відтворюване відео.

Я читав про .pause () та .load (), але не знаю, як ними користуватися.

Спробуйте $("#divVideo video")[0].load();після того, як змінили атрибут src.

Я волів би зробити так

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

</video>

а потім використовувати

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

Я спробував використати тег автовідтворення, і .load () .play () все ще потрібно викликати принаймні в chrome (можливо, це мої налаштування).

найпростішим крос-браузерним способом зробити це за допомогою jquery на вашому прикладі буде

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

Однак я б запропонував вам це зробити (для розбірливості та простоти)

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

Подальше читання http://msdn.microsoft.com/en-us/library/ie/hh924823(v=vs.85).aspx#ManagingPlaybackInJavascript

Додаткова інформація: .load () працює лише за умови, що всередині елемента video є елемент html-джерела (тобто <source src="demo.mp4" type="video/mp4" />)

Шлях без jquery буде:

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();
  });
});

У мене спрацювало видавання команди «відтворити» після зміни джерела. Дивно, але ви не можете використовувати 'play ()' через екземпляр jQuery, тому ви просто використовуєте getElementByID наступним чином:

HTML

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

ЯВАСКРИПТ

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

Найпростіший спосіб - використовувати автовідтворення.

<video autoplay></video>

Коли ви змінюєте src через javascript, вам не потрібно згадувати load ().

Це працює на Flowplayer 6.0.2 .

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

де змінною є значення змінної javascript / jquery, тегом відео має бути щось таке

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

Сподіваюся, це комусь допоможе.