Video s/films op eigen site.

Status
Niet open voor verdere reacties.
joanne

joanne

Terugkerende gebruiker
Lid geworden
31 mrt 2001
Berichten
1.300
Ik krijg af en toe leuke fims opgestuurd via whatsapp en wil die de moeite waard zijn op mijn eigen website zetten.
Hoe hoe doe ik dat. Wil niet eerst naar youtube.

Meestal zijn het mp4 s.

:rolleyes:
 
Hangt uiteraard af van het platform, de hosting en de builder van je website. Als je een eigen website hebt zul je wel een handleiding hebben waarmee je die website onderhoudt, toch ?
Generiek moet het bestand gecopieerd op de hosting en afhankelijk van de webbuilder op een of andere manier als een link op een pagina worden gezet... Hoe je dat doet zal je dus in de werkwijze van die builder moeten vinden.
 
Normaal gesproken kan je deze via SFTP of FTP gewoon uploaden. En met de video-tag embedden.
 
PHP4U zei:
Normaal gesproken kan je deze via SFTP of FTP gewoon uploaden. En met de video-tag embedden.
Klik om te vergroten...

Stuk kernachtiger geformuleerd dan wat ik duidelijk probeerde te maken, maar daar komt het op neer !
 
Hoi @joanne, weet niet wat voor soort website je hebt, bij bijv WordPress en Joomla kan je net zoals je een foto plaatst ook een video uploaden naar je website. Beste m.i. is wel om het via youtube of vimeo te "embedden". Die platformen zijn er speciaal voor gemaakt.
 
Kijk ook na hoeveel ruimte je hebt op je hosting. Als je veel filmpjes upload naar je website (lees ruimte hosting), gaat je ruimte wel snel vol zitten. Beste is echt om het via youtube te doen, je kan het dan delen op je website.
 
Het kan op beide manieren.
mp4 naar je eigen provider uploaden en weergeven op je pagina met een javascript video player,
of uploaden naar youtube en dan op je pagina weergeven in een iframe (of via een javascript video player).

De eenvoudigste manier is uploaden naar youtube en weergeven in een <iframe>.
 
Anyway..dank voor jullie reacties. Met meeste kan ik iets mee.

BTW heb geen wordpress (niet meer) of Joomla...ooit iets mee gedaan.

Met youtube <iframe) heb ik idd iets mee gedaan lang gelee. En gaat goed.

Bootstraps wel.

Onderhoud van eigen website doe ik al regelmatig met andere onderwerpen.
Iets wat je regelmatig doet en bewerkt gaat juist als fluitje van een cent.

OK thx :thumb: nogmaals.

:D
 
Laatst bewerkt:
De standaard <video> in html heeft wat nadelen. Het is niet responsive (weergave op smartphone, tablet, enz.) en het ziet er in elke browser anders uit.

Klik eens hier als je een video player zoekt die in elke browser hetzelfde wordt weergegeven.
Er zitten ook players tussen die youtube kunnen afspelen.
 
Dank voor je ideetjes.
Via ytube het simpelst.

Toch zal dit de insiders bekend voorkomen.

Code: 
<video width="320" height="240" controls poster="LEEG/hondmetcorona.jpg">
 <source src="LEEG/day1.mp4" type="video/mp4"
>

<source src="LEEG/day2.mp4" type="video/mp4">

Alleen krijg volgende video niet te zien. Moet toch met ergens met next??
 
Laatst bewerkt:
Het was effe zoeken maar een aantal jaren terug heb ik een simpele youtube speler gemaakt met een playlist erbij. Zelfs al heb je 30 youtube's op 1 pagina dan gaat het laden nog steeds erg snel. En het werkt in elke browser en ook op smartphone en tablet.
Dit is de html met als voorbeeld 3 filmpjes in de playlist.
Code: 
<!-- youtube javascript voor playlist  -->
<script type="text/javascript">function ytplay(v){var ytp=document.getElementById('ytplayer');
ytp.src='//youtube.com/embed/'+v+'?autoplay=1&rel=0&showinfo=0&autohide=1';scroll(0,125);}
</script>

<!-- YouTube iframe -- zet in de iframe alvast het 1e nummer  -->
<div class="iframe-16-9">
<iframe id="ytplayer" type="text/html" frameborder="0" width="560" height="315" src="https://www.youtube.com/embed/ELKbtFljucQ?version=3&autoplay=0&rel=0&showinfo=0&autohide=1" allowfullscreen></iframe>
</div>

<!-- playlist -->
<div class="yt-playlist">
   <a class="yt-item" onClick="ytplay('ELKbtFljucQ')" href="javascript:void(0)">
      <div class="yt-thumb">
         <img src="http://img.youtube.com/vi/ELKbtFljucQ/0.jpg" alt="" />
      </div>
      <div class="yt-desc">
         <h3>Paolo Nutini - Iron Sky</h3>
         <p>Hier kan je wat tekst over Paolo Nutini zetten.</p>
      </div>
   </a>
   <a class="yt-item" onClick="ytplay('mdiBvuhnyQo')" href="javascript:void(0)">
      <div class="yt-thumb">
         <img src="http://img.youtube.com/vi/mdiBvuhnyQo/0.jpg" alt="" />
      </div>
      <div class="yt-desc">
         <h3>Steffen Morrison - A Song For You</h3>
         <p>Wat verhalen over Steffen Morrison of iets anders.</p>
      </div>
   </a>
   <a class="yt-item" onClick="ytplay('C_3d6GntKbk')" href="javascript:void(0)">
      <div class="yt-thumb">
         <img src="http://img.youtube.com/vi/C_3d6GntKbk/0.jpg" alt="" />
      </div>
      <div class="yt-desc">
         <h3>Zayn - PillowTalk </h3>
         <p>Achtergrond informatie over Zayn enzovoort.</p>
      </div>
   </a>
</div><!--/playlist-->

Om alles een beetje netjes op het scherm te krijgen is dit de css
Code: 
/* container */
.iframe-16-9, .yt-playlist {
   width: 90%;
   margin: 0 auto;
   box-sizing: border-box;
}
.iframe-16-9 *, .yt-playlist * {
   box-sizing: border-box;
}
@media (min-width: 768px) {
   .iframe-16-9, .yt-playlist {
      width: 50%;
   }
}
/* youtube iframe */
.iframe-16-9 {
   position: relative;
   display: block;
   padding: 0;
   overflow: hidden;
}
.iframe-16-9::before {
   display: block;
   content: "";
   padding-top: 56.25%;
}
.iframe-16-9 iframe {
   position: absolute;
   top: 0; bottom: 0; left: 0;
   width: 100%;
   height: 100%;
   border: 0;
}
/* playlist */
.yt-playlist {
   margin-top: 30px;
   border-top: 1px solid #ccc;
}
.yt-item {
   display: block;
   width: 100%;
   margin: 0;
   padding: 5px 0;
   text-decoration: none;
   overflow: hidden;
   border: 1px solid #ccc;
   border-width: 0 0 1px 0;
}
.yt-item:hover, .yt-item:active, .yt-item:focus {
   outline: none;
   text-decoration: none;
}
.yt-item::after {
   display: block;
   clear: both;
   content: "";
}
.yt-thumb {
   float: left;
   width: 25%;
}
.yt-thumb img {
   width: 100%;
   margin: 0;
   padding: 0;
}
.yt-desc {
   float: left;
   width: 75%;
   padding-left: 15px;
}
.yt-desc h3, .yt-desc p {
   margin: 0;
   padding: 0;
   font-size: 18px;
   line-height: 1.6;
   color: #333;
}
.yt-desc p {
   font-size: 16px;
   line-height: 1.5;
}

Als je geen playlist wilt hebben dan kan je het script weglaten, de playlist uit de html halen, en de css die voor de playlist is eruit laten.
 
Laatst bewerkt:
Ok Bron,,thx..ga het uitzoeken.

Nog geen tijd voor gehad.

:):D
 
Dat werkt dus wel met YouTube. HTML zelf kent geen playlist methode in de video-tag.
Dat je meerdere video's kan opgeven heeft te maken met compatibiliteit, zodat je dezelfde video in een ander gerenderd formaat kan serveren als de ene niet werkt.
Dit zag je vaak met .ogg en .mp4 bestanden. Maar in de praktijk werkt .mp4 bijna in elke browser.
 
Dat werkt dus wel met YouTube
Klik om te vergroten...
Yep, het werkt niet met de <video>

De <video> ben ik vaker mee bezig geweest, het is een vreselijk ding qua vormgeving.
Daarom zijn er veel player libraries omheen gemaakt die de <video> verbergen en met de API werken.
 
Ikzelf gebruik ook VideoJS als speler op mijn website. Die is makkelijk te stylen en uit te breiden.
Ook ondersteunt deze YouTube video's.
 
PHP4U zei:
Ikzelf gebruik ook VideoJS als speler op mijn website. Die is makkelijk te stylen en uit te breiden.
Ook ondersteunt deze YouTube video's.
Klik om te vergroten...

Gebruik je die icm een wordpress website en dan een plugin? Of via de code op een pagina.
 
Ik gebruik geen WordPress. Zelf ingebouwd.
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan