Coronavirus (Covid-19): Latest updates and information
Skip to main content Skip to navigation

Video clips

You can embed videos in a SiteBuilder page – the video itself can be stored in SiteBuilder or YouTube. We recommend the H.264 MP4 file format for video, as it's compatible with the majority of web browsers and devices.

Important: accessibility legislation dictates that for videos published from 23 September 2020 on the Warwick website, you must provide:

  • Captions of audio content, including what is said, who is speaking and non-speech information conveyed through sound. It is also good practice to provide a separate transcript.
  • An audio description of what is conveyed visually, including information about actions, characters, scene changes, and on-screen text that are important and are not described or spoken in the main sound track. For new videos, the easiest way to achieve this is to integrate description into what is said in the video. Another option is to provide a separate described video. The SiteBuilder video player does not currently support text-based audio description that is read aloud or a separate audio track for the description. Note that for videos with no audio, you can instead provide a full transcript describing the visual information conveyed.

The above applies unless the video is an alternative for text, and labelled as such. It also applies to videos of live events if they are available for more than 14 days. If you make changes to a page containing a video that was published before 23 September 2020, you should also provide the above.

In this article:

Upload a video to the Files tab

  1. Browse to the page where you want to add a video.
  2. Go to Edit > More, then select the Files tab.
  3. In the toolbar, select Upload.
  4. If your video is not a suitable file format for the web – for example, FLV, AVI or MOV – you may see the following message:

    “The file (yourvideo.flv) uses a proprietary video format that cannot be played back on devices that do not support Flash plugins.

    If possible, please re-encode this file as an H.264 MP4 video to maximise the compatibility.”

    You have three options:

    • Encode your video as H.264 MP4 and re-upload it to the Files tab. We recommend you use Handbrake to convert video formats when you need exact control over the conversion.
    • Select Convert video (recommended).
    • Select Do not convert. You can convert the file to H.264 MP4 in SiteBuilder later.

Convert a video to H.264 MP4 format in SiteBuilder

  1. If the video uploaded to the Files tab is not already in MP4 format, you need to convert it. This ensures that the video plays in the majority of web browsers and devices. Select the video on the Files tab, then select Convert:

    Convert button on Files tab

  2. In the Target format drop-down list, choose H.264 MP4 video:

    Convert file options

  3. Enter the New filename for the converted video.
  4. Select Convert/resize.
  5. You receive an email confirmation when the conversion is complete and the new file is ready on the Files tab:

    Converted MP4 file available on the Files tab

Create a captions file

Captions are a text version of the speech and non-speech audio information needed to understand the content. They include what is said, identity who is speaking and include non-speech information conveyed through sound, such as meaningful sound effects.

For a video uploaded directly to SiteBuilder, you need to add a Web Video Text Tracks (WebVTT) file to provide the captions.

  1. A good starting point is an automatically generated captions file:
    1. Go to Microsoft Stream. You can get there by going to your Warwick email account in a web browser (there’s a link on Insite), selecting the square of 9 dots in the top left, then All apps > Stream.
    2. Follow Microsoft's instructions to generate automatic captions (note: you do not need to publish the video for Stream to generate captions).

    3. Edit the transcript to make any corrections and add descriptions of non-speech audio, as necessary.
    4. Download the captions file.
  2. Alternatively, create your own WEBVTT file:
    1. Create a new file in a text editor (such as TextEdit on macOS, or Notepad on Windows) and save it with the file extension .vtt.

      Tip: if you already have captions in a .src file, you can convert this to a .vtt file using the converter at https://www.webvtt.org.

    2. Add WebVTT to the top of your file. This tells web browsers that the file is in the WebVTT format.
    3. Leave a blank line, then add the start time and end time for your first caption. These times are in the format [minutes]:[seconds].[milliseconds], with the two times separated by --> . For example:

      WEBVTT

      00:01.000 --> 00:04.000
    4. On the line below the times you specified, enter the text for the first caption. When the video is played, the caption appears onscreen from the start time to the end time. In the example below, the text "Example text for the first caption" would appear onscreen 1 second into the video and leave the screen 4 seconds into the video.

      WEBVTT

      00:01.000 --> 00:04.000
      Example text for the first caption
    5. Leave another blank line, then add the start time and end time for your next caption. On the line below these times, add the text for your next caption. Continue until you have finished captioning the video, then save your file.

      WEBVTT

      00:01.000 --> 00:04.000
      Example text for the first caption

      01:05.000 --> 01:07.000
      Example text for the second caption

      23:15.000 --> 23:18.000
      Example text for the third caption
  3. Upload your .vtt file in the same place as your video file, via the Files tab in SiteBuilder. You associate the captions file with your video file when you add the video clip to a web page.

Create a transcript

A basic transcript is a separate text version of speech and non-speech audio information needed to understand the content. It includes what is said, who is speaking and non-speech information conveyed through sound, such as meaningful sound effects. A descriptive transcript also includes descriptions of the visual information contained in the video, further improving accessibility.

  1. Follow the steps to automatically generate a captions file using Microsoft Stream.
  2. Use the Microsoft Stream transcript VTT file cleaner to convert the captions file into the basis for a transcript.
  3. Edit the resulting text to correct errors, specify who is speaking, describe meaningful non-speech audio and optionally describe information presented visually.
  4. Add the transcript text, or a link to it, beneath the video on the web page.

Create a preview image

Tip: a preview image displays in place of your video when the web page containing the video loads. It disappears when the video plays. To draw attention to your video and encourage visitors to select the play button, use an interesting and eye-catching image. Faces work particularly well. This image could be taken part way through the video rather than the default first frame.

      1. SiteBuilder can automatically generate a preview image for you:

        1. Browse to the page containing the video.
        2. Go to Edit > More, then select the Files tab.
        3. Select the video file to highlight it, then select Convert.
        4. For the Target format, choose JPEG preview image.
        5. Select Convert/resize.
        6. When the image is ready, it appears on the Files tab and you receive an email notification.
      2. Alternatively, to make your own preview image:

        1. Play your video on your computer at full-screen size.
        2. Pause the video at the point where you want to capture the image.
        3. Take a screenshot.
        4. Upload the screenshot to the Files tab in SiteBuilder.

      Add a video clip to a web page

          1. Browse to the page where you want to add a video.
          2. Go to Edit > Edit centre content or Edit right content.
          3. Place your cursor in the page where you want to insert the video.
          4. In the toolbar, select Insert a > Video.
          5. Select the picker and browse to the file's location:

            Browse to the video file

          6. Alternatively, to embed a video from YouTube, paste the video's URL in the first box:

            Insert a video from YouTube

          7. We recommend you leave Type set to Detect automatically.
          8. Select an option from the Position drop-down list. The default position is left-aligned.
          9. Optionally, specify a Width or Height as a number of pixels or a percentage.

            Tip: to make the video span the full width of the page content, specify a Width of 100%.
          10. Optionally, enter the Preview image URL – the path to the preview image on the Files tab.
          11. If your video is uploaded to SiteBuilder, specify the Captions filename or URL of the captions file you uploaded.
          12. Select Insert. You should see your video URL (the file path) in a [media] tag, similar to the following:

            <!-- Video saved on Files tab -->
            [
            media captions="yourcaptions.vtt"]yourvideo.mp4[/media]
            <!-- Embed YouTube video -->
            [media]http://www.youtube.com/watch?v=1234[/media]
          13. When you have finished editing the page, select Publish.

          [media] tag parameters

          Use any combination of the following parameters to control how the video displays.


          width – a percentage or number of pixels. Examples:

          <!-- Span full width of container -->
                    [media width=100%]myvideo.mp4[/media]
          <!-- Specify fixed width in pixels -->
          [media width=300]myvideo.mp4[/media]

          height – a number of pixels. Example:

          <!-- Specify fixed height in pixels -->
          [
          media height=200]myvideo.mp4[/media]

          previewimage – an absolute or relative path to the preview image file. Examples:

          <!-- Relative path to image saved in same location as video -->
          [
          media previewimage=myvideo-preview.jpg]myvideo.mp4[/media]
          <!-- Absolute path to image -->
          [
          media previewimage=https://warwick.ac.uk/fac/arts/music/myvideo-preview.jpg]myvideo.mp4[/media]

          align – can be left, middle or right. If you omit the parameter, the default value is left. Examples:

          <!-- Align middle -->
          [
          media align=middle]myvideo.mp4[/media]
          <!-- Align right -->
          [
          media align=right]myvideo.mp4[/media]

          download – can be true or false. Use true to show a download link beneath the video. If you omit the parameter, the default value is false. Example:

          <!-- Show download link -->
          [
          media download=true]myvideo.mp4[/media]

          Related articles

            Support

            Email webteam at warwick dot ac dot uk
            How to report a problem