locked
VIdeo Playback in Fullscreen? RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote

    Hey Guys,

    Just a simple enough question but cant seem to fin an example of the best way to implement video playback in fullscreen as in the Vimeo Metro app example below. I'm not sure how to playback a video so that when the title header and back button disappear when the user is inactive alone with the progress bar. I also want to display the little info icon.

    Vimeo example that I want to achieve:

    My example and current issue:

    You see when the user is inactive, the progress bar disappears but I'm left with the header displaying. Not sure how to make this part of the overall popup so it will disappear when inactive. Code for this page below also. I'm sure it's something small but cant figure out the issue.

    Playback Page HTML:

    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>itemDetailPage</title>
    
    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.0.6/css/ui-dark.css" rel="stylesheet">
    <script src="//Microsoft.WinJS.0.6/js/base.js"></script>
    <script src="//Microsoft.WinJS.0.6/js/ui.js"></script>

    <link href="/css/default.css" rel="stylesheet">
    <link href="/css/itemDetailPage.css" rel="stylesheet">
    <script src="/js/data.js"></script>
    <script src="/js/itemDetailPage.js"></script>

    <link href="///Microsoft.Metro.PlayerFramework.Js/css/PlayerFramework.css" rel="stylesheet" type="text/css" />
    <script src="///Microsoft.Metro.PlayerFramework.Js/js/PlayerFramework.js"></script>
    <script src="///Microsoft.Metro.PlayerFramework.Js.Adaptive/js/Plugin.js"></script>

</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="itemdetailpage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle"></span>
                <span class="artist"></span>
            </h1>
        </header>
        <section aria-label="Main content" role="main">

        <div id="mediaplayerelement" data-win-control="PlayerFramework.MediaPlayer">
        <video style="width: 100%; height: 100%;" autoplay="autoplay" controls>
            <source class="video" />
        </video>
        </div>

        </section>
    </div>
</body>
</html>


    • Edited by Solarpitch Tuesday, May 15, 2012 1:25 PM
    Tuesday, May 15, 2012 1:24 PM

Answers

  • Question
    Sign in to vote
    1
    Sign in to vote

    You got it!

    The appbar will come up by default with a swipe from the bottom or top (or right mouse click) and the user can navigate back.

    -Jeff

    Jeff Sanders (MSFT)

    • Marked as answer by Solarpitch Tuesday, May 15, 2012 2:32 PM
    Tuesday, May 15, 2012 2:26 PM
    Moderator

All replies

  • Question
    Sign in to vote
    1
    Sign in to vote

    Hi Solar,

    You would want to just have a blank page and not define it as a PageControlt.

    The default or main page defines the header and the nav arrow.  You could then provide an application bar for navigation back!

    -Jeff

    Jeff Sanders (MSFT)

    Tuesday, May 15, 2012 1:44 PM
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote

    Hi Jeff,

    When you say blank page do you mean something like this:

    <html>
...
<body>

<div id="mediaplayerelement" data-win-control="PlayerFramework.MediaPlayer">
<video style="width: 100%; height: 100%;" autoplay="autoplay" controls>
<source class="video" />
</video>
</div>

</body>
</html>

    Then if I provide an application bar for the title and nav back, I take it it will disappear along with the video progress bar when the user is inactive.

    Tuesday, May 15, 2012 2:24 PM
  • Question
    Sign in to vote
    1
    Sign in to vote

    You got it!

    The appbar will come up by default with a swipe from the bottom or top (or right mouse click) and the user can navigate back.

    -Jeff

    Jeff Sanders (MSFT)

    • Marked as answer by Solarpitch Tuesday, May 15, 2012 2:32 PM
    Tuesday, May 15, 2012 2:26 PM
    Moderator
  • Question
    Sign in to vote
    0
    Sign in to vote

    Sorry Jeff, I ment to ask..

    rather than the user having to right click or swipe from top / bottom, is there anyway to tie it onto the event that shows the progress bar when the user moves the mouse over or taps on the screen while in playback. I want it to appear as soon as the play / pause controls do and disappear with those controls after a few seconds when no activity

    Tuesday, May 15, 2012 3:00 PM