Add Video.js to Blogger Site


Wanted to host some live streaming on our Blogger website, and needed to record the setting somewhere, so here we go.

Edit the Blogger Theme XML file and add into just before the
tag the Video.JS files:

 <script src='https://www.unpkg.com/video.js/dist/video.min.js' type='text/javascript'/>  
 <script src='https://www.unpkg.com/@videojs/http-streaming' type='text/javascript'/>  
 <script src='https://www.unpkg.com/videojs-airplay' type='text/javascript'/>  
 <script src='https://www.unpkg.com/videojs-chromecast-extended' type='text/javascript'/>

The CSS code is a little bit more difficult, it looks like the Blogger servers do not allow inclusion of external CSS anymore, or rather not external CSS anymore.

For this, open the CSS link https://www.unpkg.com/video.js/dist/video-js.min.css and copy the code into the XML template somewhere at the other CSS code in the file.

And then in the Blog Post or Page, drop your call to Video.js

 <div class="wrapper">  
     <div class="videocontent">  
       <video id="player" class="video-js vjs-default-skin vjs-16-9 vjs-big-play-centered" width="640" controls autoplay data-setup='{"fluid": true}'>  
         <source src="playlist.m3u8" type="application/x-mpegURL" />  
       </video>  
     </div>  
 </div>  
 <script>  
   var player = videojs('#player');  
   player.play();  
 </script>

And just for info, code snippets created at http://codeformatter.blogspot.com/

Popular Posts