Dynamically switching video source and browser caching problem....

[Rex van der Spuy]

Hi Everyone,

On the current project I'm working on I'm trying to dynamically switch the `src` in a video element based on the application state 

(The project is a simple conversation chatbot).

For example, I have function like this that returns the correct video element to use:

videoElement = 

      case currentAnswerType model of

        QuestionNotClear ->

          video [ width 400, height 300, autoplay True, loop True ]  [  source [ src (defaults.videoLocation ++ "one.mp4") ] [ ] ]

        Angry ->

          video [ width 400, height 300, autoplay True, loop True ]  [  source [ src (defaults.videoLocation ++ "two.mp4") ] [ ] ]

        General ->

          video [ width 400, height 300, autoplay True, loop True ]  [  source [ src (defaults.videoLocation ++ "three.mp4") ] [ ] ]

        Annoyed ->

          video [ width 400, height 300, autoplay True, loop True ]  [  source [ src (defaults.videoLocation ++ "four.mp4") ] [ ] ]

        FinishedAngry ->

          video [ width 400, height 300, autoplay True, loop True ]  [  source [ src (defaults.videoLocation ++ "five.mp4") ] [ ] ]

        FinishedPolite ->

          video [ width 400, height 300, autoplay True, loop True ]  [  source [ src (defaults.videoLocation ++ "six.mp4") ] [ ] ]

        None ->

          video [ width 400, height 300, autoplay True, loop True ]  [  source [ src (defaults.videoLocation ++ "seven.mp4") ] [ ] ]

This technique works fine for images, but it turns out it doesn't work for video.

It seems that browsers will cache the first video loaded, but not automatically reload any new video sources if the `src` changes dynamically.

This is the best information I could find about this:

http://stackoverflow.com/questions/5235145/changing-source-on-html5-video-tag

I had hoped Elm's virtual DOM would re-flash the cache on each update, but this doesn't seem to be the case.

From the StackOverflow link above it seems that I need to manually call the video element's `load` and `play` methods to force a video re-load.

Does anyone know if it's possible to call these methods directly in Elm, or would I have to do this via ports?

Or, is there a better, simpler way for me force a video cache refresh in Elm to make this work?

Thanks!!

[Rex van der Spuy]

... Oh, no worries!!

I solved my own problem.

The trick is to change the `src` property on the `video` tag, *not* the in the `source` element.

(I found the answer in one of the comments here: http://stackoverflow.com/a/3732711/1282216)

So, something like this works:

    videoElement = 

      case currentAnswerType model of

        QuestionNotClear ->

          video [ width 400, height 300, autoplay True, loop True, src (defaults.videoLocation ++ "general.mp4") ]  [  source [ src (defaults.videoLocation ++ "general.mp4") ] [ ] ]

        None ->

          video [ width 400, height 300, autoplay True, loop True, src (defaults.videoLocation ++ "waiting.mp4") ]  [  source [ src (defaults.videoLocation ++ "waiting.mp4") ] [ ] ]

Hopefully this will help someone in the future with the same problem :)