zmiana mp4 po nacisnieciu przycisku

0

Witam. Problem, który chce rozwiązać to zmiana wyświelanego filmu-tła dla strony internetowej po naciśnięciu przycisku. Mój sposób na rozwiązania tego problemu to zmiana zawartości atrybutu src dla tagu source, po wywołaniu zdarzenia onclick na przycisku o klasie arrowPP. Skrypt wykonuje mój zamysł, dostaje prawidłowy odczyt zmiany atrybutu w konsoli. Zrzut z konsoli w załączniku. Wyświetlany film jednak nie zmienia się, proszę o pomoc.

$('.arrowPP').on('click', function (){
  
    
    var zmienna1 = 'australia.mp4';
       $('source').attr('src', zmienna1);
    console.log(zmienna1);
    console.log( $('source').attr('src'));
    console.log( $('video').html());
});

<html>

<head>
 <link type='text/css' rel='stylesheet' href='style.css'/>     
</head>
    
<body>
    
    <div id='videoCONTENER'>
    <video id='filmTlo' preload="auto" autoplay="true" loop = "loop" muted='muted'>
        <source src='video.mp4' type='video/mp4'>
    </video>
           </div>
    <div class='content'>
        
        <h1>To jest przykładowy tekst, który będzie wyświetlany.</h1>
        <p>Zawartość tego przykładowego tekstu jest nastepujaca</p>
        
        <div class='logo'><img class='logoGRAPH' src='logo.png'/><img class='xicon' src='xicon.png'/></div>
        <div><img class='arrowLL' src='arrowLL.png'/></div>
        <div><img class='arrowPP' src='arrowPP.png'/></div>
        <div class='menu'>
    <ul>
        <li><a href='#'>Home</a></li>
           <li><a href='#'>Miejsca</a></li>
           <li><a href='#'>Plan podróży</a></li>
           <li><a href='#'>Ceny</a></li>
        
    </ul>
</div>
        
        <button>Zacznij</button>
    </div>
<script type='text/javascript' src='jquery-3.2.1.min.js'></script>
<script type='text/javascript' src='jScript.js'></script>  
</body>
    
</html>
0

https://stackoverflow.com/questions/3732562/can-i-use-javascript-to-dynamically-change-a-videos-source

Podpowiedź: trzeba jeszcze załadować to video

0

...dokładniejsza podpowiedź: jak kolega wyżej napisał trzeba załadować film po podmienieniu zmiennej, przy użyciu w odpowiednim miejscu video.load();

1 użytkowników online, w tym zalogowanych: 0, gości: 1