dotvvm: Auto play video list (presentation)

Question

I like to build a Video presentation website with dotvvm. when nothing happens it has to start every time a new video from a list. with the bootstrap/MediaObject i can't find the event 'video ready playing' so we can start the next video. what is the best way to solve this with Dotvvm, i don't want to go back to angular for this.

Bas

UPDATE: At this moment I use the html5 tags, is there also a dotvvm component ? sample:

    <dot:Content ContentPlaceHolderID="ContentTemplate">
<div class="page">
    <video ID="video1" width="320" height="240" autoplay>
        <source src="/Style/video/video1.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    <button onclick="playPause()">Play/Pause</button>
</div>
<script>
    var myVideo = document.getElementById("video1");
    function playPause() {
        if (myVideo.paused)
            myVideo.play();
        else
            myVideo.pause();
    }
   myVideo.addEventListener("ended", function () {
        //get next video from viewmodel, (not hard coded)
        var nextVideo = "/Style/video/video2.mp4"
        myVideo.setAttribute("src", nextVideo)
        //load 
        myVideo.load();
        // switch of sound
        myVideo.muted = true;
        // play
        myVideo.play();
    }, true);
</script>

can we get the nextVideo from the viewModel and how do we do this ?

Can you clarify the question a little bit? Maybe a piece of code of the MediaObject. Are you using the commerical Bootstrap for DotVVM controls, or a pure Bootstrap library? — Tomáš Herceg, Jul 23 '17 at 10:17

score 0 · Answer 1 · answered Aug 21 '18 at 13:40

1) Set javascript variable

you can set this way - eg. by button with command

MyView.dothtml

...
<dot:button Click="{command: SetNextVideo()}" Text="Set next video" />
...

MyViewModel.cs

....
IDotvvmRequestContext _requestContext;
...

public void SetNextVideo()
{
  //_requestContext.ResourceManager.AddStartupScript("alert('my javascript after command');");
  _requestContext.ResourceManager.AddStartupScript("nextVideo = ...... ");
}

2. Get current value of Viewmodel property in View

or you can declare declare string property in viewmodel and in your javascript you can get current value by knockout call like this:

Viewmodel

public string MyFoo {get;set;} = "bar";

View:

<script>
....
alert( ko.toJS(dotvvm.viewModels.root.viewModel.MyFoo) );

</script>

It depends on your script what you realy want to do :)

dotvvm: Auto play video list (presentation)

1 Answers1