Video

Displays a simple video player.

Video 

<!-- video.blade.php -->
    <video class="c-video" width="600" height="300" controls   data-uid="673ed17e5f8a8">

                                    <source class="c-video__source" src="https://storage.googleapis.com/coverr-main/mp4/Self-Serve-in-Arizona.mp4" type="video/mp4">
                            
                        <br />
<b>Warning</b>:  The parameter <b>"isWarning"</b> is not recognized in the component <b>"notice"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>231</b><br />
<!-- notice.blade.php -->
<div class="c-notice c-notice--info" id="673ed17e5f93c" data-uid="673ed17e5f948" aria-labelledby="notice__text__673ed17e5f93c">
    
    <!-- notice__ico -->
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__673ed17e5f93c" for="" class="c-notice__message">
                    
                This component is not supported by your browser.
    </span>

</div>                    
    </video>
@video([
    'formats' => [
        ['src' => "https://storage.googleapis.com/coverr-main/mp4/Self-Serve-in-Arizona.mp4", 'type' => "mp4"],
    ]
])
@endvideo

Blade component parameters

Key Default value Type Available values Description
hasControls true boolean - Adds UI controls for play and pause
isMuted false boolean - If there should be audio enabled
shouldAutoplay false boolean - If the video should start automatically (requires isMuted)
errorMessage This component is not supported by your browser. string - A message to display when video is not supported.
formats [] array - Array of formats
height 300 integer - Initial height of video
width 600 integer - Initial width of video
subtitles false boolean - Array of subtitles for video
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Component/Video/video.json