Javascript HTML5在视频上改变src_Javascript_Html_Video

Javascript HTML5在视频上改变src

javascript html video

Javascript HTML5在视频上改变src,javascript,html,video,Javascript,Html,Video,我正在尝试更改页面上视频元素的源，但无法使其正常工作。我认为这应该行得通，但由于某种原因它行不通。我阅读了类似的问题，并查阅了苹果开发者库以下是我试图更改源代码的方式： <head> <script> function play_red() { var vid = document.getElementById("vid"); vid.src = "videos\color_red.mp4" vid.load

我正在尝试更改页面上视频元素的源，但无法使其正常工作。我认为这应该行得通，但由于某种原因它行不通。我阅读了类似的问题，并查阅了苹果开发者库

以下是我试图更改源代码的方式：

<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>

相反。

现在我觉得自己很笨，谢谢你的帮助。

使用

getElementsByTagName

而不是

文档。getElementById

：

<script>

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

这行吗

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

这实际上应该会改变来源。不过，我不确定load（）和play（）函数。

您需要更改：

<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>


函数播放_red（）
{ 
var vid=document.getElementById（“a”）；
vid.innerHTML=''；
}

@Sudhir我不知道，我是HTML和JS的新手。为什么函数中有正斜杠，而视频标签中有反斜杠？“这会导致任何问题吗？”丹我尝试了反斜杠和正斜杠，但没有任何区别。我在问题中输入了一个错误，编辑了它。请继续，并将其中一个答案标记为真实答案：）我只是将你的代码完全复制/粘贴到我自己的html文件中，但只是将视频URL更改为我自己的两个，它至少在Safari和Chrome Mac上运行得非常好。你确定第二个视频编码正确吗？遗憾的是，结果不一样。按下按钮后，上一个视频消失，我仍然可以看到控件，什么也没有发生。当我在装有Safari的iPad上试用时，视频似乎在无限加载。但是路径是正确的。您是否在控制台中检查属性是否更改？我不太熟悉HTML5视频，所以我不知道加载（）和播放（）视频。该属性应该被更改…现在它工作了，它可能以前工作过，但我放错了路径。我现在觉得很傻，别傻了。即使是最优秀的程序员也会发现自己犯了这样的错误：）检查我的更新代码。这可能不起作用，因为你的网页中有不止一个视频标签。

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

<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>