Question

我已尝试使用以下因素为我的html5视频播放器设置 src 属性，例如，

 $("#vid").attr("src","video.mp4");

  $("#vid").setAttribute("src","video.mp4");

  $("#vid").prop("src","video.mp4");

我在许多论坛中搜索attr()在浏览器中不起作用，他们正在提供替代解决方案

使用val()函数设置特定标记的值。

使用$("#div").id = "value"来处理某些属性，例如id，class和某些events，例如click。

但我无法找到更改特定src或video的{{1}}的解决方案。请帮我解决这个问题

Answer 1

如果要使用本机DOM属性，则需要获取DOM元素（而不是jQuery集合）：

document.getElementById('vid').src = 'video.mp4';

或者：

$('#vid').get(0).src = 'video.mp4'

但我猜这不是IE问题所在，请确保浏览器完全支持HTML5视频。

如果您使用IE的闪存替换，您将无法在运行时更改src attrbute。您将不得不更换整个闪存容器。

Answer 2

所以我们假设你有以下HTML代码：

 <video id="vid" width="320" height="240" controls>
    <!-- You might do different for browser compatibility. -->
    <source src="" type="video/mp4">
    <source src="" type="video/ogg">
 </video>

现在我们需要做的是首先通过id [vid]抓取视频标签，然后在更改src时循环遍历每个源。像这样：

$(function(){
  var myExt  = new Array();
  myExt[0]   = "mp4";
  myExt[1]   = "ogg";
  var extCounter = 0;

  $("#vid").children("source").each(function(){
    for(var i = 0; i < myExt.length; i++){
        $(this).attr("src","http://www.quirksmode.org/html5/videos/big_buck_bunny"+"."+myExt[extCounter]);
    }
    extCounter++;
  });
});

Click here for codepen link

p.s检查您的浏览器是否支持它。我们正在谈论ie here ..

在ie中为html5播放器设置“src”属性

2 个答案: