CMS Made Simple Forums

Posted: **Thu Sep 07, 2017 6:12 am**

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: Select all

<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: Select all

<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

Posted: **Fri Sep 08, 2017 7:04 am**

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.

Posted: **Sat Nov 11, 2017 7:33 am**

@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: Select all

	<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: Select all

 	</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

Posted: **Sat Nov 11, 2017 2:36 pm**

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/

Posted: **Mon Nov 13, 2017 6:15 am**

@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

Posted: **Mon Nov 13, 2017 10:03 am**

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: Select all

.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%;
}

Posted: **Mon Nov 20, 2017 7:17 am**

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

Code: Select all

<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

CMS Made Simple Forums

4 Video's op een pagina'

4 Video's op een pagina'

Re: 4 Video's op een pagina'

Re: 4 Video's op een pagina'

Re: 4 Video's op een pagina'

Re: 4 Video's op een pagina'

Re: 4 Video's op een pagina'

Re: 4 Video's op een pagina'