Documentation

Kitchen Sink documentation of style: 'Delos' of skin: 'ILIAS'

Video

Description

Purpose: The Video component is used to play and control mp4 video files, youtube or vimeo videos.
Composition: The Video component is composed by a video area, play/pause button, a playtime presentation, a volume button, a volume slider and a time slider. Additionally it optionally provides subtitles stored in WebVTT files, see https://en.wikipedia.org/wiki/WebVTT.

Context

Main Content
Modal Content

Rules

Style

The widget will be presented with the full width of its container.

Accessibility

A subtitle file SHOULD be provided, if the video content contains speech.

Example 1: Video mp4

<?php
 
declare(strict_types=1);
 
/**
 * This file is part of ILIAS, a powerful learning management system
 * published by ILIAS open source e-Learning e.V.
 *
 * ILIAS is licensed with the GPL-3.0,
 * see https://www.gnu.org/licenses/gpl-3.0.en.html
 * You should have received a copy of said license along with the
 * source code, too.
 *
 * If this is not the case or you just want to try ILIAS, you'll find
 * us at:
 * https://www.ilias.de
 * https://github.com/ILIAS-eLearning
 *
 *********************************************************************/
 
namespace ILIAS\UI\examples\Player\Video;
 
function video_mp4(): string
{
    global $DIC;
    $renderer = $DIC->ui()->renderer();
    $f = $DIC->ui()->factory();
 
    $video = $f->player()->video("https://files.ilias.de/ks/ILIAS-Video.mp4");
    $video = $video->withAdditionalSubtitleFile("en", "./src/UI/examples/Player/Video/subtitles_en.vtt");
    $video = $video->withAdditionalSubtitleFile("de", "./src/UI/examples/Player/Video/subtitles_de.vtt");
 
    return $renderer->render($video);
}

Example 2: Video mp4 poster

<?php
 
declare(strict_types=1);
 
/**
 * This file is part of ILIAS, a powerful learning management system
 * published by ILIAS open source e-Learning e.V.
 *
 * ILIAS is licensed with the GPL-3.0,
 * see https://www.gnu.org/licenses/gpl-3.0.en.html
 * You should have received a copy of said license along with the
 * source code, too.
 *
 * If this is not the case or you just want to try ILIAS, you'll find
 * us at:
 * https://www.ilias.de
 * https://github.com/ILIAS-eLearning
 *
 *********************************************************************/
 
namespace ILIAS\UI\examples\Player\Video;
 
function video_mp4_poster(): string
{
    global $DIC;
    $renderer = $DIC->ui()->renderer();
    $f = $DIC->ui()->factory();
 
    $video = $f->player()->video("https://files.ilias.de/ILIAS-Video.mp4");
    $video = $video->withPoster("src/UI/examples/Image/HeaderIconLarge.svg");
 
    return $renderer->render($video);
}

Example 3: Video vimeo

<?php
 
declare(strict_types=1);
 
/**
 * This file is part of ILIAS, a powerful learning management system
 * published by ILIAS open source e-Learning e.V.
 *
 * ILIAS is licensed with the GPL-3.0,
 * see https://www.gnu.org/licenses/gpl-3.0.en.html
 * You should have received a copy of said license along with the
 * source code, too.
 *
 * If this is not the case or you just want to try ILIAS, you'll find
 * us at:
 * https://www.ilias.de
 * https://github.com/ILIAS-eLearning
 *
 *********************************************************************/
 
namespace ILIAS\UI\examples\Player\Video;
 
function video_vimeo(): string
{
    global $DIC;
    $renderer = $DIC->ui()->renderer();
    $f = $DIC->ui()->factory();
 
    $video = $f->player()->video("https://vimeo.com/669475821?controls=0");
 
    return $renderer->render($video);
}

Example 4: Video youtube

<?php
 
declare(strict_types=1);
 
/**
 * This file is part of ILIAS, a powerful learning management system
 * published by ILIAS open source e-Learning e.V.
 *
 * ILIAS is licensed with the GPL-3.0,
 * see https://www.gnu.org/licenses/gpl-3.0.en.html
 * You should have received a copy of said license along with the
 * source code, too.
 *
 * If this is not the case or you just want to try ILIAS, you'll find
 * us at:
 * https://www.ilias.de
 * https://github.com/ILIAS-eLearning
 *
 *********************************************************************/
 
namespace ILIAS\UI\examples\Player\Video;
 
function video_youtube(): string
{
    global $DIC;
    $renderer = $DIC->ui()->renderer();
    $f = $DIC->ui()->factory();
 
    $video = $f->player()->video("https://www.youtube.com/watch?v=YSN2osYbshQ");
 
    return $renderer->render($video);
}

Relations

Parents

UIComponent
Player