1

I have a list of video links, and when one is clicked the corresponding video appears on the side. While it seems to be working fine for the most part, if I click on the link to another video, the currently loaded video isn't replaced. The src attribute and the uri changes accordingly, but the video itself doesn't update. Is there a way to properly replace the current video with another one while keeping the html structure? I don't have any issues when I replace the videos view completely with the video view, but this is not the behavior I'm looking for.

HTML

<script type="text/x-handlebars" data-template-name="videos">
    {{#if mediaLength}}
        <div class="row">
            <div class="col-md-3">
                {{#each itemController="video"}}
                    <div class="video thumbnail">
                        <h3>{{#link-to 'video' this}}{{time createdAt}}{{/link-to}}</h3>
                        ({{part}})
                    </div>
                    <hr>
                {{/each}}
            </div>
            <div class="col-md-7">
                {{outlet}}
            </div>
        </div>
    {{else}}
        stuff
    {{/if}}
</script>

<script type="text/x-handlebars" data-template-name="video">
    <div class="qtplayer-embed" style=" width:270px; height:496px;">
        <object {{bind-attr classid=classid width=width height=height codebase=codebase}}>
            <param name="src" {{bind-attr value=url}}>
            <param name="autoplay" {{bind-attr value=autoplay}}>
            <param name="scale" {{bind-attr value=scale}}>
            <param name="enablejavascript" {{bind-attr value=enablejavascript}}>
            <param name="postdomevents" {{bind-attr value=postdomevents}}>
            <param name="showlogo" {{bind-attr value=showlogo}}>
            <embed type="video/quicktime" {{bind-attr src=url width=width height=height pluginspage=pluginspage autoplay=autoplay scale=scale enablejavascript=enablejavascript postdomevents=postdomevents showlogo=showlogo}}>
        </object>
    </div>
</script>

Routes

App.Router.map ->
    @resource "videos", ->
        @resource "video",
            path: "/:video_id"

App.VideosRoute = Ember.Route.extend(
    model: ->
        this.store.find('video')
)


App.VideoRoute = Ember.Route.extend(
    model: (params) ->
        this.store.find('video', params.video_id)
)
user3724162
  • 57
  • 1
  • 4

1 Answers1

1

That is a known limitation of embed objects, different browsers implement them differently. Setting the src on the tag may or may not actually trigger the property inside of the embedded object.

You've got to think about the tag as more of a constructor, and not necessarily a gateway to setting and changing properties on the embedded object itself. This pretty much leaves destroying and recreating the element.

How to change the value of embed src with JavaScript?

JavaScript: Changing src-attribute of a embed-tag

Community
  • 1
  • 1
Kingpin2k
  • 47,277
  • 10
  • 78
  • 96