Video.js Bundle Laravel Package

Getting Started

Minimal Steps to First Use

1. Install the Bundle Run composer require azine/video.js-bundle:~4.7 to add the bundle to your project.

2. Register the Bundle Add new Azine\VideoJsBundle\AzineVideoJsBundle() to your AppKernel.php under registerBundles().

3. Install Assets Run php app/console assets:install web (or --symlink for development) to copy the CSS/JS files to your web/bundles/azinevideojs/ directory.

4. Include in a Twig Template Reference the assets in your layout or template:

   <link rel="stylesheet" href="{{ asset('bundles/azinevideojs/css/video-js.min.css') }}">
   <script src="{{ asset('bundles/azinevideojs/js/video.min.js') }}"></script>
   

5. Basic Video Player Usage Embed a video in Twig:

   <video
       id="my-video"
       class="video-js vjs-default-skin"
       controls
       preload="auto"
       width="640"
       height="264"
       data-setup='{}'>
       <source src="{{ asset('path/to/video.mp4') }}" type="video/mp4">
       <p class="vjs-no-js">
           To view this video please enable JavaScript, and consider upgrading to a
           web browser that supports HTML5 video
       </p>
   </video>
   

First Use Case: Embedding a Video

Use the bundle to replace Flash-based video players with an HTML5-compatible solution. Ideal for:

• Media-heavy applications (e.g., tutorials, galleries).
• Projects requiring cross-browser video support (Chrome, Firefox, Safari, Edge).
• Legacy Symfony2 apps needing modern video playback.

Implementation Patterns

Workflows

1. Asset Management

   • Use assets:install for production (copies files) or --symlink for development (symlinks for live updates).
   • Override default paths by configuring the bundle (see Extension Points).

2. Twig Integration

   • Extend the bundle’s Twig environment to add helpers (e.g., azine_video_js_path()) for dynamic asset paths.
   • Example:

     {% block video_js %}
         {{ parent() }}
         <script>
             videojs('my-video', {
                 controls: true,
                 autoplay: false,
                 width: 640
             });
         </script>
     {% endblock %}
     

3. Dynamic Video Sources

   • Fetch video sources from a database or API and render them dynamically:

     {% for video in videos %}
         <video
             id="video-{{ video.id }}"
             class="video-js"
             data-setup='{ "controls": true }'>
             {% for source in video.sources %}
                 <source src="{{ asset(source.path) }}" type="{{ source.type }}">
             {% endfor %}
         </video>
     {% endfor %}
     

4. Custom Skins/Themes

   • Replace the default skin by overriding the CSS:

     <link rel="stylesheet" href="{{ asset('bundles/azinevideojs/css/video-js.css') }}">
     <link rel="stylesheet" href="{{ asset('css/custom-video-skin.css') }}">
     

5. Event Handling

   • Attach JavaScript events in Twig or a separate JS file:

     // In a JS file
     document.addEventListener('DOMContentLoaded', function() {
         var player = videojs('my-video');
         player.on('play', function() { console.log('Playback started!'); });
     });
     

Integration Tips

• Symfony Forms: Use the bundle with Symfony\Bridge\Doctrine\Form\Type\EntityType to select videos from a database.
• API-Driven Apps: Fetch video metadata (e.g., duration, poster) via AJAX and update the player dynamically.
• Lazy Loading: Combine with loading="lazy" for better performance on long pages.
• Responsive Design: Use CSS to ensure the player scales with the viewport:

  .video-js {
      max-width: 100%;
  }
  

Gotchas and Tips

Pitfalls

1. Asset Paths in Development

   • If using --symlink, ensure your dev server (e.g., php -S localhost:8000) follows symlinks. Test with php app/console assets:install --symlink web and verify paths in Twig.

2. Version Mismatches

   • The bundle ships with video.js v4.7.2 (released in 2016). For newer features, manually override the JS/CSS files in web/bundles/azinevideojs/ or fork the bundle.
   • Check video.js releases for compatibility.

3. Twig Autoloading

   • If Twig fails to render asset() paths, clear the cache:

     php app/console cache:clear
     

4. Flash Fallback

   • The bundle includes a <p class="vjs-no-js"> fallback, but ensure your project’s base template has JavaScript enabled. Test with:

     php app/console debug:config --env=prod | grep javascript
     

5. CORS Issues

   • If loading videos from external sources (e.g., YouTube), ensure the server supports CORS or use a proxy.

Debugging

• Console Errors: Check the browser’s DevTools (F12) for 404s on asset paths. Common fixes:
  • Run assets:install again.
  • Verify web/bundles/azinevideojs/ exists and is readable.
• Player Not Initializing: Ensure:
  • video.min.js is loaded after the <video> element.
  • No JavaScript errors block execution (check console).
  • The data-setup attribute is present or videojs() is called manually.

Config Quirks

• No Configuration File: The bundle has no Resources/config/services.yml or config.yml, meaning it’s purely asset-based. Customization requires manual overrides.
• Skin Overrides: To replace the default skin, override the CSS file in web/bundles/azinevideojs/css/ or use a CDN link to a newer version.

Extension Points

1. Custom Asset Paths

   • Override the default asset paths by extending the bundle’s Resources/public/ directory in your project:

     src/Acine/VideoJsBundle/Resources/public/
         ├── css/video-js.css  # Override default CSS
         └── js/video.js       # Override default JS
     

   • Ensure your bundle’s Resources/public/ takes precedence in assets:install.

2. Twig Extensions

   • Add a custom Twig extension to generate player configurations:

     // src/Acine/VideoJsBundle/Twig/Extension/VideoJsExtension.php
     class VideoJsExtension extends \Twig_Extension
     {
         public function getFunctions()
         {
             return [
                 new \Twig_SimpleFunction('azine_video_js', [$this, 'renderPlayer']),
             ];
         }
     
         public function renderPlayer(array $config, string $id)
         {
             // Logic to generate Twig/HTML for the player
         }
     }
     

   • Register the extension in your bundle’s Resources/config/services.yml:

     services:
         acine.videojs.twig.extension:
             class: Acine\VideoJsBundle\Twig\Extension\VideoJsExtension
             tags:
                 - { name: twig.extension }
     

3. Event Listeners

   • Attach Symfony event listeners to modify player behavior:

     // src/Acine/VideoJsBundle/EventListener/VideoJsListener.php
     class VideoJsListener
     {
         public function onKernelRequest(GetResponseEvent $event)
         {
             // Example: Force autoplay for specific routes
             if ($event->getRequest()->attributes->get('_route') === 'media_play') {
                 // Inject JS via Symfony's Response or use a Twig block
             }
         }
     }
     

   • Register the listener in services.yml:

     services:
         acine.videojs.listener:
             class: Acine\VideoJsBundle\EventListener\VideoJsListener
             tags:
                 - { name: kernel.event_listener, event: kernel.request, method: onKernelRequest }
     

4. Plugin Integration

   • Use video.js plugins (e.g., HLS) by including them in your template:

     <script src="{{ asset('bundles/azinevideojs/js/plugins/videojs-http-streaming.min.js') }}"></script>
     <script>
         videojs('my-video', {
             plugins: { hls: true }
         });
     </script>
     

   • Note: You’ll need to manually include plugin files in `web/bundles/azinevideojs