Function use_media

pub fn use_media<'hook>(
    node: NodeRef,
    src: String,
) -> impl 'hook + Hook<Output = UseMediaHandle>

This hook plays video or audio and exposes its controls.

Example

use yew_hooks::prelude::*;

#[function_component(UseMedia)]
fn media() -> Html {
    let node_video = use_node_ref();

    let video = use_media(
        node_video.clone(),
        "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4".to_string(),
    );

    let onplay = {
        let video = video.clone();
        Callback::from(move |_| video.play())
    };

    let onpause = {
        let video = video.clone();
        Callback::from(move |_| video.pause())
    };

    let onmute = {
        let video = video.clone();
        Callback::from(move |_| video.mute())
    };

    let onunmute = {
        let video = video.clone();
        Callback::from(move |_| video.unmute())
    };

    let onvol = {
        let video = video.clone();
        Callback::from(move |_| video.set_volume(0.5))
    };
    let onseek = {
        let video = video.clone();
        Callback::from(move |_| video.seek(*video.time + 5.0))
    };

    html! {
        <>
            <p><video ref={node_video} width="640" height="360" /></p>
            <p>
                { " Duration: " } { *video.duration }
                { " Time: " } { *video.time }
                { " Volume: " } { *video.volume }
            </p>
            <p>
                <button onclick={onplay} disabled={*video.playing}>{ "Play" }</button>
                <button onclick={onpause} disabled={*video.paused}>{ "Pause" }</button>
                <button onclick={onmute} disabled={*video.muted}>{ "Mute" }</button>
                <button onclick={onunmute} disabled={!*video.muted}>{ "Unmute" }</button>
                <button onclick={onvol}>{ "Volume: 50%" }</button>
                <button onclick={onseek}>{ "Seek: +5 secs" }</button>
            </p>
        </>
    }
}

Note

When used in function components and hooks, this hook is equivalent to:

pub fn use_media(node: NodeRef, src: String) -> UseMediaHandle {
    /* implementation omitted */
}