{"id":22338,"date":"2021-04-26T18:45:42","date_gmt":"2021-04-26T18:45:42","guid":{"rendered":"http:\/\/compressing_resizing_and_optimizing_videos_in_laravel"},"modified":"2025-02-09T04:18:50","modified_gmt":"2025-02-09T12:18:50","slug":"compressing_resizing_and_optimizing_videos_in_laravel","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/compressing_resizing_and_optimizing_videos_in_laravel","title":{"rendered":"Compressing, Resizing, and Optimizing Videos in Laravel"},"content":{"rendered":"

Videos are large media files\u2014in most cases, at least four times larger than images\u2014and are often created for ads, marketing campaigns, and instructional content to convey as much information as possible in a short time. Ensuring that videos<\/a> do not buffer all the time and that the user\u2019s data is protected from rapid consumption due to heavy page weight must be the modus operandi for all website builders and e-business owners.<\/p>\n

This is part of a series of articles about video optimization<\/a>.<\/p>\n

Definition of Video Compression<\/h2>\n

Video compression is a method to reduce the data used to encode digital video content. This results in smaller storage requirements and lower transmission bandwidth requirements. It\u2019s essential to differentiate between video compression and video encoding<\/a>. While video compression can reduce the file size, it might impact the video quality. On the other hand, video encoding compresses video files without compromising quality.<\/p>\n

This article shows you how to optimize videos in Laravel.<\/p>\n

Set Up a Laravel Project<\/h2>\n

1.<\/strong> Install Composer<\/a> and PHP<\/a> on your development or production machine and then run this command:<\/p>\n

composer create-project --prefer-dist laravel\/laravel video-optimization\n<\/code><\/span><\/pre>\n
Additionally, for advanced video compression techniques using Laravel, it\u2019s beneficial to install FFmpeg in your composer. FFmpeg is a widely recognized tool for processing multimedia data, enhancing the video compression and optimization processes.<\/p>\n
2.<\/strong> Go to the video-optimization<\/code> directory and rename the env.example<\/code> file to .env<\/code>.<\/p>\n
3.<\/strong> Run the project with the command php artisan serve<\/code>.<\/p>\n
Your Laravel project is now up and running.<\/p>\n
Set Up Cloudinary\u2019s Laravel SDK<\/h2>\n
With Cloudinary, you can efficiently optimize media assets\u2014regardless of programming language. One reason is that, by default, Cloudinary automatically performs certain optimization steps on all transformed images. Plus, its integrated, fast-delivery capability through content delivery networks (CDNs) ensures that your images are seamlessly displayed on your viewers\u2019 devices.<\/p>\n
To enable video uploads and optimization with Cloudinary:<\/p>\n
    \n
  1. \n
    Sign up<\/a> for a free Cloudinary account, log in, and note your cloud name and API keys from the dashboard.<\/p>\n
    \"media<\/p>\n<\/li>\n
  2. \n
    Install Cloudinary\u2019s Laravel SDK<\/a>:<\/p>\n<\/li>\n<\/ol>\n
    composer require cloudinary-labs\/cloudinary-laravel\n<\/code><\/pre>\n
    Important:<\/strong> Be sure to follow the steps in the #Installation section. Publish the configuration file and add your Cloudinary credentials to the .env<\/code> file of your app.<\/p>\n
    Set Up the Mechanics for Video Uploads<\/h2>\n
    1.<\/strong> Create a video-upload controller (VideoUpload Controller<\/code>) in your project:<\/p>\n
    php<\/span> artisan<\/span> make<\/span>:controller<\/span> VideoUploadController<\/span>\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
    2.<\/strong> Open the VideoUploadController.php<\/code> file and add a method for displaying the upload form:<\/p>\n
    <?php<\/span>\nnamespace<\/span> App<\/span>\\Http<\/span>\\Controllers<\/span>;\n\nuse<\/span> Illuminate<\/span>\\Http<\/span>\\Request<\/span>;\n\nclass<\/span> VideoUploadController<\/span> extends<\/span> Controller<\/span>\n<\/span>{\n    public<\/span> function<\/span> showUploadForm<\/span>()<\/span>\n    <\/span>{\n        return<\/span> view('upload'<\/span>);\n    }\n}\n<\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
    3.<\/strong> Create an upload.blade.php<\/code> file in the resources\/views<\/code> directory and populate the file with the code below:<\/p>\n
    <!DOCTYPE html<\/span>><\/span>\n<html<\/span>><\/span>\n    <head<\/span>><\/span>\n        <meta<\/span> charset<\/span>=\"utf-8\"<\/span>><\/span>\n        <meta<\/span> name<\/span>=\"viewport\"<\/span> content<\/span>=\"width=device-width, initial-scale=1\"<\/span>><\/span>\n\n        <title<\/span>><\/span>Laravel Video Upload<\/title<\/span>><\/span>\n\n        <!-- Fonts --><\/span>\n        <link<\/span> href<\/span>=\"https:\/\/fonts.googleapis.com\/css?family=Nunito:200,600\"<\/span> rel<\/span>=\"stylesheet\"<\/span>><\/span>\n\n        <!-- Styles --><\/span>\n        <style<\/span>><\/span>\n            html<\/span>, body<\/span> {\n                background-color<\/span>: #fff<\/span>;\n                color<\/span>: #636b6f<\/span>;\n                font-family<\/span>: 'Nunito'<\/span>, sans-serif;\n                font-weight<\/span>: 200<\/span>;\n                height<\/span>: 100vh<\/span>;\n                margin<\/span>: 0<\/span>;\n            }\n\n            .full-height<\/span> {\n                height<\/span>: 100vh<\/span>;\n            }\n\n            .flex-center<\/span> {\n                align-items<\/span>: center;\n                display<\/span>: flex;\n                justify-content<\/span>: center;\n            }\n\n            .position-ref<\/span> {\n                position<\/span>: relative;\n            }\n\n            .top-right<\/span> {\n                position<\/span>: absolute;\n                right<\/span>: 10px<\/span>;\n                top<\/span>: 18px<\/span>;\n            }\n\n            .content<\/span> {\n                text-align<\/span>: center;\n            }\n\n            .title<\/span> {\n                font-size<\/span>: 84px<\/span>;\n            }\n\n            .links<\/span> > a<\/span> {\n                color<\/span>: #636b6f<\/span>;\n                padding<\/span>: 0<\/span> 25px<\/span>;\n                font-size<\/span>: 13px<\/span>;\n                font-weight<\/span>: 600<\/span>;\n                letter-spacing<\/span>: .1rem<\/span>;\n                text-decoration<\/span>: none;\n                text-transform<\/span>: uppercase;\n            }\n\n            .m-b-md<\/span> {\n                margin-bottom<\/span>: 30px<\/span>;\n            }\n        <\/span><\/style<\/span>><\/span>\n    <\/head<\/span>><\/span>\n    <body<\/span>><\/span>\n        <div<\/span> class<\/span>=\"flex-center position-ref full-height\"<\/span>><\/span>\n            <div<\/span> class<\/span>=\"content\"<\/span>><\/span>\n                <div<\/span> class<\/span>=\"title m-b-md\"<\/span>><\/span>\n                    Laravel File Upload\n                <\/div<\/span>><\/span>\n\n                @if ($message = Session::get('success'))\n                    <div<\/span> class<\/span>=\"alert alert-success alert-block\"<\/span>><\/span>\n                        <button<\/span> type<\/span>=\"button\"<\/span> class<\/span>=\"close\"<\/span> data-dismiss<\/span>=\"alert\"<\/span>><\/span>\u00d7<\/button<\/span>><\/span>\n                            <strong<\/span>><\/span>{{ $message }}<\/strong<\/span>><\/span>\n                    <\/div<\/span>><\/span>\n                @endif\n\n                <div<\/span> class<\/span>=\"links\"<\/span>><\/span>\n                     <form<\/span> action<\/span>=\"\/upload\"<\/span> method<\/span>=\"POST\"<\/span> enctype<\/span>=\"multipart\/form-data\"<\/span>><\/span>\n                        @csrf\n                        <div<\/span> class<\/span>=\"row\"<\/span>><\/span>\n\n                            <div<\/span> class<\/span>=\"col-md-6\"<\/span>><\/span>\n                                <input<\/span> type<\/span>=\"file\"<\/span> name<\/span>=\"video\"<\/span> class<\/span>=\"form-control\"<\/span>><\/span>\n                            <\/div<\/span>><\/span>\n\n                            <div<\/span> class<\/span>=\"col-md-6\"<\/span>><\/span>\n                                <button<\/span> type<\/span>=\"submit\"<\/span> class<\/span>=\"btn btn-success\"<\/span>><\/span>Upload a Video<\/button<\/span>><\/span>\n                            <\/div<\/span>><\/span>\n\n                        <\/div<\/span>><\/span>\n                    <\/form<\/span>><\/span>\n                <\/div<\/span>><\/span>\n            <\/div<\/span>><\/span>\n        <\/div<\/span>><\/span>\n    <\/body<\/span>><\/span>\n<\/html<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
    On a successful upload, the code above displays the form along with a confirmation message. Concurrently, the code posts the form data to an \/upload<\/code> route in the routes\/web.php<\/code> file.<\/p>\n
    Note:<\/strong> 
    You\u2019ll see the related code later in this post.<\/p><\/div>\n
    4.<\/strong> Go to the routes\/web.php<\/code> directory and add two routes: one to display the form and the other to process the file upload:<\/p>\n
    Route::get('\/upload'<\/span>, 'VideoUploadController@showUploadForm'<\/span>);\nRoute::post('\/upload'<\/span>, 'VideoUploadController@storeUploads'<\/span>);\n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
    Now reload the app and go to the \/upload<\/code> route. This page is then displayed:<\/p>\n
    \"Laravel<\/p>\n
    Compress and Resize Videos on Upload<\/h2>\n
    Create an  upload<\/code> method in the VideoUploadController.php<\/code> file to ensure that compression and resizing of user-uploaded images occur by default on upload<\/strong>.<\/p>\n
    The code below resizes a video to 350 pixels in width and 200 pixels in height:<\/p>\n
    public<\/span> function<\/span> upload<\/span>(Request $request)<\/span>\n<\/span>{\n\t $resizedVideo = cloudinary()->uploadVideo($request->file('video'<\/span>)->getRealPath(), [\n            'folder'<\/span> => 'uploads'<\/span>,\n            'transformation'<\/span> => [\n                      'width'<\/span> => 350<\/span>,\n                      'height'<\/span> => 200<\/span>\n             ]\n])->getSecurePath();\n\n\tdd($resizedVideo);\n} \n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
    Optimize Videos on Upload<\/h2>\n
    To consistently deliver the highest-quality videos with the smallest file sizes, follow the steps below.<\/p>\n
    Quality<\/h3>\n
    Compress and optimize the quality of a video file with the code below:<\/p>\n
    public<\/span> function<\/span> upload<\/span>(Request $request)<\/span>\n<\/span>{\n\t $compressedVideo = cloudinary()->upload($request->file('video'<\/span>)->getRealPath(), [\n            'folder'<\/span> => 'uploads'<\/span>,\n            'transformation'<\/span> => [\n                      'quality'<\/span> => auto,\n     \t\t ]\n])->getSecurePath();\ndd($resizedVideo);\n} \n<\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n
    Setting the auto<\/code> value for the quality<\/code> attributes automatically compresses and optimizes the video, balancing its visual quality. You can specify any of the auto<\/code> options below:<\/p>\n