Videojs Demo

527 14 August 2020

No Description Available

Abhishek Singh

~ onex

Videojs is the most popular widely used open-source HTML5 video player that supports modern streaming formats as well as Youtube, Vimeo, and even flash files through the plugin.

Related Elements

Video Player js - plyr

onex

MediaElementJs is an open-source Html5 video player that can supports Video, Audio, Streaming, and multiple social media video playback.

mediaElementJs Demo

onex

<div class="player">
<div class="container">
        <div class="row">
            <div class="col-md-8 mx-auto">
                <div class="main">
                    <h4 class="mb-5">Forest Player</h4>
                 <video
                    id="main-player"
                    class="video-js vjs-theme-forest vjs-16-9"
                    controls
                    preload="auto"
                    poster="//vjs.zencdn.net/v/oceans.png"
                    data-setup='{}'>
                  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
                  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
                  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
                  <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a
                    web browser that
                  </p>
                </video>
                </div>
            </div>
        </div>
    </div>
</div>
    <div class="player">
    <div class="container">
                <h2>Themes</h2>
        <div class="row">
            
            
            <div class="col-md-4 mini">
                <h4>City Theme</h4>
                 <video
                    id="my-player"
                    class="video-js vjs-theme-city vjs-16-9"
                    controls
                    preload="auto"
                    poster="//cdn.pixabay.com/photo/2016/12/17/14/33/wave-1913559_960_720.jpg"
                    width="400"
                    data-setup='{}'>
                  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
                  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
                  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
                  <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a
                    web browser that
                  </p>
                </video>
            </div>
            
            <div class="col-md-4 mini">
                <h4>Fantasy Theme</h4>
                 <video
                    id="my-player"
                    class="video-js vjs-theme-fantasy vjs-16-9"
                    controls
                    preload="auto"
                    poster="//cdn.pixabay.com/photo/2016/12/17/14/33/wave-1913559_960_720.jpg"
                    width="400"
                    data-setup='{}'>
                  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
                  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
                  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
                  <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a
                    web browser that
                  </p>
                </video>
            </div>
            <div class="col-md-4 mini">
                <h4>Sea Theme</h4>
                 <video
                    id="my-player"
                    class="video-js vjs-theme-sea vjs-16-9"
                    controls
                    preload="auto"
                    poster="//cdn.pixabay.com/photo/2016/12/17/14/33/wave-1913559_960_720.jpg"
                    width="400px"
                    data-setup='{}'>
                  <source src="//vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
                  <source src="//vjs.zencdn.net/v/oceans.webm" type="video/webm">
                  <source src="//vjs.zencdn.net/v/oceans.ogv" type="video/ogg">
                  <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a
                    web browser that
                  </p>
                </video>
            </div>
        </div>
        
    </div>
</div>

Get HTML

Get CSS

Get JS

Videojs Demo

Abhishek Singh

Related Elements

Video Player js - plyr

mediaElementJs Demo

Resourse

Log in