Audio & Video
Play sound files and videos on your website. This works with an Audio & Video item that you can drag from the items to the website.
You can add an audio and video item to each area, slider area and area template. To add an audio and video item, edit the content of an area, slider or area template and drag an audio and video item from the items to the editor.
With an Audio & Video item, you can play HTML5 compatible audio and video files and YouTube movies.
Depending on what type of audio or video you want to play, you have to select the correct type at Audio & Video > Type in the properties.
HTML5 Audio and HTML5 Video
Select the type HTML5 Audio for audio files and HTML5 Video for video files in the properties at Audio & Video > Type.
Compatible Audio Formats
- MP3 (file extension .mp3)
Compatible with Safari, Chrome, Firefox, Internet Explorer and Opera - Wav (file extension .wav)
Compatible with Safari, Chrome, Firefox and Opera - Ogg (file extension .ogg, .oga)
Compatible with Chrome, Firefox and Opera
Compatible Video Formats
- MP4 H.264 (file extension .mp4)
Compatible with Safari, Chrome, Firefox, Internet Explorer and Opera - Ogg Theora (file extension .ogg, .ogv)
Compatible with Chrome, Firefox and Opera - WebM (file extension .webm)
Compatible with Chrome, Firefox and Opera
Select the desired file at Audio & Video > Media File. Because not every audio and video format is compatible with all systems and browsers, you can embed the file in multiple formats. If you want to embed the file in more than one format, select the additional files at Audio & Video > Alternative Media File.
By default, controls with buttons like Play, Pause or Full Screen will appear. If you don't want that, you can disable Audio & Video > Show controller in the properties.
You can select a poster picture for videos. This picture will appear as a placeholder until the video will be played. You can select an image in the properties at Audio & Video > Poster Picture before Playback. We suggest you to select a still, taken from the video.
By default, a large play button will be displayed on the poster picture. You can disable this in the properties or choose a custom artwork as the button picture.
YouTube
Select the type YouTube in the properties at Audio & Video > Type if you want to show a YouTube video on the page.
Look in YouTube for the desired video and paste the URL from the browser address bar in the field at Audio & Video > Video ID. Fter that, Goldfish will download a preview image and will resize the Audio & Video item.
The field Audio & Video > ID will cut out the correct ID automatically. Just paste the URL, the video ID or the embedding HTML code of a YouTube movie.
By default, the YouTube player will be displayed with title and controls. But you can change that in the properties at Audio & Video.
Properties for Audio & Video Items
These properties can be set for an audio & video item. Select an audio & video item to see its properties.
Item > Identifier (Id) | Specifies the name of the item in order to address it in animations or as a link target. Use only letters and numbers for the name, no spaces or special characters. |
---|---|
Item > Left | Sets the distance in pixels from the left side of the item to the area where the item is located. |
Item > Top | Sets the distance in pixels from the top side of the item to the area where the item is located. |
Item > Width | Sets the width of the item in pixels. |
Item > Height | Sets the height of the item in pixels. |
Item > Padding Left | Sets the distance from the left side of the item to the content in pixels. |
Item > Padding Right | Sets the distance from the right side of the item to the content in pixels. |
Item > Padding Top | Sets the distance from the top side of the item to the content in pixels. |
Item > Padding Bottom | Sets the distance from the bottom side of the item to the content in pixels. |
Item > Background Color | Select a background color for the item. |
Item > Background Picture Clip | Select a background picture from the Fishbeam Clips library. This option is only available if you have the Fishbeam Clips library installed. |
Item > Background Picture | Select a background picture for the item. With Repeat, you can choose how the picture will be displayed. On Retina websites the background picture will be displayed with double resolution, but half the size (except SVG images). |
Item > Repeat | Repeats the background picture.
|
Item > Position Horizontal | Sets the horizontal position of the background picture. If the picture will be repeated, it will be placed once on the specified position and the remaining space on the left, on the right, above and below will be filled. |
Item > Position Vertical | Sets the vertical position of the background picture. If the picture will be repeated, it will be placed once on the specified position and the remaining space on the left, on the right, above and below will be filled. |
Item > Fix relative to Browser window | The position of the background picture is calculated on the basis of the browser window. The picture is pined to the window and will not move when scrolling. The picture can be hidden or only parts are visible if it is outside of the visible space. |
Item > Border Left Width | Displays a border on the left side of the item in the choosen width (pixels). |
Item > Border Left Color | Select a color for the left border. |
Item > Border Right Width | Displays a border on the right side of the item in the choosen width (pixels). |
Item > Border Right Color | Select a color for the right border. |
Item > Border Top Width | Displays a border on the top side of the item in the choosen width (pixels). |
Item > Border Top Color | Select a color for the top border. |
Item > Border Bottom Width | Displays a border on the bottom side of the item in the choosen width (pixels). |
Item > Border Bottom Color | Select a color for the bottom border. |
Item > Opacity (%) | Makes the item transparent. From 0% (fully transparent) to 100% (completely visible). |
Item > Rotation | Rotation of the object in a clockwise direction from 0° to 360°. |
Item > Moving Mouse Over Animation | Select an animation that you have previously created with an Animation item. The animation will be started as soon as the website visitor moves the mouse over the item. |
Item > Moving Mouse Out Animation | Select an animation that you have previously created with an Animation item. The animation will be started as soon as the website visitor moves the mouse from the item. |
Audio & Video > Type | Select the type, depending on what you want to play. |
Audio & Video > Media File | Select the media file from your computer, that you want to play (not available if you have selected YouTube at Audio & Video > Type). |
Audio & Video > Alternative Media File | Select an alternative media file from your computer, that is in a different format. The browser will automatically select the appropriate format (not available if you have selected YouTube at Audio & Video > Type). |
Audio & Video > Video ID | Enter the ID, the URL or the embed HTML code of a YouTube movie (only available if you have selected YouTube at Audio & Video > Type). |
Audio & Video > Show controller | Displays controls like play, stop, pause and full screen. |
Audio & Video > Start playback automatically | Will play the media file automatically when the page has been loaded. |
Audio & Video > Looping | Will play the media file in a loop. |
Audio & Video > Start & Stop with click in display area | A click in the area of the Audio & Video item will start the playback or will paused it. (not available if you have selected YouTube at Audio & Video > Type). |
Audio & Video > Show suggestions | Displays more movies as a suggestion after playing a YouTube movie. |
Audio & Video > Show Video Title | Displays the title in the player of YouTube movies. |
Audio & Video > Play Audio Track | Plays the soundtrack of a video file. |
Audio & Video > Poster Picture before Playback | Select an image that can be seen in the video before playback begins. |
Audio & Video > Show play button on poster picture | Shows a play button on the poster picture. |
Audio & Video > Play Button Picture | Choose a custom button picture if you don't like the standard play button. |
Did this help page answer your questions?
If you need additional assistance regarding this topic or if there's missing some information in this chapter, please write us.