HTML\PHP : Flash Player detection technique - php

when we place flash files in our websites, it OFF-COURSE requires flash player on client machines, and prompts to install flash player...
is there some php code using which i can check weather there is flash player on the client machine and if not then instead of placing\embedding a flash file i place an images over there...
cuz in my specific case flash is not that much important... it is just for cosmetics, an animation... which i can replace by a gif or a simple jpeg doesnot matter...
but can i do it

swfobject can help with this.
You can just place the content to be shown if flash cannot be displayed in the code where the flash object should be, and point the script to it.
In code :
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>TestFlash</title>
<!--import the swfobject library /-->
<script type="text/javascript" src="swfobject.js"></script>
<!--Define which div (by ID) gets replaced if flash is present /-->
<script type="text/javascript">
swfobject.embedSWF("myContent.swf", "flash1", "300", "120", "9.0.0");
</script>
</head>
<body>
<h1>We are testing some flash</h1>
<hr />
<div id="flash1">
<!-- This stuff will show if flash is not present on the machine /-->
<img src="/img/image1.jpg" />
</div>
<hr />
<h2>this is a footer</h2>
</body>
</html>

See this article - http://www.adobe.com/devnet/flash/articles/fp8_detection.html
Adobe have got this sorted now so you can present alternative content / direct users to install flash / detect which version of flash user has and then install latest version if needed from your website without having to visit adobe site.
A little bit of work to get this in place so depends on how important it is that user is using flash or if the alternative content would work just as well. but for delivering flash content and being sure that the user will have correct version installed the Flash Detection Kit works great.

how about
<?
// Search through the HTTP_ACCEPT header for the Flash Player MIME type.
if (strstr($_SERVER['HTTP_ACCEPT'], 'application/x-shockwave-flash'))
{
$hasFlash = true;
}
if ($hasFlash)
{
// EMBED
} else {
// IMG
};
?>

Related

CSS file does not load until the text editor is not closed and the reopened

I am new to css & bootsrap. I developed a small website,that has six pages, I separated header and footer in two different php files in order to make life easy. Then I call header & footer in the top and bottom of each page respectively. Based on my requirement I customize some elements design (override bootsrap design) in a separate css file called "custom.css". each time when I bring changes in that file I have to close and re open the text editor in order to see the changes. First I thought it was be due to text editor so I changed my text editor from "Sublime Text to Php Storm";however, the issue has not yet been solved.
below are code snippets of my project:
header.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">
<script src="js/respond.js"></script>
</head>
footer.php
<!-- Footer -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd
/popper.min.js" integrity="sha384-
b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4"
crossorigin="anonymous">
</script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
I call the above files into my pages as below:
<? include ("header.php")?>
<body>
<div class="container">
.
.
.
.
</div> <!-- end container -->
<?include ("footer.php");?>
But if I do not separate header and footer, and write them in one page I can see changes immediately, I don't have to close and re open my text editor in order to see changes.
Could you please help me
As determined in the comments, it's a problem with your browser cache.
You either
need to refresh the page with CTRL+F5 (but this depends on your OS and browser) or
you instruct your local server to forbid browser caching in your development environment (don't do this on production!).
To prevent browser caching, instruct your webserver to send the appropriate headers. There is a nice answer here: How to control web page caching, across all browsers?
You'll need to know how to configure your webserver - I don't know OpenServer.
Note that it is not enough to add the headers in your PHP script because you need the headers to be sent with the static CSS file.
Below code works perfectly
<?php include_once('header.php');?>
<body>
:
:
:
some code
<?php include_once('footer.php');?>

Codeception - closed popup breaks selemium test

I'm testing a simple flow using Codeception with Selenium/FacebookWebdriver where a popup window gets closed at the end - causing entire test to break.
The code is complete (the test will run) and will reproduce the error.
I'm really desperate here, any suggestions will be very much appreciated.
These are the errors I get:
Codeception error message:
[Facebook\WebDriver\Exception\NoSuchWindowException]
Window not found. The browser window may have been closed.
Selenium server output message:
WARN - Exception: Window not found. The browser window may have been closed.
This code reproduces the problem.
It consits of 3 .html files (main.html, intermediate.html, popup.html), test file (PopupCest.php) and configuration file (selenium.suite.yml).
PopupCest.php
<?php
class PopupCest
{
public function popup(SeleniumTester $I)
{
$I->expectTo('Start on main page and click a link that opens a popup');
$I->amOnPage('/main.html');
$I->click('#main-link');
$I->expectTo('Interact with the popup window and click the final confirmation button');
$I->switchToNextTab();
$I->click('#final-confirmation-button');
$I->expectTo('Go back to intermediate window and let it do its magic');
$I->switchToPreviousTab();
$I->see('contents of this intermediate page');
$I->seeInCurrentUrl('intermediate.html');
}
}
selenium.suite.yml
class_name: SeleniumTester
modules:
enabled:
- WebDriver:
url: http://localhost
browser: firefox
- \Helper\Selenium
main.html
<html>
<head>
<meta charset="utf-8">
<title>Main page - under my control</title>
<meta name="description" content="Main page - under my control">
</head>
<body>
<h1>Main</h1>
<p>
After clicking this link, "intermediate page" url is received from a backend operation in reality.
</p>
<br>
Click here to open the popup <br>
</body>
</html>
intermediate.html
<html>
<head>
<meta charset="utf-8">
<title>External - intermediate page</title>
<meta name="description" content="Intermediate page outside of my control">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1>Intermediate</h1>
<p>
In reality, contents of this intermediate page is fully controlled by other party - a payment processor. <br>
It only load a javascript that opens up a popup window where user enters his payment details.
</p>
<script type="text/javascript">
$(function() {
var settings = "height=400,width=500,status=yes,dependent=no,resizable=yes";
popup = window.open('popup.html', 'dont_know_the_name_here', settings);
if (popup != null) {
popup.focus();
}
});
</script>
</body>
</html>
popup.html
<html>
<head>
<meta charset="utf-8">
<title>External - popup</title>
<meta name="description" content="Popup page outside of my control">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<h1>Popup</h1>
<p>
Contents of this page is fully controlled by other party - a payment processor. <br>
This is where user enters his payment details.
</p>
<p>
e.g. <i>"After you have finished your data input, click here to:"</i> <br>
Confirm your payment
</p>
<script type="text/javascript">
$(function() {
$('#final-confirmation-button').on('click', function(e) {
e.preventDefault();
window.close(); // <-- this breaks it all
});
});
</script>
</body>
</html>
Thank you for your help,
Tomas
Test code seems to be correct, I suspect that problem is related to outdated versions or possibly Firefox driver.
I tested your code with chrome+chromedriver and it seems to work without problem. Here's a test repo with instructions how to use chromedriver + required config changes: https://github.com/henrikauppinen/codeception-popup-chromedriver
Generally I'd advise to use Chrome for this type of testing, unless you are testing Firefox specifically or if it's a requirement.

Audio PlaybackRate in mobile browsers and supported plugin

I have to play a song in browses including Android and iPhone. I did it using the html5 audio player. But playbackrate is not working in Mobile Browsers. Is there any library or plugin available for this? Is web-audio API supports this feature?
In this site playback rate is working in mobiles too. But unable to find which method they are following?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<audio src="./audio/Kalimba.mp3" id="audio1" controls>Canvas not supported</audio>
<button id="playbutton" >Play</button>
</body>
<script type="text/javascript" >
$(document).ready(function (e) {
$('#playbutton').click(function () {
var audioElm = document.getElementById("audio1");
var playBackSpeed = 0.5;
audioElm = document.getElementById("audio1");
audioElm.playbackRate = playBackSpeed; // default speed 1
audioElm.play();
});
});
</script>
</html>
The site you're linking to uses Web Audio, but it doesn't use playbackrate to change the tempo of the song. Instead it schedules each note separately, so when you change the tempo, what you're really doing is change the BPM at which notes are scheduled. You can think of it as changing this:
setTimeout(schedule, 1000);
to:
setTimeout(schedule, 500);
when you go from 60 BPM to 120 BPM.
There is, however, a similar thing is Web Audio as what you're doing with the audio element. The AudioBufferSourceNode, which you use to play a pre recorded sample, has a property called playbackRate. This changes the rate of the audio (but doesn't do pitch correction!). Check it out at https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode
There are no any external Plugin or API which is required to play audio in Browser, this is one of the advantages of using HTML5.
Below i am mentioning the same with easy syntax and attributes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<audio controls>
<source src="Kalimba.mp3" type="audio/mp3" />
Audio not supported.
</audio>

Using PHP for comments inside of HTML

<?php // force Internet Explorer to use the latest rendering engine available ?>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<?php // mobile meta (hooray!) ?>
<meta name="HandheldFriendly" content="True">
I've seen this trend more and more lately. Does it have any advantages or disadvantages over the traditional way of leaving comments/notes?
Correct me if I'm wrong, but I think that the only reason is that you use this, is that you won't see the comments in the browser's source-view of your website.
Adding comments with php has one Advantage that only the developers reading php code will see these comments and that cannot be seen by viewing source code of page(html).
For my experience the only advantage with this trend is valuable when you have to comment large blocks of code/markup, like php mixed with hmtl or javascript.
That being said, best practices don't recommend mixing code and html when it's possible, but if you have to, it is better do this thing
<?php /*
//js code
<!--
<script type="text/javascript">
//my js script
</script>
-->
<!--
<p>a bit of commented html</p>
-->
*/ ?>
instead of
//js code
<!--
<script type="text/javascript">
//my js script
</script>
-->
<!--
<p>a bit of commented html</p>
-->
I would rather use this:
<?php
// force Internet Explorer to use the latest rendering engine available
echo '<meta http-equiv="X-UA-Compatible" content="IE=edge">'.PHP_EOL;
// mobile meta (hooray!)
echo '<meta name="HandheldFriendly" content="True">'.PHP_EOL;
and probably not use simple echo's like this. I simply don't like mixing PHP and HTML, it's ugly. Better go with full PHP code.
<?php echo'<!--- force Internet Explorer to use the latest rendering engine available-->' ?>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<?php echo'<!--- mobile meta (hooray!)-->' ?>
<meta name="HandheldFriendly" content="True">

Any way to cache layout of ExtJS application on server side?

Is there any method to cache an HTML-code of ExtJS components with further initializing it (binding events and so on) so that I can send it by PHP inside one solid HTML file?
In other words I want server to send already pre-rendered page.
If your idea is to capture the memory state of the client application that seems like a bold project, to say the least. See this other question.
If what you want is to have all you application embedded in one single HTML file, that is possible. Just concatenate all you Javascript (including Ext's code) and put it in a script tag, and do the same with the CSS and wrap in into a style tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
/* All your CSS here */
</style>
<script>
// All you javascript here
</script>
</head>
<body>
<!-- page content -->
</body>
</html>
Obviously, if you care about the maintainability of you code, you should automate this procedure...

Categories