Ember updating video sources but not being reflected by browser

Question

I have an ember application with nested resources in which I'm showing videos. The outer resource (videos) simply displays all of the videos. When you click a video the nested video resource is activated and a title/player is shown.

This works great the first time you click something. The video shows up and it plays. HOWEVER, when clicking another video, the nested resource video is updated and the DOMs <source> gets updated but the OLD video continues to play! Why is this happening and how do I fix it?

Working Example on JSFiddle

Answer 1

If you move the {{bind-attr src="src"}} from the <source> element up to the <video> element, it just works without any hacks.

your code would change from:

<video controls>
  <source {{bind-attr src="src"}} type = "video/mp4"></source>
</video>

to

<video controls {{bind-attr src="src"}}></video>

Working example: http://jsfiddle.net/jfmzwhxx/