javascript - JavaScript: video 要素に属性を設定する

Question

ユーザーが入力した URL を JavaScript で取得し、ソース要素の 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>

Answer 1

1. id="anir"ソースタグではなく、ビデオタグに添付する必要があります。
2. [0]要素の配列ではなく要素を返すため、getElementById の後に使用しないでください。
3. ビデオタグを適切に閉じる
4. 要素全体が必要なため、次の行で source 属性を設定するために、要素.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>

Live Demo

Answer 2

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

次のようにする必要があります。

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

getElementById()配列を返しません。

Answer 3

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

する必要があります

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

getElementById単一の要素（またはnull）を返します。次にsetAttribute、DOM要素のメソッドであり、文字列でvalueはありません。

また、ビデオタグが閉じていません。