Embed videos and audios in the web pages
Embed videos and audios in the web pages
With the TYPO3 element Text&Media, videos and audio files (MP3) can be embedded in the same way as static graphics. A suitable player is then automatically activated. With an additional step, this even works with videos from YouTube or Vimeo.
Embed video and audio
If a video or audio is to be embedded in a website, there are various options:
- Either you provide your own video or audio file in TYPO3 and then use it in the website. To do this, first upload your video (MP4) or audio (MP3) as a file in the file list and then embed it as a medium in a Text&Media element - just as you would embed normal graphics.
- Or you can insert a video from YouTube or Vimeo via URL (http address of the video):
- In the file list, go to a suitable subdirectory and click on the [New] button there (see Fig. 1).
- Insert the http address of the YouTube or Vimeo video and confirm with the [Add medium] button (Fig. 2).
- You will then see the entry in the existing files and use it from there as if it were a separate file. (Fig. 3)
Alternative: Use the play button to link to YouTube
It is often more practical to link directly to YouTube than to place a YouTube video on the website. Instead, an image can be used as a preview on the website itself and linked to the YouTube website. This method also avoids the data protection problem that always arises when a YouTube video is placed on the university website without the visitor's permission.
- Firstly, insert an image, ideally showing a snapshot from the video, in a text & media element.
- Insert the YouTube address in the link field associated with the image
- In the properties of the Text&Media element in the "Advanced" tab, insert the word
playbuttonin the"CSS class for content element" field. This will automatically display a play button floating above the photo to illustrate the film functionality. - Save element.
Examples
Here are examples of audio and video integration.
Play streaming videos / MP4 files (with start image)
A special case is the streaming of videos. We provide this for larger events and live streams, for example. The stream can be embedded on TYPO3 pages. We offer a special content element for this:
- Selection in "Special elements":"UOL Video (Streaming / mp4)"
Settings in the "Plug-in" tab:
- Streaming URL: The streaming URL must be entered here (not the URL with .html at the end). A typical streaming URL (HLS) from us starts with https ://bbbstream.uol.de/hls and ends with .m3u8. Alternatively, an mp4 file can be selected via the file browser.
- Mimetype: The selection "automatic" is recommended. Alternatively, the mimetype can be specified explicitly: For HLS streaming, "application/x-mpegurl" must be selected. The mimetype "video/mp4" is required for the default demo video or another mp4 file.
- Start image: A start image can be selected here.