offline een video weergeven in html

[p3t3r]

Hallo,

Ik zoek voor een eindwerk een website te maken, ik zou dit wel niet online zetten maar op een cd-rom branden.
Ik probeer nu al een tijdje om de filmpjes die ik gedownload heb te laten afspelen op de site.
Ik zou ze namelijk graag hebben dat wanneer je op een fotootje klikt er een nieuwe laag over de pagina komt met het filmpje.
Het rare is dat ik die laag heb en werkt met online filmpjes en dat de filmpjes die ik heb ook werken op de gewone pagina maar niet op de laag.

Voor die laag heb ik deze site gebruikt: http://videobox-lb.sourceforge.net/

Voor het filmpje gebruikte ik deze code

<object id="MediaPlayer1" width=640 height=360 	classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"	
						codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701"        
						standby="Loading Microsoft® Windows® Media Player components..."         
						type="application/x-oleobject" align="middle">    
							<param name="FileName" value="locatiefilm.wmv">
							<param name="ShowStatusBar" value="True">   
							<param name="ShowControls" value="true">  
							<param name="DefaultFrame" value="mainFrame"> 
							<param name= "uimode" value= "invisible"> 
							<param name= "Volume" value="100">
						<embed type="application/x-mplayer2" 	
pluginspage = "http://www.microsoft.com/Windows/MediaPlayer/"	src="locatiefilm.wmv" align="middle"	width=640	height=360	defaultframe="MainFrame">    </embed>
					</object>

als er voor de code een kortere, makelijker manier is mag je me dat ook zeggen.

Ook zou het handig zijn dat dit allemaal werkt in safari want mijn leerkracht gebruikt apple.

Alvast bedankt

 

[p3t3r]

Het is me uiteindelijk gelukt, ik heb een andere lightbox (http://www.pirolab.it/pirobox/) gebruikt en met nog wat prutsen ik er in geslaagd

 

[p3t3r]

Nu controleer ik wat ik gedaan heb in een andere webbrowser en nu merk ik dat wanneer ik de lightbox sluit het filmpje niet weg gaat.
Hoe kan ik dit aanpassen?

 

[csshunter]

Hoi p3t3r,

... Hoe kan ik dit aanpassen?

Daar valt eigenlijk geen zinnig woord over te zeggen, als we geen online testpagina kunnen zien, niet over de complete html-, css- en javascript-code beschikken, en ook niet weten welke "andere webbrowser" het is...

• Het mooiste is een online testpagina. Heb je die of kan je die maken?
• Volgens de site van Pirobox zou het moeten werken in: FireFox 2+, Opera9.5+, Chrome, Safari (Mac/Windows) en IE 7+. Dat is dus zo ongeveer alles. Of is het bv. een Linux machine met een andere browser? Of een tablet of mobieltje, enz.?

Met vriendelijke groet,
CSShunter

 

[p3t3r]

hallo csshunter,

bedankt dat je me wilt helpen, ik heb snel een deel van dat 'siteje' hier geupload, nu merk ik ook dat het filmpje niet wilt starten, ervoor loste ik dat op door te beginnen met c:/ als locatie maar dat kan zo niet blijven...
en de browser waar het filmpje bleef spelen van ie, een redelijk nieuwe versie

P3t3r

 

[csshunter]

Hoi p3t3r,
Nou, deze materie ligt bezaaid met voetangels en klemmen!

Ik ben maar eens begonnen er zoveel mogelijk valid html van te maken, want je testpagina wordt opgeleukt met 42 Errors, 2 warnings, zegt de html-validator. - En html-fouten doen de werking nooit goed...
Helemaal tevreden valt de validator niet te krijgen, want <embed> is verboden waar (maar werkt wel in de browsers).

Vervolgens in IE7, Firefox, Chrome, Opera en Safari geworpen (alles onder WinXPpro).
M'n bevindingen zijn als volgt:

Internet Explorer 7
Die doet er ontzettend lang over om de Piribox in het juiste formaat te tonen:

• Eerst 6 sec. helemaal niets, dan een hele grote Piribox van 500x500px gedurende 11 sec., en dan komt het gevraagde langwerpige Piribox-formaat van 640*272px. Wat IE7 in de tussentijd allemaal aan het uitspoken is weet ik niet, maar het vreet wel 50% à 60% van mijn processorvermogen!
• Pas een paar tellen later komt de regelbalk van de Windows Media Player in zicht.
• - Maar een video: ho maar, niets te zien.
• Ook de Play-knop > van de WMP vertoont geen tekenen van leven.
• Het kruisje om de Piribox uit te zetten werkt (met even geduld) weer wel.
• Het lijkt er trouwens ook op dat IE7 soms in een loop schiet, waardoor er om de x seconden een soort automatische refresh optreedt.
• Maar ... de zaken worden heel anders als ik de Piribox uitzet. Dan komt IE7 binnen 1,5 tel met de video over de brug, spelend en wel!

Chrome, Opera en Safari

• Chrome komt vlot met de goede Piribox en de WMP-controls er in, en vertelt in het WMP-venster ook meteen enthousiast "Gereed".
• - Maar een klik op de Play-knop levert helemaal niets op.
• Uitzetten van de Piribox gaat voortreffelijk.
• Opera: hetzelfde.
• Safari: hetzelfde.

Firefox

• Die begint goed met de Piribox in de juiste maten, en ook de Piribox "even loaden" stippeltjes doen het mooi.
• Op het moment dat de WMP-player in het Piribox-venster zou moeten verschijnen, blijft echter van de Piribox alleen het randje over, en het binnenwerk wordt helemaal wit: geen WMP te zien!
• Heen weer slepen van de Piribox (die een "drag me!" functie heeft) helpt niet.
• Maar ... hier komt de hokus-pocus ... als je het browser-window verkleint of vergroot, springt de WMP opeens in het witte gat! :shocked:
• En vervolgens doet Firefox precies als Chrome, Opera en Safari: geen reactie, behalve op het Uit-knopje.

=======
Het video-formaat
Het video-bestand zit er nu in als .wmv-bestand, en daar kunnen Firefox, Chrome, Opera en Safari met de huidige code niet mee overweg.

• Maar ... als ik er even een .mpg-video voor in de plaats zet, dan doen Chrome, Opera en Safari het prachtig.
  In plaats van "Gereed" zeggen ze nu "Verbinding maken", en vrijwel meteen daarna begint de video te streamen dat het een lieve lust is.
• Firefox heeft nog steeds eerst een window-verandering nodig, dan doet die het ook. En zonder Piribox doet FF het ook met een .mpg.
• En IE7 kan ook goed met een .mpg opschieten (als de Piribox uit staat).

=======
Conclusies
1. De Piribox is dus toch niet zo goed als het lijkt.
(Of misschien heb je 'm er scheef in geplakt )

• Je zou het eerst eens kunnen proberen met een <div id="videocontainer"> waar het <object> in zit, en die standaard op {display:none;} zetten. Met een absolutie positie kan die dwars over alles heen komen.
• Met een klik op de link <a href="#" onclick="showVideo(); return false">trailer</a> kan je dan een javascript-functie in werking zetten die er display="block" van maakt.
• Binnen de <div id="videocontainer"> plaats je dan ook een knopje "Close", dat 'm via de omgekeerde functie weer van scherm tovert.
• Daarna kan je altijd nog kijken of een andere lightbox (zoals Lightbox 2) het er beter van af brengt.

2. Video-bestand converteren
Er zijn tal van (online) convertors die een .wmv kunnen omzetten in een ander video-formaat. Mocht een.mpg het onverhoopt toch niet op een browser of operating system doen, dan kan je ook een .mp4 proberen. Een .avi zal waarschjnlijk niet gaan.

3. Andere video-player
Je zou ook van de hele WMP af kunnen stappen, en bv. de JW Player (met een .mp4) kunnen gebruiken. Die ondersteunt alles: supported-video-and-audio-formats, dus ook geschikt voor de Appelaars.

Met vriendelijke groet,
CSShunter
_______________
PS: voor 1 werkstuk kan het wel, maar als je het ding op een CD gaat verspreiden, dan krijg je met "openbaarmaking" en copyright-toestanden te maken: dan moet je (vooraf) voor de afbeeldingen en trailers aantoonbare toestemming van de makers of andere rechthebbenden in bezit hebben. Zo niet, risico op rechtszaken en schadevergoedingen + proceskosten + advocatenkosten die in de vele duizenden Euri kunnen lopen.
Zie: Spoedcursus auteursrecht!

 

[p3t3r]

ey,

bedankt voor je antwoord
ik heb al snel eens gekeken naar die warnings en errors en ik ben ook al aan het converten, maar een harde enter was dacht ik toch </br>?
Naar die lightbox kijk ik ook wel even ben wel niet echt mee met javascript maar ik zoek het wel even.

 

[p3t3r]

ik denk dat ik ofwel fout zoek ofwel fout probeer want mij lukt het niet -.-"
en ik kan ook niet mijn filmpje afspelen in lightbox 2, ik denk dat daarin alleen fotos werken

 

[csshunter]

een harde enter was dacht ik toch </br>?

Nop, is: <br />

Toelichting
Het zou een sluittag </br> zijn, als er eerder een starttag <br> zou zijn geweest.
Maar ... een <br> is een leeg element, net als een <img>.
En net als een img moet een br dan (in XHTML, niet in HTML!) "zelfsluitend" worden gemaakt door op het eind de slash: <br /> en <img .... />

Wat ook nog zou kunnen in XHTML, is een <br></br> samen gebruiken voor een nieuwe regel, dan kopt het weer.
Maar hoewel dat correct is in de XHTML-grammatica, raadt w3c het af om browsers niet over de kop te jagen.

Zie: XHTML Differences with HTML 4, Empty Elements en XHTML/HTML Compatibility Guidelines, Empty Elements.

Met vriendelijke groet,
CSShunter

 

[csshunter]

Hoi p3t3r,
Ook maar eens een paar pogingen gewaagd.

Stap 1
Rechtstreeks een JW Player in de html gezet, met een mp4 als video. Verder nodig: script jwplayer.js en flash-bestand player.swf.

• Resultaat: mp4-player-1.htm
• Doet het lokaal en online in Firefox, Chrome, Opera, Safari en IE7.
• Enkele browsers geven wel een waarschuwingsbrul dat er een plugin toegestaan moet worden.
• Heb een oudere versie van de JW Player gebruikt, die uitsluitend met flash werkt. > Werkt dus niet op mobiele dingen die op iOS of Android draaien.

De laatste JW Player versie 6 heeft er ook html5-video bij, en doet het op alles.

=======
Stap 2
Een javascriptje erbij om te wisselen tussen de pagina en de video-vertoning.

• Resultaat: mp4-player-2.htm

=======
Stap 3
Met een Lightbox2 is hij niet aan de praat te krijgen: die zal inderdaad alleen voor images werken (staat ook nergens in hun documentatie dat het op andere dingen werkt). De fancyBox is een andere lightbox: die zegt "for images, html content and multi-media" te werken, en jQuery nodig heeft als basis (plus div. fancybox-bestanden).
Niet geprobeerd, maar zelf een javascript fader voor het lightbox-effect getimmerd. Zonder jQuery en maar 25 coderegeltjes.

• Resultaat: mp4-player-3.htm
• De fader is hier op een <div> gezet waar alle content behalve de video-container in zit; zou ook met een losse overlay-container kunnen die over alles heen gaat.

Met vriendelijke groet,
CSShunter

 

[p3t3r]

Heel erg bedankt

Ik had anders ook juist een scriptje gevonden maar moest dat nog aanpassen ...
Ik kan het nu alleen niet proberen of er op mijn pagina misschien nog een paar kleine foutjes zitten want ik zit atm niet thuis, dus laat je die pagina even online staan?

P3t3r

 

[csshunter]

Hoi p3t3r,
Ja hoor, die blijft er wel op staan.

 

[p3t3r]

hallo,

Klein vraagje over die jwplayer, heb jij een bestand dat player.swf noemt??
Bij mij wanneer ik die rar uitpak krijg ik: jwplayer.flash.swf, jwplayer.html5.js, jwplayer.js en README.html
Op de site zelf zijn ze in hun guides ook bezig over player.swf maar, bij mij is er dus geen en werkt het precies niet
Zou je misschien anders eens die 3 bestanden kunnen doorsturen?

 

[p3t3r]

ik heb uiteindelijk een oudere versie gebruikt van jw player een daar lukt het wel mee, bedankt

maar mag je een deel van het javascript in een apart bestand steken? zoja welk deel?
en men filmpjes geluid speelt wel maar beeld krijg ik niet :/

p3t3r

 

[p3t3r]

het beeld is al opgelost, het lag blijkbaar aan de converter.

 

[csshunter]

Hoi p3t3r,
Nou dacht ik toch dat ik gereageerd had op nummer #13 hierboven, maar zie niets staan.
Inmiddels heb je het geluid te pakken (nr. #14).
En het beeld ook (nr. #15).

Blijft over:

mag je een deel van het javascript in een apart bestand steken? zoja welk deel?

• Apart bestand: ja, in principe wel: als het javascript op de goede plek in de html-code wordt aangeroepen, en met de goede verwijzing.
• Welk deel: dat hangt van het script af.

Bij mijn voorbeeld mp4-player-3.htm kan het als volgt.
Eerst de verwijzing:

<script type="text/javascript" src="jwplayer/jwplayer.js"></script>

Dan de settings voor een bepaalde video:

<script type='text/javascript'>
jwplayer('mediaspace').setup({
	'flashplayer': 'jwplayer/player.swf',
	'file': 'jwplayer/videotest.mp4',
	...
	t/m
	...
	'height': '200'
  });
</script>

Daarna kan je een ander javascript-bestand aanroepen waar de algemene functies voor het aanzetten/uitzetten en uitfaden/infaden in zitten (voor gebruik op verschillende pagina's), bv.:

<script type="text/javascript" src="jwplayer/startplayer.js"></script>

In die startplayer.js zet je dan de hele rest:
[JS]var videoContent=document.getElementById('videoplayer').innerHTML;
var obj="otherThings";
function toggleVideo(){
...
t/m
...
else {
opacity = 100;
setBrowser(opacity);
clearTimeout(fadeIn);
}
}
[/JS]
Met vriendelijke groet,
CSShunter

 

[p3t3r]

Hallo,

ontzettend bedankt voor al de hulp, ik denk dat nu wel alles is opgelost.

p3t3r