How can I transfer a MediaElement ?

Question

Hi all.

I have a problem dealing with MediaElement and Frame Page Navigation.

I want to do the following:
1. I have a Page that has a MediaElement and playing video
2. Frame.Navigate() to go another Page without interuppting video playback
3. And continue to show the video in the destination page

I tried to put MediaElement in a Grid and remove and add the MediaElement by code behind
but it didn't work. When I remove the MediaElement from the Grid, it stops playing
and never start playing unless I call SetSource() again.

The continuity of playback is important for us and we don't want to pause/stop
the playback.

Does anyone know what's wrong with it ?


Thanks.

Answer 1

The issue is that when you Navigate to another page, you're creating a new visual tree of that page and there are enter/leave semantics associated with Media being apart of the tree. In your scenario, the navigation to another Page in step 2 creates a new tree. When you remove a MediaElement, there is some cleanup work that occurs which is what you're seeing. This is true for most XAML technologies with respect to media.

A few questions:

1. What exactly is your scenario where you want Page A to play a video, navigate to Page B and have the video continuing? Does the MediaElement need to be a part of the Page in this case or can it be in some other containing element?

2. You can try overriding onNavigateTo and pass in the current playing Source & Position to start immediately from playing on the next navigation although you might see a little glitch here as well. Again understanding your scenario would help.

---

Marco

Answer 2

Hi Marco.

Thank you for your reply.

>1. What exactly is your scenario where you want Page A to play a video, navigate to Page B and have the video continuing?

Yes, that's exactly what I want to do.

>Does the MediaElement need to be a part of the Page in this case or can it be in some other containing element?

The purpose of this senario is something like a Picture in Picture of TV.
I think a MS metro application "Video" does some thing like this between playing screen and AppBar of content selecting screen.

>2. You can try overriding onNavigateTo and pass in the current playing Source & Position to start immediately from playing on the next navigation although you might see a little glitch here as well. Again understanding your scenario would help.

Our player will play contents over the Network and we think the glitch would not be negligible. So we are searching something other than reaccessing network.

Answer 3

Our player will play contents over the Network and we think the glitch would not be negligible. So we are searching something other than reaccessing network.

One solution that came to mind: you could place the MediaElement control into a different frame, that you can overlay it on top of the page frame. Have the page navigation done in the page frame. That way, even if the page frame is being navigated, the video won't be disturbed.

Answer 4

Hi CaptainPermagate

Thank you for your suggestion.

I'm about thinking the same kind. Howerver in that way, we still have following concerns.
- Video screen size and position are different for Page A and Page B.
- Video is on a ScrollViewer(or something scrollable) in Page A

It's kind of hard but theoretically possible I guess. We'll take that way if there are no other reasonable way.

Answer 5

Maybe animate the move to the new position and size in the OnNavigated()?  You could probably even implement that in a VSM if you just changed the state.

---

Rebecca M. Riordan

Answer 6

Hi Rebecca

Thank you for your suggestion.

What's hard I'm trying to say is that if we put MediaElement outside of the Page, the code will be messed and costful because the logical tree structure will be like this:

- MediaElement
- Frame
  - Page A or Page B
    - Grid

then re-size and re-position MediaElement with Grid's size and position.
Moreover, in general, top level control(MediaElement in this case) doesn't want to know about it's nephews information(Grid size and position in this case). If we can put MediaElement inside a Page, it will be a lot easier.

However, I guess it's the only readonsble way to accomplish my scenario. To make it easier, we decided to remove ScrollViewer between the Grid and Page A from our UI specification.

Answer 7

Thank you very much for your help everybody.

I end up with something like following:

1. Place controls like this
- MediaElement
- Frame
  - Page A or Page B
    - Grid(different size for Page A and B)

2. Make the Grid transparent to let the MediaElement visible even though it's behind the Page.

3. Implement base class of Page A and B that have dependency property, which is exposing Grid's size and location.

4. Bind Width, Height, and RenderTransform.X and Y of MediaElement to the dependency property( implemented in 3).

5. update the dependency property of 3, every time Grid size and position changed.

Answer 8

FWIW, I think that's a reasonable solution.

---

Rebecca M. Riordan

Answer 9

Hey Hamling-ling, did you ever find a better way to do this? I have the exact same problem but my pages have backgrounds so I can't punch through to the media element at the root of the visual tree.  I'm trying to remove it from the Visual tree and place it back inside a grid on the appropriate page but as you noted, as soon as the ME is removed it stops playing.