dotvvm：自动播放视频列表（演示）答案

【问题标题】：dotvvm: Auto play video list (presentation)dotvvm：自动播放视频列表（演示）
【发布时间】：2018-08-21 21:40:07
【问题描述】：

我喜欢用 dotvvm 建立一个视频演示网站。当什么都没有发生时，它必须在每次从列表中播放新视频时开始。使用 bootstrap/MediaObject 我找不到“视频准备播放”事件，因此我们可以开始下一个视频。使用 Dotvvm 解决此问题的最佳方法是什么，我不想为此回到 angular。

基础

更新：现在我使用html5标签，还有dotvvm组件吗？示例：

    <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>

我们可以从 viewModel 中获取 nextVideo 吗？我们如何做到这一点？

【问题讨论】：

你能稍微澄清一下这个问题吗？也许是 MediaObject 的一段代码。您是使用 DotVVM 控件的商业 Bootstrap 还是纯 Bootstrap 库？

标签： dotvvm

【解决方案1】：

1) 设置javascript变量

您可以这样设置 - 例如。通过按钮和命令

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。获取 View 中 Viewmodel 属性的当前值

或者您可以在 viewmodel 中声明字符串属性，然后在您的 javascript 中通过敲除调用获取当前值，如下所示：

视图模型

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

查看：

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

</script>

这取决于你的脚本你真正想要做什么:)

【讨论】：