Skip to main content

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/

Comments

Popular posts from this blog

Double Bunk in Caravan

With our family expanding, we faced a challenge of adding another berth in our caravan, but I did not want to make it permanent.
A couple of options are available, of which one is simply to add a bunk to the single berth. We however did not want to cause any permanent markings on the interior of the caravan .

Netdata + SNMP + Mikrotik

Always wanted to see my Internet line usage as a gauge without having to log into the router.
So today I configured SNMP in Netdata to collect from my Mikrotik router.
/etc/netdata/node.d/snmp.conf:
{
"enable_autodetect": false,
"update_every": 5,
"max_request_size": 100,
"servers": [
{
"hostname": "10.1.1.1",
"community": "public",
"update_every": 5,
"max_request_size": 50,
"options": { "timeout": 20 },
"charts": {
"mikrotik1.cpu": {
"title": "CPU ",
"units": "percentage",
"type": "line",
"family": "cpu",
"dimensions": {
"used": {
&qu…

CasparCG Simple Playlist

It is possible to build a simple playlist as a rundown in the CasparCG client. It will very simply play each item after each other that are on the same layer. In this very simple post I show how to build such a playlist including the very important step of activating the OSC.

The Open Sound Control (OSC) implementation is how the client knows what the server is doing and then being able to send new command back to the server when a piece of media has ended to trigger playback of the next piece. For more details on the OCS, please see http://casparcg.com/wiki/CasparCG_OSC_Protocol