我发现如何改变html5源标签的视频源(src)，但在函数内或与内联javascript得到不同的结果

I found how to change the video source (src) of an html5 source tag but am getting different results inside a function or with inline javascript

本文关键字：结果 javascript 函数 改变 何改变 发现 html5 标签 src 的视频      更新时间：2023-09-26

Javascript改变标签的src是内联的，但是当我试图在一个函数调用或按钮标签的"onclick"调用中嵌入完全相同的代码时，没有发生任何事情。不会抛出任何错误消息。

我错过了什么?

代码如下:

 <div style="width: 100%; height: 250px; overflow: hidden;">
  <video id="video" width="100%" loop autoplay controls>
  <source id="videoSource" src="video1.m4v" type="video/mp4">
  Your browser does not support the video tag.
</video>
</div>
<script language="Javascript">
    document.getElementById('video').volume=0;
   // uncommented, the next line works, changing the video src to a new URL     
   // document.getElementById('videoSource').src = "video2.m4v";
    function changevideo() { 
        alert("Changing Video");
    // but embedded in a function or called from a button onclick, does not work
    document.getElementById('videoSource').src = "video2.m4v";
    }       
</script>
<div>
 <button onclick="javascript: changevideo()">Change Movie</button>
</div>

我在Mac上的Safari和Chrome上测试了相同的结果。谢谢你的帮助!

像这样在click事件中使用内联函数

<div style="width: 100%; height: 250px; overflow: hidden;">
 <video id="video" width="100%" loop autoplay controls>
  <source id="videoSource" src="video1.m4v" type="video/mp4">
  Your browser does not support the video tag.
 </video>
</div>

<div>
 <button onclick="javascript: document.getElementById('videoSource').src = 'video2.m4v'">Change Movie</button>
</div>

或者你可以使用jquery事件绑定。这是一个更好的方法。

在某些浏览器的方法中changevideo函数是未定义的

用视频ID代替源标签ID。这对我有用!

function changevideo() { document.getElementById('video').src = "video2.m4v"; }

不确定这是否会解决您的问题，但language是script标签(W3C: HTML文档中的脚本)的弃用属性。

使用type="text/javascript"代替或不使用任何属性，因为type="text/javascript"是默认值

相关文章：