Elm On Custom Event

Question

I'm currently testing Elm out, and I decided to make a little video playlist... The goal is to load a new video as soon as the previous one ended... In Javascript I would have used the "ended" event the video tag sends to load the next one.. Since it does not exist on Elm, I have tried to create it with no success... the first video ends, and the update is not called (guessing I haven't binded correctly the event listener...)

Does anyone know how to do this ? This is my code so far...

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" ][] ]
                     ]
                ]

In your `video` tag you have the attribute `onClick OnEnded`. Shouldn't that be `onEnded OnEnded`? — Chad Gilbert, Sep 26 '16 at 13:42
@ChadGilbert : It sure is, I forgot to change it back, it was for testing if my MVC was working with a well known event... — TheSquad, Sep 26 '16 at 13:44
But the things is, with the "onEnded OnEnded" it does not work... — TheSquad, Sep 26 '16 at 13:45
I think `onEnded` is working fine (tested via `Debug.log`). I think the problem is that [changing `src` is problematic](http://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag). You may have to introduce an intermediate step that renders nothing for the video element, then adds it back with the next video. — Chad Gilbert, Sep 26 '16 at 13:59
You are right, I should probably ask the video to play after changing the src of th file, any idea how to do this ? (Full disclosure, I have done this on javascript like this... it worked) — TheSquad, Sep 26 '16 at 14:08
You can't really interact with existing video elements from within Elm (like telling them to play or pause) so you would have to use ports. Here is a [post about working with videos and ports](http://onblur.net/elm/2016/07/27/working-with-video-in-elm.html) that may help. — Chad Gilbert, Sep 26 '16 at 14:31

Elm On Custom Event

0 Answers0