how to scale the video in the media tag?
<p:media value="#{mediaBean.media}" width="250" height="225" player="quicktime"/>
the resolution is bigger thant 250x225 - so I just see parts of the videoscreen - why it's not automatically scaling the video to 250x225 ? any ideas?
regards
You have to send scale attribute as parameter (f:param) to the player.
<p:media value="#{mediaBean.media}" width="250" height="241" player="quicktime"/>
<f:param name="scale" value="tofit" />
</p:media>
Each player specifies what parameters they support.
In your case quicktime supports scale attribute:
scale
SCALE is either TOFIT, ASPECT or a number. By default the value of
SCALE is 1. If set to TOFIT, the movie is scaled to fit the embedded
box as specified by the HEIGHT and WIDTH attributes. If this is set to
ASPECT, the movie will scale to fit the embedded box while maintaining
the aspect ratio. If this is set with a number, the movie will be
scaled by that number (e.g. 1.5). Note: Using the number scale
attribute with a QTVR Panorama movie can degrade the performance of
the movie even on high-end systems.
Useful links here:
Quicktime
Flash
Windows Media Player
Related
I am creating a adaptive card with background image, i want to increase the size of the background image as 400X400.
AdaptiveCard card = new AdaptiveCard();
card.BackgroundImage = "https://www.w3schools.com/html/img_girl.jpg";
// Body content
// Add text to the card.
card.Body.Add(new TextBlock()
{
Text = "Hiya, I am testing Adaptice card background image. <a>https://www.google.co.in</a>",
Size = TextSize.Large,
Weight = TextWeight.Bolder
});
I am testing with bot emulator.
AFAIK, this feature is not supported for now, the background image will automatically cover the AdaptiveCard from card's top-left-corner, it will firstly be scaled to fit the available width and in the meantime keep its original aspect ratio. And card's rendering depends on different clients, some clients limits the height of card and some doesn't. For bot emulator, it will not limit the height of card, so the card's height will increase along with the content of AdaptiveCard.
So, if your image for background is not high enough than card's height, it can not cover the whole and if it is higher, the down part of image will be clipped.
This is how background image works for now, there is no method to control its size in our bot.
I am trying to setup a layout such that it has an image with regions. Those regions,can have either other ImageView or TextView. I am able to achieve this at a high level using FrameLayout and RelativeLayout. However, it does not scale properly on different devices.
As an example here is an image
Yellow/Red Region - ImageView setup dynamically
Blue/Green Region - TextView
So On the Device, I want it to look like this:
And like this:
Note that Image scales correctly and so does child views in correct regions.
Can someone please share some ideas on how this could be achieved?
I was able to do this by writing a Custom View. I set the layout bonds based on the % offset.
For example the image would start at 15% off top and 10% off left and width is 30% card size etc.
I tested this with multiple devices and so far it is working as designed.
Have a look at Supporting Different Screen Sizes
Also have a look at Supporting Multiple Screens
This links has exactly what you are looking for. Follow the example and you will achieve the desired result.
These tutorials explains how to scale images based on the screen sizes and how to design your layout.
Extract from Google's dev site:-
Explicitly declare in the manifest which screen sizes your application supports
Provide different layouts for different screen sizes
Provide different bitmap drawables for different screen densities
Use OnConfigurationChanged() to determine the orientation and changes the views according to your requirements
public override void OnConfigurationChanged(Android.Content.Res.Configuration newConfig)
{
if(newConfig.orientation==Configuration.ORIENTATION_LANDSCAPE){
//Change the Layout width and height attributes according to your requirements
Log.e("On Config Change","LANDSCAPE");
}else{
//Change the Layout width and height attributes according to your requirements
Log.e("On Config Change","PORTRAIT");
}
base.OnConfigurationChanged(newConfig);
}
I know this is ridiculous, but I'm learning...
In a Chrome application I let my sender initiate and load a Custom receiver.
The receiver page includes a video element set to play one specific video, like this:
<video autoplay>
<source src="../media/someVideo.mp4" type="video/mp4">
</video>
The receiver page and the media file are hosted on a web server (SP)
I use no further communication between sender and receiver, so the receiver just loads and plays the video.
It works beautifully, but the video size on the device (TV) is too big. It fills the screen, but I don't see the full picture.
I try to downsize the video using CSS or by setting the width and height parameters on the video element, but the result is the same. Why doesn't ChromeCast respect these settings?
width/height for the video element should work. As a test, just set width and height in the element itself and test. On a tv screen, in general, there is a notion of overscan and most modern tv sets have a setting to adjust that, you might want to check to see if your tv offers that too or not.
I'm starting out the design of my app by using one of the templates provided with VS2012, where you have an Image displayed next to some TextBlocks. I want the user to be able to pick a photo or similar to be the image but, in the event that they haven't done this, I want to provide a default icon.
My initial thinking was to create PNGs of the different default icons, at the different sizes that the Image icons appear at and just return those from the binding if the user hasn't specified an image, but it occurred to me that if I can use XAML Paths instead, the default icons will appear crisper because they will be drawn as vectors rather than bitmaps.
I'm not sure if that decision is a mistake but it is causing me a few headaches :-(.
The first challenge I've tried to solve is how to use binding to display either an image or the XAML Paths. My solution here was to use a Button instead of the Image, and bind Content. The Content binding returns a Canvas object that either holds the Image or the set of Paths that define the icon.
That works until I change to the snapped view, which then has smaller Image/Button elements than the unsnapped view.
So the second challenge, and the primary reason for this question, is to seek advice on how best to deal with the differing sizes of the Buttons. In the unsnapped view, the Button is 110x110. In the snapped view, the Button is 60x60. In the research I've done, the simplest way to resize the paths seems to be to use a Transform on the Canvas but since the Canvas is being returned from the Binding call, the code-behind won't necessarily know what size the parent Button is and therefore won't be able to include the Transform.
I can't use a DrawingBrush because these aren't valid in Windows Store Apps.
Is there a clean solution to this or should I go back to the simpler but slightly lower quality solution of using pre-created PNGs?
Thanks.
The solution I adopted in the end was to use two items - a button and an image - each wrapped in a border that allowed me to make only one of the items visible, depending on whether or not a bitmap image was available:
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Width="250" Height="250" Visibility="{Binding ImageIsAvailable, Converter={StaticResource HideIfTrue}}">
<Button Content="{Binding ImageContent}" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="20,20,0,0" Style="{StaticResource UnstyledGraphicsButtonStyle}" Width="{Binding ImageWidth210}" Height="{Binding ImageHeight210}" Foreground="white" Padding="0" Background="Transparent" BorderBrush="{x:Null}" IsEnabled="False" />
</Border>
<Border Background="{StaticResource ListViewItemPlaceholderBackgroundThemeBrush}" Visibility="{Binding ImageIsAvailable, Converter={StaticResource DisplayIfTrue}}">
<Image Source="{Binding Image250}" Stretch="{Binding Stretch250}" AutomationProperties.Name="{Binding Title}" HorizontalAlignment="Center" VerticalAlignment="Center"/>
</Border>
In this example, I'm wanting the item to be 250px by 250px. The binding for Stretch is so that I can handle images that are bigger and smaller than 250px and stretch accordingly.
For the button, the content actually comes from a declared string resource, e.g.:
<x:String x:Key="building">M13.982995,32.651007L13.982995,37.332006 18.665994,37.332006 18.665994,32.651007z M5.3319988,32.440006L5.3319988,37.332006 10.225996,37.332006 10.225996,32.440006z M34.665606,29.33198L34.665606,37.313 37.332797,37.313 37.332797,29.33198z M29.332198,29.33198L29.332198,37.340984 31.999405,37.340984 31.999405,29.33198z M13.923995,24.000005L13.923995,28.740005 18.665994,28.740005 18.665994,24.000005z M5.3319988,24.000005L5.3319988,28.839005 10.171997,28.839005 10.171997,24.000005z M34.665606,18.665992L34.665606,26.684976 37.332797,26.684976 37.332797,18.665992z M29.332198,18.665992L29.332198,26.644998 31.999405,26.644998 31.999405,18.665992z M13.331995,16.000003L13.331995,18.666003 15.998995,18.666003 15.998995,16.000003z M7.9989967,16.000003L7.9989967,18.666003 10.665997,18.666003 10.665997,16.000003z M26.665998,13.331976L39.998998,13.331976 39.998998,42.666973 26.665998,42.666973z M13.331995,10.666002L13.331995,13.332002 15.998995,13.332002 15.998995,10.666002z M7.9989967,10.666002L7.9989967,13.332002 10.665997,13.332002 10.665997,10.666002z M10.665997,0L13.331995,0 13.331995,5.3340011 15.998995,5.3340011 18.665994,10.666002 18.665994,18.666003 21.331993,18.666003 23.998992,21.332004 23.998992,42.667007 0,42.667007 0,21.332004 2.6659985,18.666003 5.3319988,18.666003 5.3319988,10.666002 7.9969978,5.3340011 10.665997,5.3340011z</x:String>
This comes from Metro Studio.
The height and width bindings are because my different SVG items have different width & height ratios so I bind to code-behind to return the correct figures for the desired size. Unfortunately because you can't pass parameters, I end up with different "ImageHeightXXX" calls for different values of XXX depending on the XAML.
Advice on how to get the string defined can be found here: http://www.jayway.com/2012/11/27/styling-windows-8-4-the-button/
In my job I'm embedding SWF files into HTML documents all the time. I often asked myself a few things:
Is it scaleMode="noscale" or scale="noscale"? And are the values case-sensitive? I saw a few code snippets like scale="noScale" etc.
How is the syntax in ActionScript? Is it the Camelcase noScale? I don't care about the HTML standards I'd just like to know how it is from the Flash developers perspective.
Anyone has a clue? I checked Google a lot of times but I have never found something like a conformance description. I just found the Adobe page that describes the parameters and values but that does not answer any of my questions.
Thanks a lot! :)
Found answer in Google in 3 seconds:
scale - Possible values: showall, noborder, exactfit, noscale.
Specifies how Flash Player scales SWF content to fit the pixel area
specified by the OBJECT or EMBED tag. default (Show all) makes the
entire SWF file visible in the specified area without distortion,
while maintaining the original aspect ratio of the movie. Borders can
appear on two sides of the movie. noborder scales the SWF file to fill
the specified area, while maintaining the original aspect ratio of the
file. Flash Player can crop the content, but no distortion occurs.
exactfit makes the entire SWF file visible in the specified area
without trying to preserve the original aspect ratio. Distortion can
occur. noscale prevents the SWF file from scaling to fit the area of
the OBJECT or EMBED tag. Cropping can occur.
More info here
Edit: I think case-sensitivity depends on the browser, but following xhtml standards you should always use lowercase.
Edit2: scaleMode on the other hand is a property of Stage object in ActionScript, so it is used to set scale mode in SWF movie, that is not embeded. When you embed the swf, that param is overriden with what you've set up in your HTML.
If you're setting your scale mode via ActionScript, you use the scaleMode property of the Stage object. If you're setting it via JavaScript or HTML markup, you use scale in a <param> node.
Regarding capitalization, Adobe's documentation for scaleMode (ActionScript) has used camel case consistently for as long as I can remember (at least the last 6 years). The current AS3 docs clearly use camel case. The article linked above is referring to scale in JavaScript/HTML, not ActionScript. It seems that camel case across-the-board is the safest route, you can be sure it will be supported.
Here are some scale examples using using SWFObject:
SWFObject dynamic:
var flashvars = {};
var params = { scale: "noScale" };
var attributes = {};
swfobject.embedSWF("/swf/sample.swf", "flash", "100%", "100%", "9", false, flashvars, params, attributes);
SWFObject static:
<object id="flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">
<param name="movie" value="/swf/sample.swf" />
<param name="scale" value="noScale" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="/swf/sample.swf" width="100%" height="100%">
<param name="scale" value="noScale" />
<!--<![endif]-->
<p>Place fallback content here for users who don't have Flash<p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
Examples and a description of the scale options:
http://learnswfobject.com/advanced-topics/100-width-and-height-in-browser/