如何使用 jQuery 更改视频 src？答案

【问题标题】：How do you change video src using jQuery?如何使用 jQuery 更改视频 src？
【发布时间】：2020-06-08 19:31:12
【问题描述】：

如何使用 jQuery 更改 HTML5 视频标签的 src？

我得到了这个 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);

如果我使用 firebug 检查它会更改 src，但实际上不会更改正在播放的视频。

我阅读了有关 .pause() 和 .load() 的信息，但我不确定如何使用它们。

【问题讨论】：

标签： jquery video html

【解决方案1】：

更改 src 属性后尝试$("#divVideo video")[0].load();。

【讨论】：

谢谢，我尝试不使用[0]。但事实证明，即使我的选择器只选择了一个视频标签，也需要添加 [0]。
@VaibhavVishal 可能是因为Jquery有自己的加载函数（版本3之前有两个）。
为我工作，我正在从 AJAX 更改 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() 至少在 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() 仅在视频元素中有 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();

【讨论】：

我收到一个 javascript 错误，指出不支持加载。 IE 11.
我添加了一些关于您的错误 Wade 的附加信息。

【解决方案4】：

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

【讨论】：

【解决方案5】：

对我有用的是在更改源后发出“播放”命令。奇怪的是，您不能通过 jQuery 实例使用“play()”，因此您只需使用 getElementByID，如下所示：

HTML

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

JAVASCRIPT

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

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

最简单的方法是使用自动播放。

<video autoplay></video>

当你通过 javascript 更改 src 时，你不需要提及 load()。

【讨论】：

这有副作用。你应该提到他们。

【解决方案8】：

这适用于 Flowplayer 6.0.2。

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

其中 variable 是 javascript/jquery 变量值，视频标签应该是这样的

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

希望对大家有所帮助。

【讨论】：