• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Spain CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 7 posts ] 
Author Message
 Post subject: 4 Video's op een pagina'
PostPosted: Thu Sep 07, 2017 6:12 am 
Offline
Forum Members
Forum Members

Joined: Mon Sep 26, 2016 5:42 am
Posts: 61
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 4 Video's op een pagina'
PostPosted: Fri Sep 08, 2017 7:04 am 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 2973
Location: The Netherlands
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.


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 4 Video's op een pagina'
PostPosted: Sat Nov 11, 2017 7:33 am 
Offline
Forum Members
Forum Members

Joined: Mon Sep 26, 2016 5:42 am
Posts: 61
@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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 4 Video's op een pagina'
PostPosted: Sat Nov 11, 2017 2:36 pm 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1227
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/


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 4 Video's op een pagina'
PostPosted: Mon Nov 13, 2017 6:15 am 
Offline
Forum Members
Forum Members

Joined: Mon Sep 26, 2016 5:42 am
Posts: 61
@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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 4 Video's op een pagina'
PostPosted: Mon Nov 13, 2017 10:03 am 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1227
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%;
}


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: 4 Video's op een pagina'
PostPosted: Mon Nov 20, 2017 7:17 am 
Offline
Forum Members
Forum Members

Joined: Mon Sep 26, 2016 5:42 am
Posts: 61
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 7 posts ] 

All times are UTC


Who is online

Users browsing this forum: No registered users


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
HostPapa CMS Made Simple hosting