/ 
HTML-Object-v0.5.1
River stage one • 1 direct dependent • 2 total dependents
/ HTML::Object::DOM::Element::Video

NAME

HTML::Object::DOM::Element::Video - HTML Object DOM Video Class

SYNOPSIS

use HTML::Object::DOM::Element::Video;
my $video = HTML::Object::DOM::Element::Video->new || 
    die( HTML::Object::DOM::Element::Video->error, "\n" );

VERSION

v0.2.0

DESCRIPTION

This interface provides special properties and methods for manipulating video objects. It also inherits properties and methods of HTML::Object::DOM::Element::Media and HTML::Object::DOM::Element.

<video controls width="250">
    <source src="/some/where/video.webm" type="video/webm">
    <source src="/some/where/video.mp4" type="video/mp4">
    Sorry, your browser does not support embedded videos.
</video>

INHERITANCE

+-----------------------+     +---------------------------+     +-------------------------+     +----------------------------+     +-----------------------------------+     +-----------------------------------+
| HTML::Object::Element | --> | HTML::Object::EventTarget | --> | HTML::Object::DOM::Node | --> | HTML::Object::DOM::Element | --> | HTML::Object::DOM::Element::Media | --> | HTML::Object::DOM::Element::Video |
+-----------------------+     +---------------------------+     +-------------------------+     +----------------------------+     +-----------------------------------+     +-----------------------------------+

PROPERTIES

Inherits properties from its parent HTML::Object::DOM::Element::Media

autoPictureInPicture

The autoPictureInPicture property reflects the HTML attribute indicating whether the video should enter or leave picture-in-picture mode automatically when the user switches tab and/or applications.

See also Mozilla documentation

disablePictureInPicture

The disablePictureInPicture property reflects the HTML attribute indicating whether the user agent should suggest the picture-in-picture feature to users, or request it automatically.

See also Mozilla documentation

height

Is a string that reflects the height HTML attribute, which specifies the height of the display area, in CSS pixels.

See also Mozilla documentation

poster

Is a string that reflects the poster HTML attribute, which an URL for an image to be shown while the video is downloading. If this attribute is not specified, nothing is displayed until the first frame is available, then the first frame is shown as the poster frame.

See also Mozilla documentation

videoHeight

Under perl, this returns undef by default, but you can set whatever number value you want.

Under JavaScript, this is read-only and returns an unsigned integer value indicating the intrinsic height of the resource in CSS pixels, or 0 if no media is available yet.

Example:

my $v = $doc->getElementById("myVideo");

$v->addEventListener( resize => sub
{
    my $w = $v->videoWidth;
    my $h = $v->videoHeight;

    if( $w && $h )
    {
        $v->style->width = $w;
        $v->style->height = $h;
    }
}, { capture => 0 });

See also Mozilla documentation

videoWidth

Under perl, this is read-only and returns undef by default, but you can set whatever number value you want.

Under JavaScript, this returns an unsigned integer value indicating the intrinsic width of the resource in CSS pixels, or 0 if no media is available yet.

See also Mozilla documentation

width

Is a string that reflects the width HTML attribute, which specifies the width of the display area, in CSS pixels.

See also Mozilla documentation

METHODS

Inherits methods from its parent HTML::Object::DOM::Element::Media

getVideoPlaybackQuality

Under perl, this always returns undef.

Under JavaScript, this returns a VideoPlaybackQuality object that contains the current playback metrics. This information includes things like the number of dropped or corrupted frames, as well as the total number of frames.

See also Mozilla documentation

requestPictureInPicture

Under perl, this always returns undef obviously.

Under JavaScript, this requests that the user agent make video enters picture-in-picture mode

See also Mozilla documentation

EVENTS

Event listeners for those events can also be found by prepending on before the event type:

For example, enterpictureinpicture event listeners can be set also with onenterpictureinpicture method:

$e->onenterpictureinpicture(sub{ # do something });
# or as an lvalue method
$e->onenterpictureinpicture = sub{ # do something };

enterpictureinpicture

Sent to a HTML::Object::DOM::Element::Video when it enters Picture-in-Picture mode. The associated event handler is HTML::Object::DOM::Element::Video.onenterpictureinpicture

Example:

my $video = $doc->querySelector('#$video');
my $button = $doc->querySelector('#$button');

sub onEnterPip
{
    say( "Picture-in-Picture mode activated!" );
}

$video->addEventListener( enterpictureinpicture => \&onEnterPip, { capture => 0 });

$button->onclick = sub
{
    $video->requestPictureInPicture();
}

my $video = $doc->querySelector('#$video');
my $button = $doc->querySelector('#$button');

sub onEnterPip
{
    say( "Picture-in-Picture mode activated!" );
}

$video->onenterpictureinpicture = \&onEnterPip;

$button->onclick = sub
{
    $video->requestPictureInPicture();
}

See also Mozilla documentation

leavepictureinpicture

Sent to a HTML::Object::DOM::Element::Video when it leaves Picture-in-Picture mode. The associated event handler is HTML::Object::DOM::Element::Video.onleavepictureinpicture

Example:

my $video = $doc->querySelector('#$video');
my $button = $doc->querySelector('#$button');

sub onExitPip
{
    say( "Picture-in-Picture mode deactivated!" );
}

$video->addEventListener( leavepictureinpicture => \&onExitPip, { capture => 0 });

$button->onclick = sub
{
    if( $doc->pictureInPictureElement )
    {
        $doc->exitPictureInPicture();
    }
}

my $video = $doc->querySelector('#$video');
my $button = $doc->querySelector('#$button');

sub onExitPip
{
    say( "Picture-in-Picture mode deactivated!" );
}

$video->onleavepictureinpicture = \&onExitPip;

$button->onclick = sub
{
    if( $doc->pictureInPictureElement )
    {
        $doc->exitPictureInPicture();
    }
}

See also Mozilla documentation

EXAMPLE

<h1>Ask a question at a given point in a video</h1>

<p>The question is displayed after 10 seconds, if the answer given is correct, the video continues, if not it starts again from the beginning</p>

<video id="myVideo" controls="">
    <source src="https://example.org/some/where/videos/video.mp4" />
    <source src="https://example.org/some/where/videos/video.webm" />
</video>

// This only works in a web browser, so this is intentionally in JavaScript
// First identify the video in the DOM
var myVideo = document.getElementById( 'myVideo' );
myVideo.ontimeupdate = function()
{
    // Remove the decimal numbers from the time
    var currentTime = Math.floor( myVideo.currentTime );
    if( currentTime == 10 )
    {
        myVideo.pause ();
        // Ask the question with a promt
        var r = prompt( "What is the video about?" );
        // check the answer
        if( r.toLowerCase() == "Example" )
        {
            myVideo.currentTime = 11; // Add a second otherwise the question will be displayed again;
            myVideo.play();
        }
        else
        {
            myVideo.currentTime = 0; // Put the video back to 0;
            myVideo.play();
        }
    }
}

Example taken from EduTech Wiki

Picture in Picture (a.k.a. PiP)

The W3C states that "the specification intends to provide APIs to allow websites to create a floating video window always on top of other windows so that users may continue consuming media while they interact with other content sites, or applications on their device."

<video id="videoElement" controls="true" src="demo.mp4"></video>

<!-- button will be used to toggle the PiP mode -->
<button id="togglePipButton">Toggle Picture-in-Picture Mode!</button>

Call "requestPictureInPicture" on click of togglePipButton button element.

When the promise resolves, the browser will shrink the video into a mini window that the user can move around and position over other windows.

let video = document.getElementById('videoElement');
let togglePipButton = document.getElementById('togglePipButton');

togglePipButton.addEventListener('click', async function (event) {
    togglePipButton.disabled = true; //disable toggle button while the event occurs
    try {
        // If there is no element in Picture-in-Picture yet, request for it
        if (video !== document.pictureInPictureElement) {
            await video.requestPictureInPicture();
        }
        // If Picture-in-Picture already exists, exit the mode
        else {
            await document.exitPictureInPicture();
        }

    } catch (error) {
        console.log(`Oh Horror! ${error}`);
    } finally {
        togglePipButton.disabled = false; //enable toggle button after the event
    }
});

Check for Picture-in-Picture event changes

let video = document.getElementById('videoElement');
video.addEventListener('enterpictureinpicture', function (event) {
    console.log('Entered PiP');
    pipWindow = event.pictureInPictureWindow;
    console.log(`Window size -  \n Width: ${pipWindow.width} \n Height: ${pipWindow.height}`); // get the width and height of PiP window
});

video.addEventListener('leavepictureinpicture', function (event) {
    console.log('Left PiP');
    togglePipButton.disabled = false;
});

Example taken from https://dev.to/ananyaneogi/implement-picture-in-picture-on-the-web-17g8

AUTHOR

Jacques Deguest <jack@deguest.jp>

SEE ALSO

Mozilla documentation, Mozilla documentation on video element, W3C specifications for PiP

COPYRIGHT & LICENSE

Copyright(c) 2021 DEGUEST Pte. Ltd.

All rights reserved

This program is free software; you can redistribute it and/or modify it under the same terms as Perl itself.