Yew play videofile

Dear community.
I am working with yew, and want to get it to play video in a loop from local path.

Using html macro does the trick, but dosn't auto start on init.

html! {
        <div>
            <video src="static/IMG_0796.MOV" autoplay=true loop=true ></video>
        </div>
    }

However I want to have multible videos, in local path, that can be swabbed between using bind keys. Therefore I thought of having the videos in a vector. But then the video doesn't display. Anybody knows why?

Here the current code:

use yew::prelude::*;


#[derive(Clone, PartialEq)]
struct Video {
    id: usize,
    title: String,
    url: String,
}


#[derive(Properties, PartialEq)]
struct VideosListProps {
    videos: Vec<Video>,
}

#[function_component(VideosList)]
fn videos_list(VideosListProps { videos }: &VideosListProps) -> Html {
    videos.iter().map(|video| html! {
        <p key={video.id}>{format!("{}", video.title)}</p>
    }).collect()
}

#[function_component]
fn App() -> Html {
    let var_name = vec![
        Video {
            id: 1,
            title: "dancevideo nr.1 ".to_string(),
            url: "static/IMG_0796.MOV".to_string(),
        }
    ];
    let videos = var_name;

    html! {
        <div>
            <VideosList videos={videos} />
        </div>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

Output:

Desired output:

You can see the whole file codes on github, where anyone are welcome to contribute. :boom: :dizzy:

https://github.com/martinschultzkristensen/yew-play-video

If you are using Chrome, autoplay won't work if the video isn't muted: <video>: The Video Embed element - HTML: HyperText Markup Language | MDN.

It's hard to say. Can you open the developer console and see if there's any error or the resulting DOM is not what you are expecting?

In your repo, for example, the video element is commented out:

html! {
        <div>
            <VideosList videos={videos} />
            //<video src="static/IMG_0796.MOV" autoplay=true loop=true ></video>
            <img src="static/danceOmatic_logo.png" alt="logo of danceomatic"/>
        </div>
}

Thanks for your answer.
Just a quick response to the commented

The 'VideoList' component should display the video-file regardlse the commented video tag, since it's been linked to linked to in the fn App().

... 

#[function_component]
fn App() -> Html {
    let var_name = vec![
        Video {
            id: 1,
            title: "dancevideo nr.1 ".to_string(),
            url: "static/IMG_0796.MOV".to_string(),  // <-- here!
        }
    ];
    let videos = var_name;


html! {
        <div>
            <VideosList videos={videos} />
            //<video src="static/IMG_0796.MOV" autoplay=true loop=true ></video>
            <img src="static/danceOmatic_logo.png" alt="logo of danceomatic"/>
        </div>
}

...

I tried to check out my developer concole as best as my skills allow. But the DOM doesn't show any issues. However I can see that the title: "dancevideo nr.1 ".to_string(), from fn App() is beeing passed to HTML. :thinking:

Here dancevideo nr.1 passed to innerText.

This just showing DOM Breakpoints. (Is this what you were suggesting?)

Exactly. The point is that you are mapping your list of videos to a bunch of paragraphs:

Not sure why you were expecting to see the videos here. Html paragraph elements are non-interactive.

Dear community.
My Yew is now successfully playing a video in a browser. In addition I have multiple videos in a vector that can be changed between using bind keys.

That code can be review here: github.com/martinschultzkristensen/yew-web-app

My problem:
I want to move part of the code from lib.rs into a separated file for improved architecture.

.
├── audio_player.rs
├── components
│   ├── atoms
│   │   ├── audio_element.rs
│   │   └── mod.rs
│   ├── data
│   │   ├── mod.rs
│   │   └── video_data.rs
│   ├── mod.rs
│   ├── molecules
│   │   ├── mod.rs
│   │   └── video_list.rs
│   └── organisms
│       ├── keydown_logic.rs <-- Code moved into this file.
│       ├── mod.rs
│       └── test_x_keydown.rs
├── lib.rs
└── main.rs

I can call the pup fn from lib.rs but my problem is this line of code let current_index = current_video_index.get(); (from keydown_logic.rs):

Here a bigger picture of the code

pub fn get_toggle_key(v: Vec<Video>, video_index: UseStateHandle<usize>) -> Callback<KeyboardEvent> {
// more code here ...
let current_video_index = use_state(|| 0);

    Callback::from(move |event: KeyboardEvent| {
        if event.key() == "w" || event.key() == "s" {
            let current_index = current_video_index.get(); //<-- Error!
            let new_index = match event.key().as_str() {
...
//match logic
...
};
            // more code here ...
        }
    })
}

I have tried to call let current_index = current_video_index.clone() but same problem.

Here the error from VS-code:

no method named `get` found for opaque type `impl Hook<Output = yew::UseStateHandle<{integer}>> + '_` in the current scope
method not found in `impl Hook<Output = UseStateHandle<{integer}>>

It confuses me since it does work, when I have similar code inside lib.rs
Anybody who can help me how to make it work?

You can access the whole code from a separate branch here: branch toggleKeyImpl

Help is much appreciated! :boom: :dizzy: