CODEWITHSUNDEEP
phpvideovideo-streaming
djmzfKnm
djmzfKnm

Reputation: 27185

Video upload and display in PHP?

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

Upvotes: 0

Views: 13098

Answers (2)

MrHeart
MrHeart

Reputation: 1

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><a href="play.php?url=Funny_Naija_Video_Animation.mp4&pic=ng.png">Funny Nigeria Video Animation</a></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>

Upvotes: 0

Jan Turoň
Jan Turoň

Reputation: 32912

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.

Upvotes: 4

Related Questions