How to add synced captions for video 360

[amoldahe]

is there any inbuilt function like

vid.ontimeupdate = function() { console.log(vid.currentTime); };

so we can add synced captions functionality

[amoldahe]

1. Firstly edit DataImage object and add these images in the panolens.js for CC toggle functionality.

   const DataImage = { ClosedCaptionOn: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAABABAMAAAD8LdQ+AAAAMFBMVEUAAAD///////////////////////////////////////////////////////////87TQQwAAAAD3RSTlMAzBGIIu6Z3WZVM0S7qnfZZ/wdAAABKElEQVRIx+3VPU4CQRiH8ScEP0BNjNqznaWFB4DG2sbGSs/gBYwnYBMvYGKs3WPYcQSPoGtctJCgMgtT/N8dAhRAMlNNfslDhp2dWYazjveYxCQmcyenHXhsq1QmgwwA7lQqkq+McnRV7OSA8WjeqlhJDjT+Vn0InKlYyQ00W/+TS9hWsZIHeHKzFHoqmvShVi74AroqmnzApq9PVDS5hvNyWsCWiiYp+E22RJMErtxMxU5yqHsXsZIB7HgXsZI+fre8rEBS8V8WfmK6L5MzkbGrEt79hA2V4DuWw7OKJp/+vf2GN5XgedmHlkroVBYdGioVZ78++qkjOFaxkjxx98kL8Koy5R7bs0WTIsUNtxoVTYY/GQC1tkrg5k/gvqey9E9STGKypskv/J0ByHAvfoIAAAAASUVORK5CYII=', ClosedCaptionOff: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMAAABACAMAAAA53Tk/AAAAb1BMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8v0wLRAAAAJHRSTlMAzRGHZu4hmkTzVTPduwoEqhfk+NXEeSvopTm2c11OJWsvspMeCi4AAAACgUlEQVRYw+2Y2bKbMAyGbYwNZocAOWTf3v8Z29SLytgZA6e66LT/TQbmZ77IRpIReeHrP2MrQ/YSLpAYNB8lMkPGpI0HXMZEfko0EpHx1ZK32vOAx6AVUbo3HC2OKYuIDqVHYGgK05A6TTqsHNwNcaUpZ4qW53IURCllEquWyCHTkGjsJFa96k9XBanuT4lWE4fUhHKiaHW3Z3sCyhl7fRJjAjwra/tRQaxiX0BN6nhWMArzNChe5QkzaERc5cVyT5hBidLeJKT6EdzjyZi6ZOBZwigi9Z+onC4zSuzx2Ds8A0+YkavH+buCnVrym0qPB5SBJ8RIVGqolZVlVgMj9nhAXIAnwFCrkNhifLtaRuT3zMiRh+EPQ8CNXQkv6eDxgDh5qwgw7KrOspbehK5gh8bxBEU+LRWf95XjgSi1IwXPVgb1L0PPdCh1/gDPRkajGpRrnUwo+9sTPJsYyafCs+tZayjg+TMMkEwOOu0RGFbdqQowNu8HiCepoWzfj+A7U8RmV6pJfi8/3D6Q6oLHj7bbs87rWZ3nwLZp158rHcml8XnW1Ct3DXO9KzeidX12Hk+47gpvTY3fN0dzZbtKfSgdz5r+4b4KFDxWV9Y7nuV90Gk/2cxjlZY7x7OwnwsKUQgbGnhA97EDz9JzSTQ7c5Sxumx8Hu1MwPOd81Wz0BNmwEFmLkHXe4DhFzRxldJhD0nl+nkJY5HeljLgUYqyh8SayfCH7fZJhzb3oVlrKtgRgWFa5NXkyvSFwNAHvbP9th8QGJqS7GtF2bMCbQ5HTxpSXyjarE/aT9UMgWEgVJetI+bMsmN5TciIPBelF5JzLAaEMuDPd3evf2BO/Ut/JeMHJNjc6cRZUvMAAAAASUVORK5CYII=' };

2. Array for CC sync will look like this which will be in your html file

var syncData = [ {time:"0.1", transcript:"Lorem Ipsum is simply dummy text of the printing and typesetting industry."},

{time:"5.58", transcript:"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,"},

{time:"10.24", transcript:"when an unknown printer took a galley of type and scrambled it to make a type specimen book."},

{time:"15.75", transcript:"It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged."},

{time:"20.53", transcript:"It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,"},

{time:"30.0", transcript:"and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."}

];

3. Add below element to your html file to display CC text in it

4. CSS for above element

.closedcaptiontext { position: fixed; background: rgb(0 0 0 / 0.8); bottom: 48px; padding: 5px 0px; color: #ffffff; font-size: 16px; text-align: center; width: 100%; font-family: monospace; display: none; } `

5. Create closed caption function to create a button in footer bar just like settings, full screen etc in panolens.js.

/**

• Create closed caption button to toggle closed captions
• @memberOf Widget

• @instance */ createClosedCaptionButton: function () {

  let scope = this, item;

  function onTap ( event ) {

  event.preventDefault();
  event.stopPropagation();
  
  item.style.backgroundImage = (  this.activated )
  ? 'url("' + DataImage.ClosedCaptionOff + '")' 
  : 'url("' + DataImage.ClosedCaptionOn + '")';
  
  if ( this.activated ) {
  
      this.deactivate();
  
  } else {
  
      this.activate(); 
  
  }

  }

  item = this.createCustomItem( {

  style: { 
  
      backgroundImage: 'url("' + DataImage.ClosedCaptionOff + '")',
      webkitTransition: this.DEFAULT_TRANSITION,
      transition: this.DEFAULT_TRANSITION
  
  },
  
  onTap: onTap

  } );

  item.activate = function () { // alert("activate"); document.getElementById("closedcaptiontext").style.display = "block"; item.activated = true; };

  item.deactivate = function () { // alert("deactivate"); document.getElementById("closedcaptiontext").style.display = "none"; item.activated = false; };

  return item;

},

6. In addControlButton function add below code in switch case to add button to UI

case 'closedcaption':

element = this.createClosedCaptionButton();
this.closedCaptionElement = element;

break;  

7. Update video timeupdate function for syncing the text with video time.

video.addEventListener( 'timeupdate', function () {

this.videoProgress = video.duration >= 0 ? video.currentTime / video.duration : 0;

/**
    * Viewer handler event
    * @type {object}
    * @property {string} method - 'onVideoUpdate'
    * @property {number} data - The percentage of video progress. Range from 0.0 to 1.0
    */
this.dispatchEvent( { type: 'panolens-viewer-handler', method: 'onVideoUpdate', data: this.videoProgress } );

if(syncData != undefined) {

    syncData.forEach(function(element, index, array) { 

        let CCStartTime = element.time;
        let CCEndTime;

        if(syncData[index + 1] == undefined) {  
            CCEndTime = video.duration;
        } else {
            CCEndTime = syncData[index + 1].time; 
        }

        if( video.currentTime >= CCStartTime && video.currentTime <= CCEndTime ) {
            if(currClosedCaptionText != syncData[index].transcript) { 

                console.log(video.currentTime);

                currClosedCaptionText = syncData[index].transcript;
                console.log(syncData[index].transcript);

                document.getElementById("closedcaptiontext").innerText = syncData[index].transcript;

            }
        }
    });
}

}.bind( this ) );

[amoldahe]

3. Add below element to your html file to display CC text in it

element div with id="closedcaptiontext" class="closedcaptiontext

[amoldahe]

@pchen66 can you please look into this and if possible add this code in your library its working fine and tested properly.