How to load videos dynamically?

How-to Discussions
1

Hey, I have a bunch of JS objects defining pages and their properties. One of their attributes is a video (file or resource name). When rendering them using Each, I would like to reference a certain video starting from a JS attribute, for each page. I cannot use the File property of Video, apparently, and I dont’t know if video resources can be defined at this point, so I could reference them dynamically.

Apparently the Image flow, where defining a referenceable image source works properly, does not apply for video.

So… Help? :slight_smile:

2

I tried to do this with DataToResource like the SwipePlaces examples.

I made a class called MyBFS.uno:

using Uno;
using Uno.Collections;
using Fuse;
using Uno.UX;
using Uno;
using Uno.IO;


public class MyBFS : FileSource
{
    BundleFileSource bfs;
    public MyBFS () : base("N1")
    {}

    BundleFile _bf;
    public BundleFile File {
        get { return _bf; } 
        set { 
            _bf = value;
            bfs = new global::Uno.UX.BundleFileSource(_bf);
        }
    }

    public override Stream OpenRead () {
        return bfs.OpenRead();
    }
}

And this works for MainView.ux:

<App Theme="Basic">
    <DockPanel>
        <Video ux:Name="video" Dock="Fill" StretchMode="Fill" AutoPlay="true">
            <MyBFS ux:Binding="File">
                <Uno.BundleFile ux:Binding="File" ux:Path="myvid.mp4" />
            </MyBFS>
        </Video>
    </DockPanel>
</App>

But this does not work for MainView.ux, so I’m stuck. I wonder if DataToResource doesn’t work with this datatype:

<App Theme="Basic">
    <JavaScript>
        var Observable = require('FuseJS/Observable');
        var myvar = Observable('Myvid');

        module.exports = {
            myvar : myvar
        };
    </JavaScript>

    <MyBFS ux:Key="Myvid">
        <Uno.BundleFile ux:Binding="File" ux:Path="myvid.mp4" />
    </MyBFS>

    <DockPanel>
        <Video ux:Name="video" Dock="Fill" File="{DataToResource myvar}" StretchMode="Fill" AutoPlay="true">
        </Video>

    </DockPanel>
</App>

Maybe someone from the Fuse Team can help. :slight_smile:

3

A crude way I just found of doing this is using Match and put all Video attributes and handlers in a Style above.

<Match Value="{video}">
                <Case String="videoMain">
                    <Video File="assets/videos/flight.mp4" />
                </Case>
                ...
            </Match>

But it’s not really nice - I would have preferred to be able to define the videos elsewhere. Nevertheless, this works.

Any better ideas?

4

Hi!

Sources for Video is not done yet, sorry about that. Ill bump priority on that. You can databind Video for Urls (<Video Url="{someUrl}" />, but I guess that does not help you if you want the files to be local on the device. If you need this today you can write a piece of Uno code to get around it.

5

I went around it with the Match method above, but yeah, it would be useful & interesting to know how the uno code would look like. If you could take the time to show us an example, it would be great! Thanks

6 
public class FileVideoSource
{
    public Uno.UX.FileSource File
    {
        get;set;
    }
}

public class MyVideo : Fuse.Controls.Video
{
    FileVideoSource _source;
    public FileVideoSource Source
    {
        get { return _source; }
        set
        {
            _source = value;
            UpdateSource();
        }
    }

    void UpdateSource()
    {
        File = Source != null ? Source.File : null;
    }
}

You can just inherit from Fuse.Controls.Video and add the missing parts. With the code above you can use DataToResource databinding as Bjørn-Olav mentioned in his post

<FileVideoSouce ux:Key="video1" File="video.mp4" />
<JavaScript>
    module.exports = {
        video:"video1"
    };
</JavaScript>
<MyVideo Source="{DataToResource video}" />
7

A fix for video sources will be out in the next release aswell :slight_smile:

Example:

<FileVideoSource ux:Key="video1" File="file.mp4" />
<UrlVideoSource ux:Key="video2" Url="http://..." />
<Video Source="{DataToResource video1}" />


<Video>
    <FileVideoSource File="file.mp4" />
</Video>
8

Great! Also, great insight into how it would be done in Uno - this is the way we learn :wink: