» »

[JS] Sprememba src videa v playerju z linkom

[JS] Sprememba src videa v playerju z linkom

d0rK ::

Živjo, ker se modi ne zganejo prosim za pomoč.. Mogoče bo tukaj več ljudi videlo. Želim preko linkov v stranskem meniju menjati src v video tagu. Kako? Našel sem neke vodiče na netu ampak ker sem totalen noob mi ne rata...Spodnja koda ima že neke funkcije noter, kjer sem se sam trudil pa ni šlo.

Video player je tako: (to sem že nekaj popravljla z id= preko nasvetov na netu pa mi ne gre.. Tukaj sem bral ena navodila.

<div class="column middle">
  <video id="my-video" class="video-js" controls preload="auto" width="900" height="500">
  <source type="video/mp4" id="vidsource" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
</video>
  </div>


Recimo da je meni tak:

<a id="uvod" onclick="myFunction(1)" href="#">Uvod</a>
  <a id="navodila" onclick="myFunction(2)" href="#">Kako uporabljati</a>
  <button class="dropdown-btn">Barvne zakonitosti 
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">Barvne zakonitosti</a>
    <a href="#">Svetloba, ton in intenzivnost</a>
  </div>
  <button class="dropdown-btn">Doziranje in mešanje 
    <i class="fa fa-caret-down"></i>
  </button>
  <div class="dropdown-container">
    <a href="#">Dual-purpose lightener</a>
    <a href="#">Light Up</a>
    <a href="#">PM SHINES</a>
	<a href="#">the color</a>
    <a href="#">Flash finish</a>
    <a href="#">Hightlift</a>
  </div>	


Jaz rabim da vsak link (Uvod, Kako uporabljati, Barvne zakonitosti, itn.) spremeni src videa v zgornjem playerju. Res bi bil hvalažen za pomoč. So me prosili da uredim pa sem malo pregloboko ampak bi se rad naučil. Ali jaz rabim za vsako spremembo svojo funkcijo? Kjer potem vsaki funkciji dam številko in jo nato nekako pokličem ob kliknu na link? Recimo:

function myFunction(1) {
    document.getElementById('vidsource').setAttribute("src", "E:/Vids/test1.mp4"); 
}function myFunction(2) {
    document.getElementById('vidsource').setAttribute("src", "E:/Vids/test2.mp4"); 
function myFunction(3) {
    document.getElementById('vidsource').setAttribute("src", "E:/Vids/test3.mp4"); 
}

}
Kaj je pravilno da je v tej funkciji v getElementById namesto vidsource? Kaj mora biti v video playerju da ga funkcija najde? In kako povežem z a (link) tagom?

d0rK ::

Uredil.

var video = document.getElementById('my-video');

function videoUrl(url){
    video.pause();
    const source = video.querySelector("source");
    source.setAttribute('src', url); 
    video.load();
    video.pause();
}


In na vsakem linku

onclick="videoUrl('/video/Video_Ts-13.mp4')"


Ce ima pa kdo kaksno boljso metodo pa lahko tudi pove.


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Kako narediti to stran "resposive"?

Oddelek: Izdelava spletišč
51024 (915) zzbil
»

Jquery

Oddelek: Izdelava spletišč
151802 (1526) mk818764
»

JavaScript & CSS ne dela v Mozilli

Oddelek: Izdelava spletišč
81133 (1007) arjan_t
»

autocomplete="off" po w3c standardih

Oddelek: Izdelava spletišč
5883 (726) Road Runner
»

Internet strani kot slideshow

Oddelek: Izdelava spletišč
212111 (1862) sverde21

Več podobnih tem