CodeSamplez

Programming Tutorials And Source Code Examples

Home Programming PHP HTML5 Video Streaming Tutorial

PHP HTML5 Video Streaming Tutorial

109 Comments


 PHP HTML5 Video Streaming Tutorial 

HTML5 video player is being more and more popular day by day. Though it can stream with a given public video file url, sometimes you will need to control the streaming from your server script to provide additional facility like authentication, resume support, sending in partial chunks etc. In a recent project, I have something similar, where a video was needed to be streamed through PHP to client browser’s HTML5 player. Here I will try to share my experience and code that will help you to implement PHP HTML5 video streaming easily and efficiently.

Checkout The PHP HTML5 Video Streaming Demo

The VideoStream class Code:

Following is the simple class, that includes all HTML5 streaming logic and is responsible for perform the main streaming action:

To use this class, you will have to write simple code like as below:

$stream = new VideoStream($filePath);
$stream->start();

Understanding the class and HTML5 Streaming logic:

The class simply takes the path of the video file as constructor parameter. It can either give it a local path, or even an amazon s3 file location as well(explained later).

after calling the ‘start()’ method, it first tries to open the file, then set the proper headers, then stream required contents and finally close the file system handler.

The header part is the most important as here you will be communicating with client browser, tell it that you can accept range request and check if browser made range requests or not and decide the amount of data to stream. In header setting, by default mp4 file’s mime type are given. You can change it according to your need. However, at this moment, mp4 is the most widely supported format across major browsers, so using this format is very much recommended. ‘Accept-Ranges’ header is important to tell the browser that server is accepting any byte level request in the given range, so that browser can decide range itself make custom range requests subsequently. When browser makes range request, it includes and additional header named ‘HTTP_RANGE’. Inside ‘setHeader()’ method, it just validates the range requests and decide how much data to send accordingly.

The ‘stream()’ method simply stream the predefined amount of data with a customizable buffer size.The buffer size is just to optimize the server memory utilization so that not huge memory is taken in case of concurrent high number of requests.

Streaming From Amazon S3 Service:

You can have s3 service’s file location support on the above class very easily. First, make sure to register ‘streamWrapper’ with your s3 client:

$s3Client->registerStreamWrapper();

then, while passing file path to VideoStream class’s constructor, use “s3://{bucket}/{key}” format as file string. Then modify the class’s ‘open()’ method, as below:

    /**
     * Open stream
     */
    private function open()
    {
        // Create a stream context to allow seeking
        $context = stream_context_create(array(
            's3' => array(
                'seekable' => true
            )
        ));
        if (!($this->stream = fopen($this->path, 'rb', false, $context))) {
            die('Could not open stream for reading');
        }
        
    }

Now you should be fine and streaming should work from Amazon S3 location as well.

Final Words:

Hope this small tutorial on PHP HTML5 Video Streaming will help you to get started with your next video streaming app. If you have any suggestions to improve the class, please suggest through commenting. If you are having any trouble in understanding any of the parts, feel free to ask as well. Happy coding 🙂

Comments

  3. It takes lots of time to load the video for the 1st time. I am playing 50 mb video file using the same code given above. Any thoughts?

    Reply

    • Did you compare the load time with direct media file loading and via PHP streaming(if so, give some link to test)? Also, it may depends whether you are streaming from S3, as such cases can cause slow loading as well(depending on bandwidth of your server and s3’s connectivity)

      Reply

      • Hi
        Great article, I am also trying to stream to a player but the video is taking over my whole page how do i make the video is just added to my html5 player. Thanks

        Reply

        • Put the streaming code ($stream = new VideoStream($filePath);
          $stream->start();) in a separate php file eg stream.php , and then in a different php file put video tag and in the src attribute put stream.php ,
          <video width="100%" height="500"

          it will stream without taking the whole page.

          Reply

      • Hello, I also tried to feed my HTML5 player with it, but it’s not working, and I don’t understand what you mean by “give the script url”, what should I input ? Thank you a lot !

        Reply

  7. Thanks a lot for the quick reply. I implemented the video streaming for two videos, one local in the server and one in S3. The local video plays well with all the browsers. The video I stream from S3 plays fine in Firefox and Safari but in Chrome I receive error net::ERR_CONTENT_LENGTH_MISMATCH in the middle of the video (similar to the one reported in the 1st message). However, Firefox seems not to use the Range HTTP header, unlike Chrome.

    You can test the videos using the following links, the first streams the local video, the second streams the video from S3.
    http://23.20.72.172/player/player.php
    http://23.20.72.172/player/s3player.php

    In the apache error log I get the following error:
    “PHP Fatal error: Uncaught exception ‘Guzzle\\Common\\Exception\\RuntimeException’ with message ‘Cannot seek to byte 5382346 when the buffered stream contains only 0 bytes” for this line:

    $context = stream_context_create(array(
    ‘s3’ => array(
    ‘seekable’ => true
    )
    ));

    Do you think it’s a bug in your code, chrome or S3?

    Thanks a lot,
    Vasilis

    Reply

  8. Warning: fopen() [function.fopen]: Filename cannot be empty in G:\g\xampp\htdocs\strm.php on line 27
    Could not open stream for reading….hi am new to php…and how to call $stream->start(); in video tag …and how we set the local video path….. thanks in advance

    Reply

  9. Hi Ahsan, I was able to solve my problem by making the $buffer very small, only 512. Now it works fine although I’m not sure why, it looks specific to S3 stream wrapper. I’ll test it with more videos.

    Reply

  10. i’am trying to build a webapp to stream videos from client to rtmp server without uploading the file. is it possible ??

    Reply

  11. I want to stream a live event from a camera, is it possible to stream it with the php script? can you explain How ?Thanks

    Reply

  14. How can I use for uploading video files to my server. I want it to upload files in chunks. Any suggestion will be appreciated.

    Reply

  15. Hi thanks a lot for your wonderful tutorial , I have question , what is difference between show the video directly through html5 video tag and through PHP code ? can you please explain ,is there any performance difference ?

    Reply

    • Performance is not the main fact here. Control is. Streaming it via a custom script, you can actually perform several useful features web app usually needs, such as authentication, control bandwidth, block requests that might be overading the server, analytics, support different media types on the fly etc….(list goes on).

      Reply

    • Hey John, I use this script for security reasons. My site (https://omgartists.com) allows musicians and bands to upload music files and host them. I use this solution because not all artists and bands want their music downloaded. Setting a URL to the HTML5 src tag allows the visitor to do that. I use this script to stream the audio to an HTML5 video tag. It doesn’t get saved in the cache, and can’t be downloaded directly.

      Reply

      • “It doesn’t get saved in the cache, and can’t be downloaded directly.” loool, really?
        What about “right-mouse-button” and then “file save as…” in IE, Firefox, …

        Reply

        • Yes, really…

          My first question would be ‘right-click’ on what? In the case I’m describing, there is no object on the page to ‘right-click’ on. I’m not using a tag.

          Also, if you view the network activity in your debugger, it will show something like ‘https://omgtap.co/audioplayer/streamAudio.php?7o5u57EX’ as the source of the audio stream.

          Copying that link to a browser window will give the visitor an ‘Invalid Security Key’ warning because I have security set up so that it will only stream to a call from the page it’s embedded in.

          So, yes… It does work.

          Check out reverbnation.com, they do the same thing – you cannot save a song that’s streaming from their site. You can always ‘record’ the song as it’s streaming, but you cannot save the file directly.

          1. Set your audio player’s SRC to a url that pulls the audio file URL on the server side (so that it’s not accessible in your code).
          2. Set up security in your SRC url to only stream to the domain and page it comes from – this will keep the stream from working anywhere but where you want it to be pulled from.
          3. Right click’s don’t work – there’s nothing to right-click.
          4. The audio stream will NOT be saved in your cache and is not available to pull from a separate browser window.

          Reply

  18. Hello, Thanks for the class, it works almost perfectly ! However, I realized that the script from which I’m building the VideoStream object and executing start() is re-executed 2 or 3 times. Do you have the same issue or do you have any idea about how I can fix it?

    Thanks for your help

    Cheers

    Reply

  20. Hi, I am using your script to play a video, when i play two files one by one in refresh, it is playing the old one only, some times even I eventually gave a video file it does not exist, it is playing the old one only. I think the ‘$stream = new VideoStream($file); object is not getting destroyed for the second time onwards. When I log off and login again, then the changed file(or second file) is played, but again if change to next file it is playing the previos on only. In my app user selects list of files to play but, only first time selected file only played always. What could be the reason. Thank you.

    Reply

    • I use the script on my site to hide the mp3 url so it cannot be downloaded without permission from the artist or band that uploaded it. Just placing the url of the file in the HTML5 tag allows the visitor to 1) right click on the HTML5 Video element (if being displayed) and download the source, or 2) find the source file in a browser network inspector and download it from the cache. Streaming with this method doesn’t leave the file in the cache. https://omgartists.com is my working model using this streaming script.

      Reply

  22. Great! 100% working code, I only had to pass the correct path to my video ))) What a luck, thank you!

    Reply

  26. Notice: Undefined variable: filePath in C:\xampp\htdocs\programs\live_stream.php on line 1

    Warning: fopen(): Filename cannot be empty in C:\xampp\htdocs\programs\live_stream.php on line 25
    Could not open stream for reading

    I just add your code into my page.It gives me above error notice & warning.Please help me.
    for live streaming

    Reply

  31. thanks, this tutorial is awesome!!
    I have a question.If I want to prevent download by right click(or download file cannot be play), then how can I modify this code?

    Reply

  32. Great tutorial! However it works only in Chrome and not in Firefox (40.0.2) for me. The error is Video format or MIME type is not supported.

    Reply

  33. I feel this is very late but i am finding a strange issue, the video is working fine in local but when i upload in server it is not playing at all. i have checked the headers its all fine.

    Do we have to alter server for playing files? if so then please let me know what all changes have to be done.

    Thanks in advance

    Reply

  34. Hi, I trying to develop video confrencing software with minimum 24 to maximum 50 users online to pull their IP addresses and video recording or chat support with file attachments like lync I need developers to support my email id: shankartvt@rediffmail.com

    Reply

  37. You just make me recover my job with this awesome, perfect, great, fabulous Streaming Class! I love you soo much from the bottom of my soul. Hahaha Thanks!!

    Reply

  40. The lession ‘s very good ! but onething….it works fine in Chrome & Firefox ….Safari & orther iOS devices not working ….so how can i fix that ?

    Reply

  42. (Sorry for my English)
    why you use HTTP and not RTP in this script, I know that for a streaming video we use RTP protocol, no?,
    please I wait for your answer, I must use this script in my research work if it’s possible.

    Reply

  44. Warning: Cannot modify header information – headers already sent by (output started at C:\AppServ\www\streaming\home.php:1) in C:\AppServ\www\streaming\home.php on line 42

    Reply

  47. Hi there,

    I needed to change

    header(“Accept-Ranges: 0-“.$this->end);

    to

    “header(“Accept-Ranges: bytes”);

    to get the seeking to work correctly. My web browser during testing was firefox.

    Reply

  49. I have used the code but its not working, now I have realized that I didn’t use this code => $stream = new VideoStream($filePath);
    $stream->start();. Please tell me which page do I place it?

    Reply

  50. Nice tutorial, thank you. I wonder if you could take it a step further and explain how to ensure that the user could only be streaming 1 video at a time?

    I have been using this code example for a few weeks and I have tried so many approaches and I have failed at every turn.

    I would appreciate any guidance you could provide.

    Thank you

    Reply

  51. Hello Rana!
    I am a complete beginner to Video Streaming lessons in PHP but I have learned basic php
    I can just connect to database and insert data and display it how I like cut strings and explode functions but I need a complete tutorial on how to change header what is range for browser please can you give me some video type tutorial or tell me where I can find such tutorials or series of tutorials covered only for video streaming and header And I don’t know what header can actually do without header(“location:url”) so please helllllllllllllllllllllllllllllllllp;

    iammuslimpakistani

    Reply

  52. How to use your class to grab the stream from an IP Camera so it can be wrapped in this class to make things like username/password and real camera IP not visible to the end-user. Things like filesize() don’t work for that.

    Reply

  53. Dear Mr. Rana,

    thank you for sharing this great piece of work. Most helpful was the demo, which, unlike to others, prooved your way does really work.

    Best feature is that a file like “../../mydata/movie.mp4” will be streamed. This makes it possible to store the files where a normal URL cannot access it.

    ———————–
    Some clarifying clues to other developers how to integrate this in your application:
    Step 1) The page where you want to show your video is at minimum like this:

    Untitled

    Step 2) The used file movie_Rana.php goes like

    <?php
    include_once("RanaVideoStream.php"); // when include_path is set or else use require_once

    $stream = new VideoStream("../../data/mymovies/mymovie.mp4" ); start();exit;

    ?>

    Step 3) Copy the complete code from above (or the Gunther improvement) in a new file and name it

    RanaVideoStream.php

    Thats it. 🙂

    Reply

  54. It ate may code… Next try for Step 1:

    Create an empty html-page. In the body only one line is needed, here echoed by php.

    <?php

    echo '’;

    ?>

    Reply

    • Sorry, cannot post code here.

      In Step 1, use the video element and type src= movie_Rana.php with apostrophs

      Reply

  57. Hi
    Great article, I am also trying to stream to a player but the video is taking over my whole page how do i make the video is just added to my html5 player. Thanks

    Reply

  58. Hi Rana, i´am using your code and it works well (thanks 🙂 !!! ) when i test from my computer to smartphone (android and IOS). But, i´m using a solution of captive portal of a router with OpenWRT and i have limited resources. So, i have to play a video before allow the user login or create a profile, but the stream doesn´t work in this case. Do you know what it would be the problem ? ffmpeg ? php modules ? Could you give me some tip for this situation ?

    Reply

  60. Great script! It’s possible to stream more than one video file in a script?

    I tried the following code and also delete the exit; lines but the script is just serving the first videofile and not the two files 🙁

    $stream1 = new VideoStream($file1);
    $stream1->start();

    $stream2 = new VideoStream($file2);
    $stream2->start();

    Reply

  61. Hello,
    it’s possible to stream 2 video files in 1 php script? I tried it but it’s streaming only the first video file. Of course I dele the lines with exit; command

    Reply

  65. Hi,
    Thanks for a wonderful article.
    I tried to use the method for stream on my site. It is on codeigniter. I added the videostream.php as a library and called as a library. But the video cannot play. It is showing error as the video file is corrupt. But the url I tried to play is correct and the file exist in the url. Please help me

    Reply

  66. I might have a silly Question but i need to ask that i need to use the webcam and save the video to my Amazon server and do want to put a security when playing back in other words i want user save his video from his webcam to websites amazon server and when he give the access to his friend to view the video he provide him password also so only authorized users can see the video do any one has any solution for the same

    Reply

  67. I’m trying to access the video from AWS but the code seems not working to me. I think, I’m configuring it differently. Although it’s working good if video load from same directory. I need you help urgently, please look into the matter and help me out from this.
    I’m getting confused how to use this “s3://{bucket}/{key}” string into the file path.

    Here what I’m trying to configure
    $credentials = array(
    ‘key’ => ‘AWS KEY’,
    ‘secret’ => ‘AWS Secret KEY’
    );
    // Instantiate the client.
    $s3Client = new Aws\S3\S3Client([
    ‘version’ => ‘latest’,
    ‘region’ => ‘us-east-1’,
    ‘validate’ => [‘required’ => true],
    ‘http’ => [
    ‘verify’ => true
    ],
    ‘credentials’ => $credentials
    ]);

    Now how to use “s3://{bucket}/{key}”?

    Reply

  69. hello

    Great article, I’m trying to stream to player, I don’t want video autoplay. please help me thank.

    Reply

  70. Hi,

    I tried using this and is working perfectly fine. Issue comes here.

    Video size is 600mb. Playing fine.

    But while video is playing if user is clicking on any other link on site its now going to that page it simply playing the video and not going to other page.

    What can be the issue?

    Reply

  71. Thank you for this excellent code. I noticed that some browsers such as the one listed at the bottom of this post set $_SERVER[‘HTTP_RANGE’] to something like [bytes: 0-65536] (without the brackets). To allow this code to work for those, I’ve modified line 53 in your example to:

    if (strpos($_SERVER[‘HTTP_RANGE’], ‘=’) == false) {
    // the name and value are delimited by a colon instead of an =
    list(, $range) = explode(‘:’, $_SERVER[‘HTTP_RANGE’], 2);
    } else {
    // this handles most cases where the name and value are delimited by an =
    list(, $range) = explode(‘=’, $_SERVER[‘HTTP_RANGE’], 2);
    }

    Mozilla/5.0 (Linux; Android 5.1.1; LGMS330 Build/LMY47V) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.89 Mobile Safari/537.36

    Reply

  75. I love you!
    Was trying this about 1 week found million of tutorials some didn’t work with other browsers some couldn’t be downloaded yours is the best anything is working fine!

    Thank you so much!

    Reply

  76. I want to stream a live event from a camera, how is it possible to stream it with the php script? can you explain?Thanks

    Reply

  77. with this library: can i stream a live video from a webcam? or only functions with a saved file? I want to show a billiard tournament for all my country or people in other cities.

    Reply

  79. Hi Can Anyone suggest me any company who can provide such API through which i can built website where my users can go live from their laptops or desktops with webcam?

    Reply

  81. I have used the video streaming code which you have mention in your website, but when i refresh the page again and again then video play from staring. This is not a live video streaming. I want to implement live video streaming in my website, can you please tell how to implement live video streaming?

    Reply

  82. Hello Sir,

    I am unable to streaming with s3 bucket.
    I config all thing as per your guidance.

    Please help me.

    Reply

  83. Hi Md Ali Ahsan Rana,

    Nice tutorial. This is help full for us. I have use for mp3 its working. Now I am working on downloading more than 2gb zip file from PHP. Scenario is that we have zip file located in CDN azure. and I am trying to download this big size of file from my azure server using PHP. its working for 1megabyte then it is aromatically exit. it is not working for big size more than 2gb of file. I have modified your code like file size which is getting from header ($headers[‘Content-Length’] –> get_headers($filename , 1)) and buffer size. I am trying to debug and update while loop, but not getting success. Can you please assist me on this scenario. This will help me a lot.

    Sorry, I am hiding my website name
    Thanks,
    Swapnil

    Reply

  84. Hi,

    This is a swapnil. I have commented on this blog related large zip (< 2 gb) file, few days ago. I really appropriate if you help me out. I tried this code with large zip file. it is terminated my script. I have set memory limit , script execution time in script but does not execute. can you please assist me on this scenario.

    Thanks,
    Swapnil

    Reply

  85. Please Let Me Know How to embed web camera / ip camera instead of video file to make this project work as live streaming. (like an event is streamed over ip)., Please reply as soon as possible, Make me back that will be your most kindness at : softivasolutions@gmail.com

    Reply

  86. include “./libraries/VideoStream.php”;
    $stream = new VideoStream(“my folder path”);

    ‘
    $stream->start();exit;

    But sir how to implement in video frame.

    Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Comments

Archives

Tags

.net apache api audio aws c# cache cloud server codeigniter deployment doctrine facebook git github golang htaccess html5 http image java javascript linq mysql nodejs oop performance php phpmyadmin plugin process python regular expression scalability server smarty ssh tfs thread tips ubuntu unit-test utility web application wordpress wpf