This project is read-only.

Add fullscreen control to entertainment video player

Topics: Windows 8 JavaScript
Dec 19, 2012 at 10:03 AM
Edited Dec 19, 2012 at 10:04 AM

hi all,


i am using player framework's Entertainment-dark.css as follows:

    <link href="/Microsoft.PlayerFramework.Js/css/PlayerFramework-Entertainment-dark.css" rel="stylesheet">


i am trying to add fullscreen control to the video player but the button isn't visible in the player. that button can be seen if i choose PlayerFramework-dark.css. is there any way to implement that button to the video player while using PlayerFramework-Entertainment-dark.css

my code is:

<div data-win-control="PlayerFramework.MediaPlayer"     data-win-options="{ isRewindVisible: true, isFastForwardVisible: true, isFullScreenVisible: true,  isFullScreenEnabled: true, width: 640, height: 360,  src: '' }"></div>

Feb 5, 2013 at 11:04 PM
Hello, the entertainment theme only provides a subset of the buttons as the other/video tag-like theme because normally these buttons should be placed outside the player framework in your app bar instead. To put the fullscreen button in your app bar, all you need to do is drop this html in your page...
<div id="bottomAppBar" data-win-control="WinJS.UI.AppBar" data-win-options="{ placement: 'bottom', layout: 'custom' }">
<button type="button" class="pf-full-screen-control" data-win-control="WinJS.UI.AppBarCommand" data-win-bind="winControl.icon: fullScreenIcon; winControl.label: fullScreenLabel; winControl.tooltip: fullScreenTooltip; winControl.disabled: isFullScreenDisabled; winControl.onclick: toggleFullScreen PlayerFramework.Binding.setEventHandler;"></button>
along with this code...
mediaPlayer.addEventListener("interactiveviewmodelchange", onMediaPlayerInteractiveViewModelChange, false);

    function onMediaPlayerInteractiveViewModelChange(e) {

    function bindControls() {
         PlayerFramework.Binding.processAll(bottomAppBar, mediaPlayer.interactiveViewModel);