4 Video's op een pagina'

Nederlandse ondersteuning voor CMS Made Simple

Moderator: velden

Post Reply
Ivanflo
Forum Members
Forum Members
Posts: 61
Joined: Mon Sep 26, 2016 5:42 am

4 Video's op een pagina'

Post by Ivanflo »

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
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: 4 Video's op een pagina'

Post by velden »

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

Re: 4 Video's op een pagina'

Post by Ivanflo »

@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
deactivated010521

Re: 4 Video's op een pagina'

Post by deactivated010521 »

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

Re: 4 Video's op een pagina'

Post by Ivanflo »

@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
deactivated010521

Re: 4 Video's op een pagina'

Post by deactivated010521 »

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%;
}
Ivanflo
Forum Members
Forum Members
Posts: 61
Joined: Mon Sep 26, 2016 5:42 am

Re: 4 Video's op een pagina'

Post by Ivanflo »

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
Post Reply

Return to “Dutch - Nederlands”