bufferesSkin with ChromelessVideoPlayer

[georgejr]

HI,

I'm usign this in Chromelessvideoplayer beml:

<Style class="VideoPlayer"><![CDATA[
...
.playheadWell {
unloadedSkin:http://img.brightcove.com/playheadWell-unloadedSkin.png;
bufferedSkin:http://img.brightcove.com/playheadWell-bufferedSkin.png;
watchedSkin:http://img.brightcove.com/playheadWell-watchedSkin.png;
}]]></Style>

 But it does not work. Nothing appears instead of the default skin.

[BC-Jonathan]

Could you please incldue all of the BEML?

Thanks

[georgejr]

<Runtime>
    <Theme name="Deluxe" style="Light">
        <Style id="default"><![CDATA[.titleText {fontSize:25;}.bodyText {fontSize:12;}.linkText {fontSize: 10;}.labelText {fontSize: 20;}
]]>
        </Style>  
        <Style class="ChromelessVideoPlayer"><![CDATA[
.playerChrome {
skin:http://server/chrome.png;
}
.playhead {
	skin:http://server/playheadWell-unloadedSkin.png;
	} 
.playheadWell {
	unloadedSkin:http://server/playheadWell-unloadedSkin.png;
	bufferedSkin:http://server/playheadWell-bufferedSkin.png;
	watchedSkin:http://server/playheadWell-watchedSkin.png;
	}]]>
        </Style>
    </Theme>
    <Layout boxType="hbox">
        <ChromelessVideoPlayer id="videoPlayer" useOverlayMenu="false" video="{videoList.selectedItem}">
            <ChromelessControls boxType="vbox" visible="{!videoPlayer.menu.open}" vAlign="bottom" hAlign="center">
                <Canvas height="80" width="90%" x="0">
                    <HBox hAlign="center">
                        <HBox id="defaultView" hAlign="center" gutter="6" vAlign="middle">
                            <ToggleButton id="playButton" width="65" height="60" iconName="play" toggledIconName="pause" tooltip="controls play tooltip" toggledTooltip="controls pause &#xD;                          tooltip" click="{videoPlayer.play()}" toggledClick="{videoPlayer.pause()}" toggled="{videoPlayer.playing}" enabled="{videoPlayer.video}"/>
                            <Canvas height="30">
                                <GraphicBlock/>
                                <HBox gutter="4" vAlign="middle">
                                    <Spacer width="1"/>
                                    <Canvas width="40">
                                        <Label id="positionLabel" y="-1" text="{format(videoPlayer.mediaPosition, SecondsTimecodeFormatter)}" vAlign="middle" hAlign="right" alpha=".75"/>
                                    </Canvas>
                                    <Playhead id="playhead" height="3" mediaController="{videoPlayer}" useTimeToolTip="true" enabled="{videoPlayer.video}"/>
                                    <Canvas width="40">
                                        <Label id="durationLabel" y="-1" text="{format(videoPlayer.mediaDuration, SecondsTimecodeFormatter)}" vAlign="middle" hAlign="left" alpha=".75"/>
                                    </Canvas>
                                    <Spacer width="1"/>
                                </HBox>
                            </Canvas>
                            <ToggleButton id="fullscreenButton" width="35" height="30" iconName="maximize" toggledIconName="minimize" tooltip="controls maximize tooltip" toggledTooltip="controls minimize tooltip" click="{videoPlayer.goFullScreen(true)}" toggledClick="{videoPlayer.goFullScreen(false)}" toggled="{videoPlayer.fullscreen}"/>
                            <VolumeControl id="volumeButton" width="35" height="30" mediaController="{videoPlayer}" useOverlayLayer="false" iconName="volume" mutedIconName="muted" tooltip="mute tooltip" mutedTooltip="unmute tooltip" useZeroWidth="true" horizontalPadding="10" popupGutter="3"/>
                        </HBox>
                    </HBox>
                </Canvas>
                <Spacer height="8" includeInLayout="{videoPlayer.fullscreen}"/>
                <VBox hAlign="center" height="117" width="90%" x="5%" padding="5" backgroundImage="http://server/headlinebg.png">
                    <TitleLabel id="videoName" text="{videoPlayer.video.displayName}" height="35" truncate="true"/>
                    <Label id="artistName" text="{videoPlayer.video.shortDescription}" height="25" size="12" truncate="true"/>
                </VBox>
                <Spacer height="20" includeInLayout="{videoPlayer.fullscreen}"/>
            </ChromelessControls>
        </ChromelessVideoPlayer>
    </Layout>
</Runtime>

 HI this is the code

[BC-Mikey · Accepted solution]

I've checked out your template and have staged an example with my own images for the Playhead Well:

http://bcove.me/1ugpcl5w

You can see 2 of the 3 skinned images appearing in the Playhead Well:

1) Watched: http://www.michaelcarreiro.com/uploaded_images/playheadWell-watchedSkin.png

2) Buffered: http://www.michaelcarreiro.com/uploaded_images/playheadWell-bufferedSkin.png

The Unloaded State is not appearing in this template because the Video being served from my account is served via Streaming (RTMP). This means that technically the Video is always "loaded" and will just be buffering the stream during Playback.

Whereas, if your content is being served via Progressive Download then you would experience a different effect that would serve the videos in a manner where the Video is actually being downloaded to the viewer's browser cache. In this method of delivery, the progress of the download would be tracked via the 'buffered' skin. However, until the buffered skin reaches the full length of the playhead well (in other words, until the full video has been downloaded to your cache) then the "unloaded" skin would appear.

By default, all Brightcove accounts start out as Streaming. If you have any questions about delivery methods or switching your method of video delivery, please contact our Customer Support department.

Please let me know if you have further questions about the above expected behavior.