Embedding videos and audio files with HTML5 tags
It is possible to embed video and sound files stored in Fronter in the page application. Following are the steps to be followed to achieve this. We use video files as examples. Follow the same steps for sound files.
Upload a video in resources
Use the file uploader to upload the video to the resource folder of the room you will create the page.
Open the video in new tab and copy the URL
Right click on the video file you uploaded, and open it in a new tab or window. Mark the URL address shown in top of your browser and copy that URL by clicking ctrl+c.
Create a new page and select "Insert text"
You can of course also do this in a text container in an existing page.
In the text editor click on source button
If you cannot find a button saying "Source", try pressing the button with the three dots to get an expanded set of buttons. You are now getting into HTML code mode. HTML codes can be confusing if you do not know them. To avoid breaking the page, we recommend that you do not follow the remaining steps unless you are sure about what you are doing.
Enter HTML code to embed video
<video controls="" width="400px">
<source src="/The URL you copied" type="video/mp4" />
Alternative text to show in old browsers
The video tag supports the following types:
In the example above we added a specific width to the video. You can also use other attributes. Please see w3scools.com for more information, and the details about how to use sound files.
Some old browsers will not play videos in this way. To support them, you can add a text similar to what we did in the example above.
Click on Source button and click save
By clicking the source button again, you get back to the normal view and can save the page or keep working on it.
Please note: If you copy the room, the embedded video will still point to the original room. That means that users who do not have access to the original room won't be able to view the video.
Posted on Mon, April 27, 2015
by Sarah Voit filed under