Показывать несколько фоновых видеороликов

Я пытаюсь отобразить различные фоновые видео с помощью Javascript и с помощью метода createElement иметь только один узел видеотега. Нажимая на ссылку, видео отображается хорошо, но не остальные. Я также проверил элементы DOM, и оба элемента (id и src) обоих <video> + <source> тегов были хорошо переключены (movie1> movie2). Похоже, что браузер сохраняет первое видео, даже если элементы были хорошо изменены в DOM Elements.Показывать несколько фоновых видеороликов

<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- изменение-видео-теги источник не работоспособная-в-ie9 – tanaydin

Показывать несколько фоновых видеороликов

ответ

Смежные вопросы