Как изменить видео 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(), но я не уверен, как их использовать.

Ответы

Ответ 1

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

Ответ 2

Я бы предпочел сделать это так:

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

</video>

а затем используйте

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

Ответ 3

Я пробовал использовать тег автовоспроизведения, а .load().play() все равно нужно называть по крайней мере в хром (возможно, его мои настройки).

Простейший кросс-браузерный способ сделать это с помощью 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() работает только в том случае, если внутри элемента видео есть элемент-источник 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();

Ответ 4

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

Ответ 5

Что сработало для меня, так это выпустить команду "play" после изменения источника. Странно вы не можете использовать "play()" через экземпляр jQuery, поэтому просто используйте getElementByID следующим образом:

HTML

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

JAVASCRIPT

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

Ответ 6

Работает над 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>

Надеюсь, это поможет кому угодно.

Ответ 7

Самый простой способ - использовать автовоспроизведение.

<video autoplay></video>

Когда вы меняете src через javascript, вам не нужно указывать load().