Question

我正在测试Elm，我决定制作一个小视频播放列表...... 目标是在上一个视频结束后立即加载新视频... 在Javascript中，我会使用视频标签发送的“已结束”事件来加载下一个事件。由于它在Elm上不存在，我试图创建它没有成功...第一个视频结束，并且没有调用更新（猜测我没有正确绑定事件监听器......）

有谁知道怎么做？到目前为止，这是我的代码......

module Video exposing (main)

import Html exposing (Html, div, text, video, source, a)
import Html.Attributes as Att exposing (preload, autoplay, src, type)
import Html.App
import Json.Decode as Json
import Html.Events exposing (onClick, on)
import Array exposing (..)

main : Program Never
main =
    Html.App.beginnerProgram
        { model = model
        , update = update
        , view = view
        }

-- Eventlistener

onEnded msg =
    Html.Events.on "ended" (Json.succeed msg)

-- MODEL

videos : Array String
videos =
    Array.fromList ["/videos/vid_home_1.mp4", "/videos/vid_home_2.mp4", "/videos/vid_home_3.mp4"]

type alias Model =
    { current: Int}

model : Model
model =
    { current = 0 }

-- UPDATE

type Msg
    = Noop
    | OnEnded

update : Msg -> Model -> Model
update msg model =
    case msg of
        Noop ->
            model
        OnEnded ->
            { model | current = ((model.current + 1) % 3) }

-- VIEW

view : Model -> Html Msg
view model =
    case Array.get model.current videos of
        Nothing ->
            div [][text "Error"]
        Just url ->
            div []
                [
                 div []
                     [
                      video [ preload "auto", autoplay True, onEnded OnEnded ]
                           [ source [src url, type' "video/mp4" ][] ]
                     ]
                ]

榆树自定义事件

0 个答案: