CMS Made Simple Forums
https://forum.cmsmadesimple.org/

4 Video's op een pagina'
https://forum.cmsmadesimple.org/viewtopic.php?f=13&t=77232
Page 1 of 1

Author:  Ivanflo [ Thu Sep 07, 2017 6:12 am ]
Post subject:  4 Video's op een pagina'

Hallo mensen,
Ik heb opnieuw een enigenaardigheidje.

dit vindt u op deze pagina.
http://ivanflo.sytes.net/cms1/index.php?page=bipolair

Het is de bedoeling dat ik elke video apart kan starten/pauze /skip pauze

Eerste video

Code:
<button onclick="playVid()" type="button">Play Video</button>&nbsp;&nbsp;&nbsp;
<button onclick="pauseVid()" type="button">Pause Video</button>&nbsp;&nbsp;&nbsp;
<button onclick="location.href = 'http://ivanflo.sytes.net/cms1/index.php?page=bipolair';" id="myButton" class="float-left submit-button" >Skip Video</button>
<video id="myVideo01" width="100%" >
  <source src="http://hetmosterdzaadje.be/Very%20angry%20man%20Destroying%20his%20car%20completely.mp4" type="video/mp4">
</video>
<__script__>
var vid = document.getElementById("myVideo01");

function playVid() {
    vid.play();
}

function pauseVid() {
    vid.pause();
}
</__script>


Tweede video

Code:
<button onclick="playVid()" type="button">Play Video</button>&nbsp;&nbsp;&nbsp;
<button onclick="pauseVid()" type="button">Pause Video</button>&nbsp;&nbsp;&nbsp;
<button onclick="location.href = 'http://ivanflo.sytes.net/cms1/index.php?page=bipolair';" id="myButton" class="float-left submit-button" >Skip Video</button></br>
<video id="myVideo" width="100%" >
  <source src="http://hetmosterdzaadje.be/Jones.mp4" type="video/mp4">
</video>
<__script__>
var vid = document.getElementById("myVideo");

function playVid() {
    vid.play();
}

function pauseVid() {
    vid.pause();
}
</__script>


Enzo verder.

Willen jullie alle video's, no problems, ik post deze

Alvast Bedankt
Ivan

Author:  velden [ Fri Sep 08, 2017 7:04 am ]
Post subject:  Re: 4 Video's op een pagina'

Je voorbeeld code komt niet overeen met de werkelijkheid, want meerdere <video> elementen op je pagina hebben één en dezelfde ID. Dat is niet toegestaan en leidt dus tot problemen zoals deze.

Je zult het dynamischer moeten maken zodat de play/skip/pause functie(s) weten op welke video ze de actie moeten toepassen.

Author:  Ivanflo [ Sat Nov 11, 2017 7:33 am ]
Post subject:  Re: 4 Video's op een pagina'

@Dev Team Member

Geachte,

Ik heb geen kaas gegeten van programmeren.
Zoals ik begrepen heb uit uw post werkt mijn op bouw voor geen meter zal werken.

In de Video's steekt een ID() commando. Ik daar mee gegoocheld, nopes.
Ik alles in aparte pagina's gestopt, no luck.
Weet je ik ben zowat een beetje op het einde van mijn latijn wat betreft het empirisch gedoe.

Vandaar wil ik graag alles aanbieden. Als ik een (voor een leek) begrijp begrijp bare oplossing kan geven. ...

Video 1
Code:
   <p> </p>
   <button onclick="playVid()" type="button">Play Video</button>&nbsp;&nbsp;&nbsp;
   <button onclick="pauseVid()" type="button">Pause Video</button>&nbsp;&nbsp;&nbsp;
   <button onclick="location.href = 'http://ivanflo.sytes.net/cms1/index.php?page=bipolair';" id="video" class="float-left submit-button" >Skip Video</button><p> </p>
   <video id="video" width="100%" >
     <source src="http://hetmosterdzaadje.be/Very%20angry%20man%20Destroying%20his%20car%20completely.mp4" type="video/mp4">
   </video>
   <__script__> 

   function playVid(vid01)
   {
      vid.play(id01);
   var vid = document.getElementById("vid01"); 
   }

   function pauseVid(vid01)
   {
      vid.pause(id01); 
   var vid = document.getElementById("vid01");
   }
   </__script>


Video 2
Code:
    </video>
   <p> </p>
   <button onclick="playVid("")" type="button">Play Video</button>&nbsp;&nbsp;&nbsp;
   <button onclick="pauseVid("")" type="button">Pause Video</button>&nbsp;&nbsp;&nbsp;
   <button onclick="location.href = 'http://ivanflo.sytes.net/cms1/index.php?page=bipolair';" id="button" class="float-left submit-button" >Skip Video</button><p> </p>
   <video id="" width="50%" >
     <source src="http://hetmosterdzaadje.be/Jones.mp4" type="video/mp4">
   </video>
      <__script__> 

   function playVid(vid01)
   {
      vid.play(id01);
   var vid = document.getElementById("vid01"); 
   }

   function pauseVid(vid01)
   {
      vid.pause(id01); 
   var vid = document.getElementById("vid01");
   }
   </__script>


Video 3
Video 4

De 3& 4 video zijn identiek, behalve de video zelf.

De bedoeling is dat alles in een tabel word gegoten.
Ik zou 4 verschillende HTML blokken aanmaken?
En die "verwijzingen dan in de tabel integreren.

1000*Dank

Ivan FLO.

PS, dit zou het eindresultaat moeten zijn. Met video's uiteraard

Author:  arnoud [ Sat Nov 11, 2017 2:36 pm ]
Post subject:  Re: 4 Video's op een pagina'

Dit soort code snippets zou je het best kunnen plaatsen op een site als JSFiddle / CodePen. Dan hoef je alleen maar de link naar je snippet te plaatsen en kunnen andere je implementatie direct openen in de browser.

Ik heb iets gebrouwen wat met meerdere video's werkt:

https://jsfiddle.net/FrontEndStudio/r8hruw6u/

Author:  Ivanflo [ Mon Nov 13, 2017 6:15 am ]
Post subject:  Re: 4 Video's op een pagina'

@arnoud

Het heeft een tijdje geduurd vooraleer ik het systeem door had. Ik ben geen, zoals reeds gezegd, programmeur.


Het is een prachtige tool. Waarvoor 1000 Dank. (10³dank).

Het zijn vier video's, ik moet ze nog een beetje in lijn plaatsen met mijn tabel. Maar daar slaag ik wel in.

Nogmaals van harte bedankt.

Ivan

Author:  arnoud [ Mon Nov 13, 2017 10:03 am ]
Post subject:  Re: 4 Video's op een pagina'

Je kunt ze plaatsen hoe je wilt (tabel / div maakt niet uit), ze zullen altijd schalen naar de ruimte waarin je ze plaatst.

Hier nog een voorbeeldje waarbij ik laat zien hoe je de ratio, verhouding van het videobeeld kunt aanpassen. 9:6 - 4:2 - 3:2 - 1:1

** View compiled CSS **

https://codepen.io/frontendstudio/pen/bYWJRG

https://github.com/FrontEndStudio/cmsms ... video.scss


Code:
.video-9-6 {
  width: 100%;
  height: 0;
  padding-bottom: 66.66667%;
}

.video-4-2 {
  width: 100%;
  height: 0;
  padding-bottom: 50%;
}

.video-3-2 {
  width: 100%;
  height: 0;
  padding-bottom: 66.66667%;
}

.video-1-1 {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

Author:  Ivanflo [ Mon Nov 20, 2017 7:17 am ]
Post subject:  Re: 4 Video's op een pagina'

Mijn excuus voor het lange aanslepen van mijn oplossing
Ik heb elke video in een HTML blok gestopte

Code:
<video width="100%" controls>
 <source src="http://hetmosterdzaadje.be/Leven%20met%20de%20Zwarte%20Hond%20die%20Depressie%20heet.mp4" type="video/mp4"
</video>


Dit HTML-Blok in mijn tabel gegoten
Met dit als resultaat
http://ivanflo.sytes.net/cms1/index.php?page=bipolair
....Van harte bedank iedereen

Ivan

Page 1 of 1 All times are UTC
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
http://www.phpbb.com/