いくつかの背景ビデオを表示

私はJavascriptとcreateElementメソッドで異なる背景ビデオを表示しようとしています。リンクをクリックすると、ビデオはうまく表示されますが、他のビデオは表示されません。私はまた、両方の<video> + <source>のタグがよく切り替えられている（movie1> movie2）DOM要素と両方の要素（idとsrc）をチェックしました。たとえ要素がDOM要素でうまく変更されたとしても、ブラウザは最初のビデオを保持しているようです。いくつかの背景ビデオを表示

<head> 
    <script> 
     var movieNow = ""; 
     function playVideo(movie, mp4) { 
      if (movieNow!="") { 
       document.getElementById(movieNow).pause(); 
       document.getElementById(movieNow).style.display="none"; 
       document.getElementById(movieNow).id = movie; 
       document.getElementById('mysource').src = "videos/"+mp4+".mp4"; 
       document.getElementsByTagName("Video").play(); 
        document.getElementsByTagName("Video").style.display="block"; 
      } else { 
       bckMovie = document.createElement("video"); 
       bckMovie.id = movie; 
       bckMovie.className = "myvideo"; 
       bckMovie.innerHTML = "<source src='videos/"+mp4+".mp4' type='video/mp4' id='mysource'>"; 
       document.body.appendChild(bckMovie); 
       document.getElementById(movie).style.display="block"; 
       document.getElementById(movie).play(); 
      } 
      movieNow = movie; 
     } 
    </script> 
<body> 
    <a href="javascript:playVideo('movie1', 'movie123')">Movie 1</a> 
    <a href="javascript:playVideo('movie2', 'movie456')">Movie 2</a> 
    ... 
</body>

出典

2016-03-25 user6113111

あなたはいくつかの論理的な問題を抱えています...必要に応じて動作すると思われるJsFiddleでこのコードを調べてください。 https://jsfiddle.net/o5fdqurw/2/

<head> 
    <script> 
    var movieNow = ""; 
    function playVideo(mp4) { 
     var movieNow = document.getElementById("movie"); 
     if (movieNow !== null) { 
      movieNow.pause(); 
      movieNow.style.display="none"; 
      document.getElementById('mysource').src = "videos/"+mp4+".mp4"; 
      movieNow.play(); 
      movieNow.style.display="block"; 
     } else { 
      bckMovie = document.createElement("video"); 
      bckMovie.id = "movie"; 
      bckMovie.className = "myvideo"; 
      bckMovie.innerHTML = "<source src='videos/"+mp4+".mp4' type='video/mp4' id='mysource'>"; 
      document.body.appendChild(bckMovie); 
      document.getElementById("movie").style.display="block"; 
      document.getElementById("movie").play(); 
     } 
    } 
    movieNow = movie; 
</script> 
<body> 
    <a href="javascript:playVideo('movie123')">Movie 1</a> 
    <a href="javascript:playVideo('movie456')">Movie 2</a> 
    ... 
</body>

出典

2016-03-25 09:09:29 tanaydin

あなたの答えTanaydinに感謝しますが、私はいつも同じ問題があります。最初のクリックは動画を表示しますが、他のクリックは表示しません。それは影響を受けていないビデオのソースを変更するように見えます。 – user6113111

こんにちは、http://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tagまたはhttp://stackoverflow.com/questions/12151606/setattribute-and-video-src-for-変化するビデオタグソース非動作中、すなわち9 – tanaydin

いくつかの背景ビデオを表示

答えて

関連する問題