I want to upload video to server and then display it on web page using some player (like youtube) using PHP.
My client ask: "Videos must be no longer than 2 minutes and in either Quicktime, WMV, Mp4 or FLV format."
Is there any opensource script which help me to upload a video with client requirements and then an opensource player which plays that video?
Please help!
Thanks
This is my favourite solution:
http://flowplayer.org/
It enables to control the video quite a lot: it uses javascript settings and embedded flash video player.
Edit: if you look for good uploader, try
http://code.google.com/p/swfupload/
It can do multiple uploads, and filetype checks.
You must, first of all, create links to the videos you want to play (I created mine on a separate page[index.html]). Then upon the click of a link, it will open the page (play.php). I assumed that index.html was displaying the links to the videos from the database, then the rest of the scripting for playing is handled by play.php.
see codes below:
index.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style type="text/css">
tr:nth-child(odd) {
background-color: #f2f2f2
}
</style>
</head>
<body>
<center>
<table width="53%" border="1">
<tr>
<td width="8%">S/NO</td>
<td width="92%">NAME OF VIDEO FILE</td>
</tr>
<tr>
<td align="center">1</td>
<td>Funny Nigeria Video Animation</td>
</tr>
<tr>
<td align="center">2</td>
<td><a href="play.php?url=WildGeese.mp4&pic=wg.png">Joan Armatrading-
Flight of the Wild Geese - MP4</a></td>
</tr>
</table>
</center>
</body>
</html>
play.php
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Fluid Width Video</title>
<style>
* { margin: 0; padding: 0; }
body {
font: 16px/1.4 Georgia, Serif;
width: 50%;
margin: 80px auto;
background: url(images/bglines.png);
}
h1 { font-weight: normal; font-size: 42px; }
h1, p, pre, video, h2, figure, h3, ol { margin: 0 0 15px 0; }
h2 { margin-top: 80px; }
h1 { margin-bottom: 40px; }
li { margin: 0 0 5px 20px; }
article { background: white; padding: 10%; }
pre { display: block; padding: 10px; background: #eee; overflow-x: auto; font: 12px Monaco, MonoSpace; }
img { max-width: 100%; }
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videoWrapper iframe,
.videoWrapper object,
.videoWrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
video {
width: 100% !important;
height: auto !important;
}
figure { display: block; background: #eee; padding: 10px; }
figcaption { display: block; text-align: center; margin: 10px 0; font-style: italic; font-size: 14px; orphans: 2; }
</style>
</head>
<body>
<?
if(isset($_GET['url'])){
$vid = "movies/".$_GET['url'];
$pos = "movies/".$_GET['pic'];
if($pos == "movies/ng.png"){
$cap = "Animation - Funny Play Station 3 Nigerin video clip";
}
if($pos == "movies/wg.png"){
$cap = "Jordan Armsterdam - The flight of the Wild Geese";
}
?>
<figure>
<video src="<?php echo $vid;?>" controls poster="<?php echo $pos;?>"></video>
<figcaption><?php echo $cap; ?></figcaption>
</figure>
<?php }else{ echo "You must be a paid Student in order to watch video tutorial!"; }?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
var $allVideos = $(".js-resize"),
$fluidEl = $("figure");
$allVideos.each(function() {
$(this)
// jQuery .data does not work on object/embed elements
.attr('data-aspectRatio', this.height / this.width)
.removeAttr('height')
.removeAttr('width');
});
$(window).resize(function() {
var newWidth = $fluidEl.width();
$allVideos.each(function() {
var $el = $(this);
$el
.width(newWidth)
.height(newWidth * $el.attr('data-aspectRatio'));
});
}).resize();
</script>
</body>
</html>
Related
I am trying to make a webpage which displays rectangles of different sizes in a grid.
The code below works to display 3 rectangles all height: 50px and width equal to $rectangleWidth = "200px".
<html>
<head>
<style>
<?php
$rectangleWidth = "200px";
?>
.grid-container {
margin: auto 1fr;
max-width: 8000px;
display: grid;
grid-template-columns: 400px
}
.grid-container div {
border: 1px dashed gray;
text-align: center;
padding: 12px;
}
.pre { display: inline; }
<?php echo ".rectangleRed {
height: 50px;
width: " . $rectangleWidth . ";
background-color: #ff1a1a;
float: left;
margin-right: 0px;
}";
?>
</style>
</head>
<body>
<div class="grid-container">
<?php
for ($x = 0; $x < 3; $x++) {
echo '<div><pre class="rectangleRed"></pre></div>';
}
?>
</div>
</body>
</html>
I have an array with three different widths $rectangleWidths = ["100px", "200px", "300px"]. I am struggling to make the rectangles change size according to the widths.
I tried to put the CSS code for .rectangleRed { } into a php block with the width as a variable so that the width of the rectangle is redefined each increment of the loop. This didn't work. The CSS code was displayed on screen instead of redefining the width of the rectangle. Here is the code from my attempt:
<html>
<head>
<style>
<?php
$rectangleWidths = ["100px", "200px", "300px"];
?>
.grid-container {
margin: auto 1fr;
max-width: 8000px;
display: grid;
grid-template-columns: 400px
}
.grid-container div {
border: 1px dashed gray;
text-align: center;
padding: 12px;
}
.pre { display: inline; }
</style>
</head>
<?php
for ($x = 0; $x < 3; $x++) {
$rectangleWidth = $rectangleWidths[$x];
echo "<style><head>.rectangleRed {
height: 50px;
width: \"" . $rectangleWidth . "\";
background-color: #ff1a1a;
float: left;
margin-right: 0px;
}</style></head>";
echo '<body><div class="grid-container"><div><pre class="rectangleRed"></pre></div></div></body>';
}
?>
</html>
My only guess for why this doesn't work is that maybe I incorrectly used the , , and tags. I'm not sure how I could do this differently to make it work.
I looked at similar questions including Apply CSS Styling to PHP output and How to add CSS styles to a PHP code within a loop?. The solutions for those questions did not resolve my issue.
I can't able to see the image after applying CSS background color.
HTML page:
<html>
<head>
</head>
<body>
<div class="heading">
<h2>
<span>LUMINO</span>ADMIN
<img name ="messageicon" alt="Messages" src="<?php echo base_url(); ?>img/closed-envelope-circle.png">
</h2>
</div>
</body>
</html>
CSS page:
.heading{
background-color: yellow;
width: 100%;
height: 10%;
left: 0;
top: 0;
}
.heading h2{
margin-left: 25px;
padding: 15px;
}
h2{
color: white;
}
span{
color: skyblue;
}
SCREENSHOTS:
The image should be visible after applying the CSS background color.
The images might be having transparent background. In this case it will use the container's background color. Apply a background-color css rule to the img to get a color to your image.
.heading img{
background-color: white;
}
Just in case, base_url(); isn't a valid function (if you haven't written one).
you can use $_SERVER['REQUEST_URI'] it gave you the whole link from your Website back in form of an String. In that case you can use the substr to cut the sting in your form you like.
Here is my Examlpe of your code:
<html>
<head>
</head>
<body>
<div class="heading">
<h2>
<span>LUMINO</span>ADMIN
<img name ="messageicon" alt="Messages" src="<?php echo($_SERVER['REQUEST_URI']); ?>img/closed-envelope-circle.png">
</h2>
</div>
</body>
</html>
If you want to know more about base urls take a look here
Enjoy and have fun ;)
--- EDITS: ---
<html>
<head>
</head>
<body>
<div class="heading">
<h2>
<span>LUMINO</span>ADMIN
</h2>
<img name ="messageicon" alt="Messages" src="<?php echo($_SERVER['REQUEST_URI']); ?>img/closed-envelope-circle.png" style>
</div>
<style>
.heading {
background-color: black;
width: 100%;
height: 10%;
left: 0;
top: 0;
}
.heading h2{
margin-left: 25px;
padding: 15px;
}
h2{
color: white;
float: left;
}
span{
color: skyblue;
}
</style>
</body>
</html>
Perhaps this one is better and you can test it with e sperate file so you don't need to change your original.
I am using dompdf to generate letters which I want to brand with various different companies branded paper. To do this I'm getting a background image via css. See example image at bottom. I then set appropriate margins to fit the content I want to write out into the white space. However I just want this letterhead to display on the first page only. At present it is repeating onto each page. My css looks like:
<html>
<head>
<meta charset="utf-8">
<title>{$pdf.title}</title>
<style type="text/css">
#page {
size: A4;
margin:0;
padding: 0;
}
body {
padding: {$branding.page_margin_top}cm {$branding.page_margin_right}cm {$branding.page_margin_bottom}cm {$branding.page_margin_left}cm;
font-size: 7pt;
font-family: helvetica !important;
background-image: url('{$base_url}pd-direct.png');
background-position: center center;
background-repeat: no-repeat;
font-size: 10pt;
}
#postal-address {
margin: 0cm;
margin-left: {$branding.address_offset_left}cm;
margin-top: {$branding.address_offset_top}cm;
margin-bottom: {$branding.address_offset_bottom}cm;
font-size: 10pt;
}
#date {
font-weight: bold;
}
</style>
</head>
<body>
<div id="page-body">
<div id="content">
{if $pdf.postal_address}
<div id="postal-address">
{$pdf.postal_address|nl2br}
</div>
{/if}
{$pdf.main_body}
</div>
</div>
</body>
</html>
How can I change this so the background image is only displayed on the first page output by dompdf?
See current html being rendered at: http://eclecticgeek.com/dompdf/debug.php?identifier=ccfb2785f8a8ba3e1e459cbd283ad015
You can put the letterhead as the background image in an div that overlaps the main content div and use z-index to organise the stacking order of the divs, so that background image will appears at the back.
This way, the background image will only show on the first page when you convert it to PDF using DOMPDF.
The CSS below works for A4#150dpi.
CSS
#page {
size: A4;
margin-top:0.5cm;
margin-bottom:0;
margin-left:0;
margin-right:0;
padding: 0;
}
body {
font-family: helvetica !important;
font-size: 10pt;
position: relative;
}
#overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-image: url('http://www.showhousesoftware.com/pd-direct.png');
background-position: center top;
background-repeat: no-repeat;
z-index: -1;
}
#content{
padding: 3.5cm 0.50cm 5.00cm 0.50cm;
}
#postal-address {
margin: 0cm;
margin-left: 1.50cm;
margin-top: 0.00cm;
margin-bottom: 1.00cm;
font-size: 10pt;
}
#date {
font-weight: bold;
}
HTML
<body>
<div id="page-body">
<div id="overlay">
</div>
<div id="content">
......
</div>
</div>
</body>
The user arrives on the following php script and it sets if the email has been confirmed or not.
At the moment the only thing the user can seen in the browser is a very simple message printed by the php echo.
I would like it to look visually more interesting. Get this echo to be part of a properly styled HTML page with header, font styles, signature, images...
What would be the best approach for that having in mind my script has breakpoints? As I never did that before, not sure what would be the best start point to focus the effort on.
Bellow are my code updates based on the answers. Hope that helps other
users that are new to php.
<?php
require("../db/MySQLDAO.php");
require ("../Classes/EmailConfirmation.php");
$config = parse_ini_file('../db/SwiftApp.ini');
//host access data
$dbhost = trim($config["dbhost"]);
$dbuser = trim($config["dbuser"]);
$dbpassword = trim($config["dbpassword"]);
$dbname = trim($config["dbname"]);
// receive token data
$emailToken = htmlentities($_GET["token"]);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="width=device-width" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Title here</title>
<style>
/* -------------------------------------
GLOBAL
------------------------------------- */
* {
margin: 0;
padding: 0;
font-family: "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.6;
}
img {
max-width: 100%;
}
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
width: 100%!important;
height: 100%;
}
/* -------------------------------------
ELEMENTS
------------------------------------- */
a {
color: #348eda;
}
.btn-primary {
text-decoration: none;
color: #FFF;
background-color: #348eda;
border: solid #348eda;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 25px;
}
.btn-secondary {
text-decoration: none;
color: #FFF;
background-color: #aaa;
border: solid #aaa;
border-width: 10px 20px;
line-height: 2;
font-weight: bold;
margin-right: 10px;
text-align: center;
cursor: pointer;
display: inline-block;
border-radius: 25px;
}
.last {
margin-bottom: 0;
}
.first {
margin-top: 0;
}
.padding {
padding: 10px 0;
}
/* -------------------------------------
BODY
------------------------------------- */
table.body-wrap {
width: 100%;
padding: 20px;
}
table.body-wrap .container {
border: 1px solid #f0f0f0;
}
/* -------------------------------------
FOOTER
------------------------------------- */
table.footer-wrap {
width: 100%;
clear: both!important;
}
.footer-wrap .container p {
font-size: 12px;
color: #666;
}
table.footer-wrap a {
color: #999;
}
/* -------------------------------------
TYPOGRAPHY
------------------------------------- */
h1, h2, h3 {
font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #d63480;
margin: 40px 0 10px;
line-height: 1.2;
font-weight: 200;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 28px;
}
h3 {
font-size: 22px;
}
p, ul, ol {
margin-bottom: 10px;
font-weight: normal;
font-size: 14px;
}
ul li, ol li {
margin-left: 5px;
list-style-position: inside;
}
/* ---------------------------------------------------
RESPONSIVENESS
------------------------------------------------------ */
/* Set a max-width, and make it display as block so it will automatically stretch to that width, but will also shrink down on a phone or something */
.container {
display: block!important;
max-width: 600px!important;
margin: 0 auto!important; /* makes it centered */
clear: both!important;
}
/* Set the padding on the td rather than the div for Outlook compatibility */
.body-wrap .container {
padding: 20px;
}
/* This should also be a block element, so that it will fill 100% of the .container */
.content {
max-width: 600px;
margin: 0 auto;
display: block;
}
/* Let's make sure tables in the content area are 100% wide */
.content table {
width: 100%;
}
</style>
</head>
<body bgcolor="#f6f6f6">
<!-- body -->
<table class="body-wrap" bgcolor="#f6f6f6">
<tr>
<td></td>
<td class="container" bgcolor="#FFFFFF">
<!-- content -->
<div class="content">
<table>
<tr>
<td>
<h1>Title</h1>
<table>
<tr>
<td class="padding">
<p>
<?php
if(empty($emailToken)) {
echo "<h2>Sorry, something went wrong...</h2>";
echo "<p>Unfortunately your email validation token has expired.</p>";
echo "<p>Please get in contact with us at <a href=mailto:></a></p>";
}
else{
//open server connection
$dao = new MySQLDAO($dbhost, $dbuser, $dbpassword, $dbname);
$dao->openConnection();
//creates user
$user_id = $dao->getUserIdWithToken($emailToken);
if(empty($user_id))
{
echo "<h2>Sorry, something went wrong...</h2>";
echo "<p>We could not find an user associated with the email you provided.</p>";
echo "<p>Please get in contact with us at <a href></a></p>";
}
else{
$result = $dao->setEmailConfirmedStatus(1, $user_id);
if($result)
{
echo "<h2>Thank you! Your email is now confirmed!<h2>";
$dao->deleteUsedToken($emailToken);
}
}
$dao->closeConnection();
}
?>
</p>
</td>
</tr>
</table>
<p class="padding"></p>
<p>Thanks,</p>
<p>Title team</p>
<p class="padding"></p>
</td>
</tr>
</table>
</div>
<!-- /content -->
</td>
</tr>
</table>
<!-- /body -->
</body>
</html>
Use HTML to structure your content and CSS to format your content.
You can echo HTML and CSS right along with your string.
Those links should get you going in the right direction.
Update to accommodate comment
There are many methods, but a simple example that might work for your case is something like this:
Instead of echoing right there in your if statement, replace it with an include or require.
Lets call that file template.php. This file does not need to start with <?php and end with ?>. PHP can punch in and out with HTML. So template.php might look like this:
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta charset="UTF-8">
<title></title>
<link href="css/styles.css" rel="stylesheet" />
</head>
<body>
<div class="some_style"><?php
echo 'something';
?></div>
<div class="some_style2"><?php
echo $some_var;
?></div>
</body>
</html>
Also if this is going to be sent in an email, CSS is not really supported in email, so you will need to keep the styling to what you can do with simple HTML tags and images.
Change your echo to:
echo '<div id="message">User with this email token is not found</div>';
Then style #message with css
Hope that helps!
urgh.. uglyness html in php. There are ways in which you can include html within the script without echoing it out.
There is the old way.
// out of php
?>
<div>
<?php echo $content; ?>
</div>
<?
// back in.
Or you can look into php/html short hand. Your code will benefit from it because it will be somewhat cleaner to read,
The main reason though, dont make php parse html unless you have to.
PHP
echo "<p id='token_message'>User with this email token is not found</p>";
CSS
#token_message {
/* Styling Here */
}
The Images which are hyperlinked don't appear to have any horizontal space between them and so look scrunched up. Applying a width doesn't seem to work and I've tried other Answers which don't work.
Here is my PHP code:
<?php
include_once("php_includes/check_login_status.php");
if($user_ok != true || $log_username == ""){
header("location: http://burningchat.tk/home");
exit();
}
$_SESSION['user_id'] = md5(time());
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body{ margin: 0px; text-align: center; font-family: Arial; }
#pagetop{
position: fixed;
top: 0px;
width:100%;
height: 120px;
background: #FF5C26;
color: #FFF;
font-size: 23px;
padding-top: 50px;
transition: height 0.3s linear 0s, padding 0.3s linear 0s;
overflow:hidden;
}
#pagetop > #menu{
position: absolute;
bottom: 0px;
width:100%;
background: #FD4000;
height: 50px;
transition: height 0.3s linear 0s;
}
#wrapper{ margin-top: 230px;
}
#mainbody{
margin-top: 50px;
display:block;
}
</style>
<script>
var pagetop, menu, yPos;
function yScroll(){
pagetop = document.getElementById('pagetop');
menu = document.getElementById('menu');
yPos = window.pageYOffset;
if(yPos > 150){
pagetop.style.height = "36px";
pagetop.style.paddingTop = "8px";
menu.style.height = "0px";
} else {
pagetop.style.height = "120px";
pagetop.style.paddingTop = "50px";
menu.style.height = "50px";
}
}
window.addEventListener("scroll", yScroll);
</script>
</head>
<body>
<div id="pagetop">
The Gaming Hub
<div id="menu"><img src="images/home.png" alt="Chat" border="0" title="Go Back to Burning Chat"></div>
</div>
<div id="wrapper">
<h1><span style="font-family:tahoma,geneva,sans-serif;">Welcome to the Gaming Hub,</span></h1>
<p><span style="font-family:tahoma,geneva,sans-serif;">Whether the need is for something fun, or just to pass the time. Burning Chat's Gaming Hub allows a variety of fun activities, all for free.</span></p>
<hr width="50%">
<div id="mainbody">
<img src="images/standard.png" alt="Chat" border="0" title="Standard">
<img src="images/carbon.png" alt="Chat" border="0" title="Carbon">
<img src="images/gamer.png" alt="Chat" border="0" title="Gamer">
</body>
</html>
Use margin in the element like this:
#mainbody a{
margin: 0 5px;
}