13 berichten aan het bekijken - 1 tot 13 (van in totaal 13)
  • Q:
    Bijdrager
    iQuinten

    Het afspelen van QuickTime op website

    Hallo OMT’ers
    Ik ben bezig met een website, ik heb alleen een vraag.
    Ik heb nergens op het internet (duidelijk) kunnen vinden hoe je een QuickTime filmpje afspeelt zoals Apple dat doet. Weet iemand hoe dit moet? Ik werk met Google’s Blogger.

    Bijdrager
    Wyodor

    Naar code kijken :

    Het <video> element dus.

    En hier een pagina die ik ooit heb nagemaakt :

    http://www.wyodor.net/_Movies/AppleGrid/

    Het zit allemaal in de code.

    PS en hier nog een met <video> incl 3 soorten : m4v, ogv en webm.:

    http://www.wyodor.net/htmlegg/SmallCard/SmallVideo.html

    Bijdrager
    martijnG

    Ik zou zeker niet alleen voor het video element gaan. Video element is HTML5 en wordt niet native ondersteunt door IE8 en lager. Daarnaast moet je voor elke video stream apart gaan aanbieden.

    Ik denk dat het makkelijker is om de video’s met YouTube Iframe methode te gaan gebruiken. Youtube zelf doet dan al het lastige werk om het browser compatible te maken.

    Bijdrager
    Shmoo

    Door het video bestand te openen in QT en dan in het menu op Exporteer voor Web te drukken dan komt alles kant en klaar in een mapje te staan en kun je de code(s) zo uit het iFrame bestand pakken en in je website plaatsen.

    Bijdrager
    iQuinten

    Ik krijg dat niet voor elkaar hoor

    [mod name=Hansi2124 url=/profiel/hansi2124]Quote niet het complete verhaal wat direct boven jouw reactie staat.[/mod]

    Bijdrager
    iQuinten

    Ik heb geen idee hoe ik dat moet doen via Blogger

    Bijdrager
    Shmoo

    Ik ben niet heel erg thuis in de Blogger wereld maar van wat ik gezien heb bij andere mensen moet je vrij makkelijk HTML code kunnen toevoegen in de bestanden van het thema.

    Controleer dus eerst of je in de bestanden kunt komen en ga op zoek naar een bestand dat header heet. Open deze en kijk of je aan het begin iets ziet dat met <html> begint en een paar regels omlaag moet dan een tag staan als <head>

    Let’s start.

    Stap 1)

    – Open de video in QT
    – Druk op Play en Stop om te testen of hij werkt.
    – Zo ja, druk in het menu op Archief > Exporteer voor web. (naar desktop)

    Stap 2)

    Op je desktop heb je nu een nieuw mapje staan met daarin alle bestanden die je nodig zult hebben.
    Open dit mapje en upload-/kopieer de complete Resources folder naar een webhosting omdat je bij Google geen bestanden kan-/mag hosten.
    Iedereen heeft op vandaag wel een webhosting of een Dropbox (plubic map) in het goedkoopste geval.

    Daarna open je het bestand iFrame.html op je computer in Safari of elke andere browser en begin te lezen wat er staat. Er staat namelijk precies wat je moet doen..

    Stap 3)

    Dit is miss. iets moeilijker te begrijpen maar eigenlijk is het ook weer heel logisch.
    Wat je nu moet doen is zorgen dat er bepaalde codes in de HTML broncode van jouw Blogger-website komen te staan.. MAAR omdat je bij Blogger geen mogelijkheid hebt om bestanden te hosten moeten we de codes iets gaan aanpassen namelijk de URL veranderen.

    Dus eerst grijp je uit het input-vuld van de iFrame pagina de eerste code die er ongeveer zo uit zal zien.

    <br />
    <script src="scripts/prototype.js" language="JavaScript" type="text/javascript"></script><br />
    <script src="scripts/qtp_poster.js" language="JavaScript" type="text/javascript"></script><br />
    <link href="stylesheets/qtp_poster.css" rel="StyleSheet" type="text/css" /><br />
     

    Deze codes moet je in het HEAD gedeelte van je Blogger website zien te krijgen.
    Dus open dat header bestand bij Google en zoek naar deze twee tags in de broncode (vrij bovenaan)

    <br />
    <head><br />
    ….<br />
    …<br />
    ….<br />
    </head><br />
     

    Dat wil zeggen dat dit het HEAD gedeelte van jouw website is en daar tussen moeten deze codes geplakt worden, voor het beste resultaat plak je ze precies voordat de head tag weer sluit, dus voor de </head> tag
    Like this..

    <br />
    <head><br />
    …<br />
    …<br />
    ….<br />
    <script src="h*ttp://jouw-domein.nl/Resources/scripts/prototype.js" language="JavaScript" type="text/javascript"></script><br />
    <script src="h*ttp://jouw-domein.nl/Resources/scripts/qtp_poster.js" language="JavaScript" type="text/javascript"></script><br />
    <link href="h*ttp://jouw-domein.nl/Resources/stylesheets/qtp_poster.css" rel="StyleSheet" type="text/css" /><br />
    </head><br />
     

    Daarna moet je URL(s) nog aanpassen naar de lokatie waar jij de bestanden online hebt geplaatst. zie hierboven!

    Het laatste dat je moet doen is de video zelf nog plaatsen en de url aanpassen.
    Deze code staat op de iFrame.html pagina in het tweede input-veld en mag je plaatsen op de pagina of in een sidebar daar waar je wilt.

    Let wel op als je deze code plaatst in een blog post dan is het beter om even naar de HTML view te switchen en niet in WYSIWYG mode te blijven. Dit is HTML code en meestal werkt dat niet goed in een visuele editor.

    <br />
    <a href="//jouw-domein.nl/Resources/funny_movie.mov" rel="qtposter"><br />
    <img src="https://www.onemorething.nl/wp-content/themes/onemorething/external-image.php?src=h*ttp://jouw-domein.nl/Resources/funny_movie.&ext=jpg&h=d1bb5cf1bf1ce798ffbcc21aa60a1054&t=1582915380" width="853" height="496" alt="funny_movie"/><br />
    </a><br />
     

    * Optioneel, zodra je dit allemaal werkend hebt kun je er nog een eigen draai aan geven door het film-titel.jpg bestand aan te passen, dit is namelijk een screenshot die mensen te zien krijgen voordat ze op play drukken.

    Succes,

    Bijdrager
    iQuinten

    Hee top man!
    Ik ga het morgen direct uitproberen. Eerst eventjes paar uurtjes slaap pakken:)

    [mod name=Hansi2124 url=/profiel/hansi2124]Quote niet het complete verhaal wat direct boven jouw reactie staat.[/mod]

    Bijdrager
    Wyodor

    Allemachtig, wat een hoop uitleg om niks.

    Zet je film op een server al of niet getoond in een webpagina.

    Plak dan een iframe in je blog en link naar die film of pagina met film.

    Hiero, een filmpje, weliswaar Flash maar dat is irrelevant :

    http://blog.wyodor.net/2009/05/nog-maar-eens-een-blog.html

    En dit is filmpje :

    http://www.wyodor.net/MoreEmbed/videobox_sans_js.html

    Bijdrager
    jobz

    Offtopic: @iQuinten het quoten van een (lange) post boven je hoeft niet. Dan gaan we het twee keer lezen en dat is niet nodig;-)

    Bijdrager
    Shmoo

    @Wyodor,

    Ik help alleen maar zodat mensen met minder kennis het kunnen begrijpen en ben niet bezig om in elk bericht dat ik plaats min. 2 linkjes naar mijn eigen website te plaatsen.

    Is het je wel eens opgevallen hoe vaak jij naar je eigen website linkt?

    Tot nu toe heb je meer linkjes op het OMT forum geplaatst dan totale reacties gegeven.
    Niet erg netjes en al helemaal niet geloofwaardig.

    Bijdrager
    iQuinten

    Ik heb nog een probleempje, het is wel gelukt maar als ik de video wil starten gaat hij naar de dropbox site waar het filmpje opstaat!

    Bijdrager
    Shmoo

    Bij mij werkt het perfect dus controleer de linkjes even en gebruik niet de codes die ik hier op OMT gebruikt omdat die corrupt zijn door het falen van de [ Code ] button op OMT.

    Dus copy-/paste de code vanaf de iFrame.html pagina en verander dan de linkjes handmatig.

    Btw, wordt deze video op de Dropbox site in een nieuw venster of tab geopend ?
    Het zou me namelijk niets verbazen als Google (Blogger’s eigenaar) Dropbox zou hebben geblokkeerd zodat je YouTube moet gebruiken.

13 berichten aan het bekijken - 1 tot 13 (van in totaal 13)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.