Listening for a video's "ended" event?

[Rex van der Spuy]

Hi Everyone!

I'm hoping you can all help me figure out the best strategy to handle this problem:

It's probably not complicated, but I would love to hear your ideas on the best solution.

I have a video tag in my `view` that looks like this:

```

video [ width 400, height 300, autoplay True, loop True ]  [  source [ src "video/general.mp4" ] [ ] ]

```

When it's finished, I want another video to start playing automatically.

I know that in JavaScript you can listen for an `ended` event (http://stackoverflow.com/questions/2741493/detect-when-an-html5-video-finishes)

But how do you handle this in Elm?

Would I need to listen for this using ports, or is there some way to trigger trigger the `update` function directly in Elm?

[Rupert Smith]

Maybe with a subscription to a port:

app = Elm.Main.fullscreen();

app.ports.videoEnded.send(something);

Then in Elm:

port videoEnded : (Type of something -> msg) -> Sub msg

Replacing something with any data you want to pass to the port, or perhaps () if you don't need anything to be passed. You will use this data to add to the elm event, or an event with no args if not passing anything.

Subscribe to the port:

subscriptions : Model -> Sub Msg

subscriptions model =

  videoEnded (\something -> VideoEnded something)

Then hook up the video ending event to call your port on the javascript side.

 

[OvermindDL1]

Don't use ports, with elm you can listen on events easily, given your example below you can use `on` to define a custom event, either inline or as a helper function, though I like helper functions so that is what I will use here.  :-)

```elm

onEnded msg =

  on "ended" (Json.Decode.succeed msg) -- You can of course change the decoder to actually return a value to the msg if you want

-- Elsewhere you use it like:

video [ width 400, height 300, autoplay True, loop True, onEnded MyEndedMsg ]  [  source [ src "video/general.mp4" ] [ ] ]

```

:-)

[Rex van der Spuy]

On Friday, December 2, 2016 at 10:33:11 AM UTC-5, OvermindDL1 wrote:

Don't use ports, with elm you can listen on events easily, given your example below you can use `on` to define a custom event, either inline or as a helper function, though I like helper functions so that is what I will use here.  :-)

```elm

onEnded msg =

  on "ended" (Json.Decode.succeed msg) -- You can of course change the decoder to actually return a value to the msg if you want

-- Elsewhere you use it like:

video [ width 400, height 300, autoplay True, loop True, onEnded MyEndedMsg ]  [  source [ src "video/general.mp4" ] [ ] ]

```

:-)

Oh!!

Thank you!!!

That looks nice and easy, I'll try it! 

[Rupert Smith]

On Friday, December 2, 2016 at 3:33:11 PM UTC, OvermindDL1 wrote:

Don't use ports, with elm you can listen on events easily, given your example below you can use `on` to define a custom event, either inline or as a helper function, though I like helper functions so that is what I will use here.  :-)

Ah yes, that is a better way to do it.