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

我希望我的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>

按钮
函数playVideo（）{
var aniurl=document.getElementsByName（“aniurl”）[0]。值；
var ani2=document.getElementById（“anir”）[0]。值；
ani2.setAttribute（“src”，aniurl）；
}

应该是：

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

不返回数组

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

应该是

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

getElementById

返回单个元素（或null），然后

setAttribute

是dom元素上的一个方法，而不是

value

将为您提供的字符串

另外，您的视频标签未关闭

id=“anir”

应该附加到视频标签，而不是源标签 标签

不能在getElementById之后使用

[0]

，因为它返回的是元素，而不是元素数组

正确关闭视频标签

您不应该使用

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

按钮
您的浏览器不支持视频标记。
函数playVideo（）{
var aniurl=document.getElementById（“aniurl”）.value；
var ani2=document.getElementById（“anir”）；
ani2.setAttribute（“src”，aniurl）；
}

---

文档。getElementById

不应返回数组。它应该返回一个特定的元素。

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