HTML5 在视频上更改 src答案

【问题标题】：HTML5 Changing src on videoHTML5 在视频上更改 src
【发布时间】：2013-10-17 16:18:15
【问题描述】：

我正在尝试更改页面上视频元素的来源，但无法使其正常工作。我认为这应该有效，但由于某种原因它没有。我阅读了类似的问题并查找了 Apple Developer Library。

这是我尝试更改来源的方式：

<head>
<script>
    function play_red()
    { 
       var vid = document.getElementById("vid");
       vid.src = "videos\color_red.mp4"
       vid.load();
       vid.play();
    }
</script>
</head>
<body>
<video id="vid" src="videos\color_black.mp4" autoplay="true"></video>

<button type="button" onclick="play_red()"></button>

我做错了什么？

编辑：解决方案：当你问东西时不要翻译你的文件名。我应该用过

vid.setAttrivute('src','videos/color_rot.mp4);

相反。我现在觉得很傻，谢谢你的帮助。

【问题讨论】：

@Sudhir 我不知道，我是 HTML 和 JS 的新手
为什么函数中有正斜杠，而video标签中有反斜杠？这会导致任何问题吗？
@Dan 我用反斜杠和正斜杠都试过了，但没有任何区别。我在问题中打错字，正在编辑它
请继续并将其中一个答案标记为真实答案:)
我只是将您的代码完全复制/粘贴到我自己的 html 文件中，但只是将视频 URL 更改为我自己的两个，它至少在 Mac 的 Safari 和 Chrome 中运行良好。你确定第二个视频编码正确吗？

标签： javascript html video

【解决方案1】：

这行得通吗？

function play_red()
{ 
   var vid = document.getElementsByTagName("video")[0];
   vid.setAttribute('src', 'videos/color_red.mp4');
   vid.load();
   vid.play();
}

这实际上应该改变源。我不确定 load() 和 play() 函数。

【讨论】：

遗憾的是，结果相同。按下按钮后，之前的视频消失了，我仍然可以看到控件并且没有任何反应。当我在带有 Safari 的 iPad 上尝试时，视频似乎无限加载。但是路径是正确的。
您是否在控制台中检查了属性是否发生了变化？我对 HTML5 视频不太熟悉，所以我不知道 load() 和 play() 视频。不过应该更改属性...
现在这个工作了，它可能以前工作过，但我走错了路。我现在觉得很傻
别觉得自己很傻。即使是最好的程序员也会发现自己犯了这些错误:)

【解决方案2】：

使用getElementsByTagName 代替document.getElementById：

<script>

function play_red()
{ 
   var vid = document.getElementsByTagName("video")[0].src = "videos/color_red.mp4";
   vid.load();
   vid.play();
}
</script>

如果你愿意使用 jquery，那很简单：

$("#vid").attr("src","videos/color_red.mp4");

【讨论】：

检查我更新的代码。它可能无法正常工作，因为您的网页中有多个视频标签。

【解决方案3】：

你需要改变：

<script> 
function play_red() 
{ 
var vid = document.getElementById("a");
vid.innerHTML  = ' <video id="vid" src="videos\color_red.mp4" autoplay="true"></video>';

 } 
 </script> 
 </head> 
 <body> 
 <div id="a">
 <video id="vid" src="videos\color_black.mp4" autoplay="true"></video>
</div>
<button type="button" onclick="play_red()"></button>

【讨论】：