JavaScript:将属性设置为视频元素

JavaScript: Set attribute to video element

本文关键字：视频 元素 设置 属性 JavaScript      更新时间：2023-09-26

我希望我的javascript获取一个用户输入的url，并将其发送到源元素的src属性，但它不起作用。请帮帮我？

这是我的脚本：

    <input type="text" name="aniurl" size="60"><br>
      <button class="btn" onclick="playVideo()" >button</button>
     </div>
    <video controls preload="auto" >
  <source id="anir" type="video/mp4">
 <script>
function playVideo(){
var aniurl = document.getElementsByName("aniurl")[0].value;
var ani2 = document.getElementById("anir")[0].value;
ani2.setAttribute("src",aniurl);
}
 </script>

var ani2 = document.getElementById("anir")[0].value;`

应该是

var ani2 = document.getElementById("anir");

getElementById返回单个元素(或null(，则setAttribute是dom元素上的方法，而不是value将给您的字符串。

此外，您的视频标签未关闭。

var ani2 = document.getElementById("anir")[0].value;

应该是：

var ani2 = document.getElementById("anir").value;

getElementById()不返回数组。

  1. id="anir"应附加到视频标签，而不是源标签
  2. 在getElementById之后不能使用[0]，因为它返回的是元素，而不是元素数组
  3. 正确关闭视频标签
  4. 您不应该使用.value来获取anir元素，因为您希望整个元素在下一行中设置源属性

最终结果：

<input type="text" name="aniurl" id="aniurl" size="60" value="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
<button class="btn" onclick="playVideo()">button</button>
<video width="320" height="240" id="anir" controls>
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
    function playVideo() {
        var aniurl = document.getElementById("aniurl").value;
        var ani2 = document.getElementById("anir");
        ani2.setAttribute("src", aniurl);
    }
</script>

实时演示

相关文章：