Using flex mx HTML component we can preview the website at AIR, however it seems did not support all features(audio,video) of html5. such as the following example:
<mx:HTML location="http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_video_bear" width="100%" height="100%"/>
when you running application, the video can not be displayed in AIR windows.
Video/Audio HTML5 tags are currently disabled in AIR.
Here's article about items that are and aren't supported in AIR right now.
Related
I will host videos from my server for users. Users can embed videos... Currently I am writing the php script. But I have a problem with embed codes. The problem is, cannot fullscreen on html5... Player support html5 & flash player. If player is flash users can go fullscreen from embed code. But on html5 player can't go fullscreen. Youtube's embed codes can go fullscreen but YouTube uses html5 too. Here is the code that i used:
<iframe width="530" height="270" src="http://videohost.tk/embed/0f2c67c9b" frameborder="0"></iframe>
If you enter the link directly you can go fullscreen. But on iframe you cannot... How can I fix it?
I think your iframe element needs to include the allowfullscreen attribute.
Here is the update code with the new fullscreen attribute as an example:
<iframe width="530" height="270" src="http://videohost.tk/embed/0f2c67c9b" frameborder="0" allowfullscreen></iframe>
Just wanted to point out: For IE to recognize the frameborder attribute, it needs a capital B, as in frameBorder. All other browsers seem to recognize both options, so the 'B' is a good failsafe for compatibility. According to the MSDN docs, allowfullscreen should work just fine in IE, although that might only pertain to HTML4.
I am trying to display HTML text inside the Label in my Adobe Air mobile application, so far
I realized that Label doesn't support HTML, I went through the few solutions I found so far on the web:
Instead of Label - User TextArea and then use:
StyleableTextField(message.textDisplay).htmlText = messageText;
and in the TextArea declaration - specify mobile skin
<s:TextArea editable="false" selectable="false" skinClass="spark.skins.mobile.TextAreaSkin" id="message" x="0" y="0" width="100%" height="100%" paddingLeft="5" paddingRight="5" textAlign="left"/>
First of all, HTML still doesn't work, instead of converted HTML it just shows me ..... garbage, but even if it would have worked - TextArea component looks different than Label and doesn't feet in the design I am implementing.
User RichText component - unfortunately it's not supported in mobile apps
Any other ideas?
Yes, HTML is not supported in the Label and TextArea components for Spark (it was supported in Halo, or the mx components).
The only Flex components that officially do support it are RichText and RichEditableText. The skins for these components are not mobile optimized, but they run on mobile just fine. You may run into some speed issues when using massive amounts of it, but you can still use them (as you can with most, if not all, other components that aren't mobile optimized).
As I would like to be able to manipulate the z-index of an embedded Youtube playlist, I tried adding the html5 parameter, set to 1, but this seems to work for single video embedding only.
This works:
<iframe width="300" height="225" src="http://www.youtube.com/embed/VIDEO_ID?html5=1" frameborder="0">
But this doesn't:
<iframe width="300" height="225" src="http://www.youtube.com/embed/videoseries?list=PLAYLIST_ID&html5=1" frameborder="0">
Many thanks :)
You are forcing the html 5 player the right way, youtube doesn't support this at the moment this will only work for single video's.
There are other solutions to have a html5 player play multiple youtube video's in html5.
Using mediaelement.js you can build something yourself (check which vid is playing, which one's next, if a video's finished, etc...). http://mediaelementjs.com/
After a quick Google I found a HTML5 player which actually has playlist support: http://mediafront.org/osmplayer/#.UK1L3eOe-pY
I am having some issue with consistency across different machines with my flex application.
There are three things that I have noticed with my application. On my development machine (Windows XP) I can not reproduce these issues.
I have noticed them on a Windows Vista machine as well as a Windows 7 machine.
The three things that I have found are:
Label's will be truncated with '...'
Tabs in a tab navigator will be truncated with a '...'
Some Images will be rendered with an inconsistent width and height
My labels are defined pretty simply
<mx:Label x="261" y="15" text="Date Prepared" fontWeight="bold" width="113"/>
Tabs are custom components but defined in a pretty standard format:
<mx:TabNavigator borderStyle="solid"
x="10" y="10" width="665" height="450" id="tabs" creationPolicy="all">
<local:FormPanel id="formPanel" name="formPanel"
label="Incident Details "
width="665" height="450"/>
</mx:TabNavigator>
You may notice extra white space following the label in the custom FormPanel, I have found that this might help solve a subset of the truncation issues (not 100% sure).
As for my images, again, I am not doing anything to amazing:
<mx:Image id="vehicle_image"
source="#Embed(source='../../../../../images/icons/basic/vehicles.swf')"
height="45" width="45" toolTip="Vehicles"
toolTipShow="handleToolTipShow(event)"
click="showBar(event, vehicle_bar)" enabled="true" x="47" y="0"/>
The image is contained in a canvas and I will have about 10 of these images all sized 45x45. On certain machines I will see 3 of the 10 images rendered smaller what would appear about 30x30 relative to the other 45x45 sized images.
The problem I am having is that I can not reproduce these issues on my development machine, and do not have any clue on how to fix these issues. I would expect that the things I am seeing are bugs in the FlexSDK, but even if they are bugs I do need a temporary work around.
Any ideas?
For some reason it won't let me add a comment, but..
This sounds a lot like some of the changes (CSS fixes) put in from Flex 2 to 3 (maybe 3 to 4 as well?) (Button components can do this too if the width is a fixed size.)
Are you absolutely sure that your development machine is running the same version of the app as the others? If you're using Flex/Flash Builder's "run" functionality to run on the dev machine, but building and deploying with Flex Ant tasks or some kind of separate build for the others, it's possible to have this happen by using different SDKs even though the code hasn't been changed at all.
I have some HTML that is generated via a Rich Text Editor outside of my Flex application but would like to display it inside Flex.
The HTML is simple HTML tags, things like styles, anchors, and possibly image tags, is there a control that would let me render this HTML in flex or am I going to have to roll up my sleeves and roll my own?
Any ideas appreciated...Thanks.
If the HTML is really simple, you can display it in a normal label or textarea component, If it is more complex, I'll quote what I answered in this question. The discussion there also has a little more info.
If it is complex HTML and Javascript, one possible way is HTMLComponent, a method that uses an iframe over your flash to make it appear like the HTML is in your app. There are a few downsides to this method however - most of them described in detail at Deitte.com.
If this can move offline, you could use Air (it has an mx:HTML component built in). Deitte.com has a detail of this technique as well.
Check out the documentation on mx.controls.Label and flash.text.TextField (which is what displays the text in a Text or Label control in Flex). The TextField documentation states that
The <img> tag lets you embed external image files (JPEG, GIF, PNG), SWF files, and movie clips inside text fields. Text automatically flows around images you embed in text fields. To use this tag, you must set the text field to be multiline and to wrap text.
Which means that you can display an image in a Text component in Flex by setting its htmlText property to some HTML which contains an <img> tag. You can't use Label, because it is not multiline.
I've noticed that text fields have trouble with properly measuring their heights if the images displayed in them are left or right aligned with text flowing around them (e.g. align="left"). You may have to add some extra spacing below to counter that if you plan to use aligned images.
You will have to use flex iFrame control.
It is not an 100% flash solutions, and combines a bit of js calls but works perfectly for me.
You can grab latest source code from github https://github.com/flex-users/flex-iframe
Here is some sample code from the component author.
<!---
A basic example application showing how to embed a local html page in a Flex application.
#author Alistair Rutherford
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:flexiframe="http://code.google.com/p/flex-iframe/"
horizontalAlign="center"
verticalAlign="middle"
viewSourceURL="srcview/index.html">
<!-- Example project presentation -->
<mx:ApplicationControlBar dock="true">
<mx:Text selectable="false">
<mx:htmlText><![CDATA[<font color="#000000" size="12"><b>flex-iframe - Simple html example</b><br>This example shows how to embed a simple Html page in a Flex application.</font>]]></mx:htmlText>
</mx:Text>
</mx:ApplicationControlBar>
<!-- HTML content stored in a String -->
<mx:String id="iFrameHTMLContent">
<![CDATA[
<html>
<head>
<title>About</title>
</head>
<body>
<div>About</div>
<p>Simple HTML Test application. This test app loads a page of html locally.</p>
<div>Credits</div>
<p> </p>
<p>IFrame.as is based on the work of</p>
<ul>
<li>Christophe Coenraets</li>
<li>Brian Deitte</li>
</ul>
</body>
</html>
]]>
</mx:String>
<!-- Example using the 'source' property -->
<mx:Panel title="A simple Html page embedded with the 'source' property"
width="80%"
height="80%">
<flexiframe:IFrame id="iFrameBySource"
width="100%"
height="100%"
source="about.html"/>
</mx:Panel>
<!-- Example using the 'content' property -->
<mx:Panel title="A simple Html page embedded with the 'content' property"
width="80%"
height="80%">
<flexiframe:IFrame id="iFrameByContent"
width="100%"
height="100%"
content="{iFrameHTMLContent}"/>
</mx:Panel>
</mx:Application>
#mmattax
Indeed you can display images in a TextArea component. The approach is not entirely without problems though...