Videon ja äänen upottaminen HTML5-tageillä Fronterissa

Fronter-sivulle voi upottaa Fronteriin tallennettuja video- ja äänitiedostoja. Tämä vaatii muutaman alla kuvatun askeleen läpikäymistä. Esimerkissä upotetaan video, mutta samat askelet toimivat myös äänitiedostojen kanssa. 

Huomaa: Tämä ohje koskee vain Fronteriin tallennettuja videotiedostoja. Youtube-videot voit hakea suoraan Youtubesta editorin Lisää, tallenna ja upota sisältöjä -painikkeella.

Tallenna video Fronter-huoneesi arkistoon

Tallenna videosi haluamasi sivun resurssikansioon.

Ota videon linkki talteen

Napsauta arkistokansiossa olevaa videota hiiren oikealla painikkeella, ja kopioi linkki/oikopolku siihen.

Luo sivullesi uusi tekstialue

Voit tietysti lisätä videon myös jo aiemmin lisätylle tekstialueelle.

Muokkaa tekstialueen koodia

Fronter_Editor_koodiNapsauta editorin muokkaustilassa Koodi-painiketta. Jos painike ei ole näkyvissä, tarkista, onko editorin valikot supistetussa tilassa (editorin työkalurivillä voi olla väkänen tai kolme pistettä, joita napsauttamalla saat lisävalikot näkyviin).

Nyt voit muokata tekstialueesi HTML-lähdekoodia. Huomaathan, että jos muokkaat olemassa olevaa tekstialuetta, ole varovainen, ettet vahingossa poista mitään tarpeellista.

Liitä videosi HTML-upotuskoodi

Liitä tekstialueen lähdekoodiin seuraavanlainen upotuskoodi:

<video controls="" width="400px">
 <source src="[arkistosta kopioimasi linkki videoon]" type="video/mp4" />
Vaihtoehtoinen teksti vanhoille selaimille, jotka eivät tue HTML5:ä.
</video>

Video-tägi tukee seuraavia videotyyppejä, muista laittaa videotiedostoasi vastaava oikea muoto kohtaan type=””.

  • video/mp4
  • video/webm
  • video/ogg

Tässä esimerkissä annoimme videolle tietyn leveyden (width). Osoitteesta w3scools.com löydät lisätietoja ja esimerkiksi lisäohjeita äänitiedostojen lisäykseen.

Napsauta koodinäkymä pois ja tallenna

Kun napsautat taas koodi-painiketta, palaat editorin normaaliin muokkausnäkymään. Voit nyt jatkaa tekstin muokkausta, tai tallentaa sen.

Huomaa: jos kopioit huoneen, videoupotuksen linkkiä ei automaattisesti muuteta. Samat askeleet kannattaa kopiossa siis käydä läpi uudelleen, jotta uuden huoneen jäsenet näkevät videon ongelmitta.

 

Tapio vastaa itslearning Suomen palvelutoiminnasta, ml. käyttötuki molemmille oppimisympäristöille.

Ei kommentteja

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Näytä tuotekohtaiset artikkelit

Viimeisimmät viserrykset

Vielä on hetki aikaa suunnitella matkaohjelmaa BETTiin. Tervetuloa Sunborn Yacht Hotel -alukselle mukaan EdTech-alan kiinnostavimpiin esityksiin - ilmoittautumiset: itslearning.com/fi/s… pic.twitter.com/eRjA…

reply · retweet · favorite

Artikkeliarkisto