I have the following code, I have set the bgcolor and still my page flashes white prior to swf loading. Basically i want the background to always be black, my page body tag has a black background.
<script type="text/javascript">
var path = "/media/19519/la_03.swf";
var videowidth = "955";
var videoid = "swf1454";
var videoheight = "540";
var flashvars = {};
var attributes = {};
var params = {
wmode: "opaque",
bgcolor: "#000000",
allowfullscreen: "true",
allscriptaccess: "always"
};
swfobject.embedSWF(path, videoid, videowidth, videoheight, "9.0.0", flashvars, params, attributes);
</script>
it's probably from your swf loading. I had a similar problem with a large swf and the way I got it to stop was to pause the swf in the first frame until it was done loading. Then just put an empty frame at 1 and make it the bg color. Once the swf is ready to go the animation starts
Make sure the html element containing the swf is black too.
I know this is an old post, but for people who stumble upon this post via search engines:
A flash of white is sometimes a byproduct of SWFObject's 'autohide' feature (CSS is used to hide the fallback content before the SWF loads). If you don't want to see the flash of white, try disabling SWFObject's autohide feature:
SWFObject documentation:
What's new in 2.2: The option to switch off SWFObject's default show/hide behavior
SWFObject 2.2 API docs: swfobject.switchOffAutoHideShow()
Of course, how you build your SWF will also impact whether you see a flash of white.
For me, the issue was in background color of the swf file.
When not explicitly set, it defaults to white until loaded. So just set it explicitly and you won't have a white flash.
var params = {bgcolor:"#000000"};
swfobject.embedSWF("my.swf", "flash", "100%", "100%", "10.0.0", false, {}, params);
Related
I have a react component which uses DropZone.
Actions are like this:
Add image to DropZone Area.
Image added is uploaded using PHP and a URL is sent back to next step.
This step show the React Avatar Editor holding the URL to the uploaded image.
I have set up the Avatar area/component like this:
setEditorRef = (editor) => this.editor = editor
<AvatarEditor
ref={this.setEditorRef}
image={this.state.image} // URL to uploaded image
scale={this.state.scale}
position={this.state.position}
onPositionChange={this.handlePositionChange}
style={{width: '310px', height: '263px'}}
border={10}
color={[255, 255, 255, 0.8]} // RGBA
rotate={this.state.rotate}
/>
What I need (AFTER dragging the image around, scaling it or rotating) is to send the image within the canvas to a php script, and save it. I know how to do this, but I cannot figure out how to access the image "constrained" by the canvas?
I've tried Avatar Editor's solutions (mentioned on the github).
this.editor.getImageScaledToCanvas().toDataURL('image/jpeg', 1);
and
this.editor.getImage();
But using axios and
let formData = new FormData();
formData.append('file', linkToCanvas);
does not work. (LinkToCanvas) should be the image held by the Avatar Canvas.
I also have the following issue after Image upload (solving this one enables me to solve the first issue as well, as I know the orientation of the image shown):
When uploading (4mb+) image files, I strip the EXIF information, save the image and returns a URL to Avatar Editor pointing to the new image.
If the image is vertical - Avatar shows the image horizontally (even when removing the EXIF info from the jpegs). Any way to force React to load an image 1-to-1, as it is stored on my server?
Any help is HIGHLY appreciated, as I've been struggling with this for a week now :-(
I know it's a long question. But I'm hoping for a short answer.
Thanks
The problem is that editor is not added to references.
To fix this, declare editor before constructor
...
import AvatarEditor from 'react-avatar-editor';
class YourClassName extends React.Component<any, any> {
editor: AvatarEditor;
constructor(props: Props) {
...
change setEditorFunction to this
setEditorRef = (editor: any) => {
if (editor) {
this.editor = editor;
const img = this.editor.getImageScaledToCanvas().toDataURL();
console.log(img);
}
}
And the last step change reference in component
<AvatarEditor
image={this.state.image}
width={this.state.width}
height={this.state.height}
color={[0, 0, 0, 0.6]}
scale={this.state.scale}
rotate={this.state.rotate}
position={this.state.position}
borderRadius={this.state.borderRadius}
ref={(ref) => this.setEditorRef(ref)}
onLoadSuccess={this.loadSuccess}
/>
A workaround but maybe not the best solution to Avatar Editor forcing rotate on jpgs. I use php to detect EXIF data. Rotate if this is needed. Then create a png from the jpg. Then save it and unlink “old jpg”. And finally return its location to my react script.
This solves the rotation problem. So now I can crop/rotate the image on the canvas and using the
getCroppingRect()
I can retrieve x, y, width and height and handle crop serverside. Finally enabling me to store the crop area.
However a new problem is now issued, as the editor rotates the image around its canvas center, so even if I can retrieve coordinates for the cropscript, as well as the rotation angle, its still misplaced, as php’s rotateimage rotates on the image center.
Anyone know how to rotate an image on a canvas around the image center?
I'm using fabric.js to draw annotations on page. Now I want to save anootated page as is, rather than to redraw all elements on server side using JSON.
I have main image loaded as:
function redrawPage(src) {
var deferred = $q.defer();
fabric.Image.fromURL(src, function (img) {
zoom.reset();
transformation.reset();
mainImage = img;
mainImage.set({
left: 0,
top: 0
});
mainImage.hasRotatingPoint = true;
mainImage.selectable = false;
canvas.clear();
canvas.setWidth(mainImage.getWidth());
canvas.setHeight(mainImage.getHeight());
canvas.add(mainImage);
canvas.renderAll();
deferred.resolve();
});
return deferred.promise;
}
and when I want to send canvas image data to be stored as annotated version of original image, I get "Operation is insecure" error.
function getImageData() {
var context = canvas.getContext('2d'),
imageData = context.getImageData(0, 0, canvas.width, canvas.height);
return imageData.data;
}
web server from which I load images is not allowing crossOrigin set to "Anonymus"
If the image host does not allow anonymous access then your .getImageData & .toDataURL will always fail because the canvas is tainted. No enduring workaround for that.
You can copy (or re-route) the image to your own server and deliver it from the same domain as your web page. This satisfies cross-origin restrictions so your canvas will not be tainted and your .getImageData will succeed. Of course, copyright laws apply.
There are several other workarounds that involve the user confirming that they want the image to be loaded in a cross-origin compliant way. Here's a relevant Stackoverflow post.
I need to create site with video which have autoplay and depend on profile which user selected. So in angular i created template popupVideo:
<video id="example_video_1" class="video-js vjs-default-skin"
controls autoplay preload="auto" height="100%" width="100%">
<source ng-repeat="vidObj in fullScreenVideoUrl" src="{{vidObj.url}}" type="{{vidObj.type}}"/>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p>
</video>
Then in controller i have code:
function showPopupVideo() {
$scope.fullScreenVideoUrl = [];
var webm = {};
webm.url = $scope.currentProfile.video_full + ".webm";
webm.type = "video/webm";
$scope.fullScreenVideoUrl.push(webm);
var mp4 = {};
mp4.url = $scope.currentProfile.video_full + ".mp4";
mp4.type = "video/mp4";
$scope.fullScreenVideoUrl.push(mp4);
var ogg = {};
ogg.url = $scope.currentProfile.video_full + ".ogv";
ogg.type = "video/ogg";
$scope.fullScreenVideoUrl.push(ogg);
ngDialog.open({
template: 'scripts/contents/template/popupVideo.html',
className: 'popup-fullscreen',
scope: $scope
});
}
So all work fine in Chrome and IE, window opens video starts and playing.
But in FF all going wrong, when window opened first time, it started to download (according to network monitor) but NO autoplay, also in console i could see:
Specified "type" attribute of "{{vidObj.type}}" is not supported. Load of media resource {{vidObj.url}} failed. localhost:3000
All candidate resources failed to load. Media load paused. localhost:3000
All candidate resources failed to load. Media load paused.
However! If i press play it start playing video!
Then if i close this window and open again, it show in console same text about not supported, BUT now it started to play video and in same time show on it text that "No video with supported format and MIME type found" how is it possible??? It cant find and it playing it in same time...
Probably too late but what you need to do is use ng-src="{{vidObj.url}}" instead of src="{{vidObj.url}}"
I am confused. The Youtube Iframe API with the standard example: https://developers.google.com/youtube/iframe_api_reference?hl=de always used to work for my mobile devices and does not work anymore now..
I´ve tried this fiddle: http://jsfiddle.net/77PJB/3/
<div id="player"></div>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '250',
width: '444',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady
}
});
}
function onPlayerReady(event) {
event.target.playVideo();
}
with the iPad,iPhone and Samsung galaxy nexus. The video does not play.. Did something change?
Thank you
Mobile Considerations
Autoplay and Scripted Playback
The HTML5 element, in certain mobile browsers (such as Chrome and Safari), only allows playback to take place if it's initiated by a user interaction (such as tapping on the player). Here's an excerpt from Apple's documentation:
"Warning: To prevent unsolicited downloads over cellular networks at the user’s expense, embedded media cannot be played automatically in Safari on iOS — the user always initiates playback."
Due to this restriction, functions and parameters such as autoplay, playVideo(), loadVideoById() won't work in all mobile environments.
From: https://developers.google.com/youtube/iframe_api_reference#Mobile_considerations
A simple workaround to have a custom looks of the "play" button:
Have an overlay element with pointer-events: none;. pointer-events works on all modern mobile browsers or simply have the video container over the button with opacity: 0.
The autplay function is not allowed for most mobile devices, so if you cut out that it works
I had this same issue too. Worked well on PC but not on phones. After a little research I found out that the video I was trying to play was CopyRighted. Due to this, the video was not playing on phones. Hope this helps someone out
use these player variables
playerVars: {'playsinline':'1', 'theme':'light','color':'white','modestbranding':1,'rel':0},
Only .playVideo() if the browser is not a mobile browser. There are many ways to detect a mobile browser as shown in this answer: Detecting a mobile browser
For example:
if(typeof window.orientation == 'undefined'){
player.playVideo();
};
Using the Mirror API, can animated GIF images be attached to the Glass timeline? If so, will they actually animate on Glass or present as a static image?
Animated GIF images work both as attachment and as <img> tags in HTML.
To answer the second question the gif animates. I tested with a timeline card like this:
{
"kind": "mirror#timelineItem",
"id": "6fd3c490-f751-40e3-8e1f-8b71494160fc",
"created": "2013-05-28T20:05:23.589Z",
"updated": "2013-05-28T20:05:23.589Z",
"etag": "\"r3ghbVW9Rp1kDP4UexS05_pFx4E/jVAhcX1aYFm8-1tN5G5Fv6RSscQ\"",
"html": "<article class=\"photo\">\n <img src=\"http://media.idownloadblog.com/wp-content/uploads/2012/05/Sonic-Animated.gif\" width=\"100%\" height=\"100%\">\n <div class=\"photo-overlay\"></div>\n <section>\n <p class=\"text-auto-size\">Spring Fling Fundraiser at Filoli</p>\n </section>\n</article>\n",
"notification": {
"level": "DEFAULT"
}
}
And the gif animates on Glass. It did take a moment to download displaying the card with a generic gray image icon with the text on top at first, but once the image showed up it definitely is animated and looping. If you go back to it later it still animates.
Update - It is possible to animate an attached GIF with new help from Jenny Murphy over at the issue tracker. If you include very basic HTML that references the attachment (eg ) it does work and animate. I have verified this with Glass using XE6.
This is the java code to do so:
TimelineItem timelineItem = new TimelineItem();
timelineItem.setText("");
timelineItem.setNotification(new NotificationConfig()
.setLevel("DEFAULT"));
//add html with reference to attachment using index 0
timelineItem.setHtml("<img src=\"attachment:0\">");
// Attach animated GIF
String contentType = req.getParameter("contentType");
URL url = new URL(req.getParameter("imageUrl"));
byte[] b = ByteStreams.toByteArray(url.openStream());
InputStream animatedGifStream = url.openStream();
MirrorClient.insertTimelineItem(credential, timelineItem,
contentType, animatedGifStream);
A full working implementation of this is at: https://github.com/mscheel/mirror-quickstart-java
That is the starter project for Java with extra features to attach a video or now an animated gif by attachment.