S3Bubble

Full Audio Player Example

Example: OPEN PLAYGROUND

s3bubble("s3bubble-media").audio({
    "codes": ["DMAp42282"],
    "options": {
        "playbackRates": [0.5, 1, 1.5, 2],
        "aspect": "16-9" // 16-9 1-1 4-3 aspect ratio's
        //"fluid": true, // Fullscreen fluid
        //"width": 600, // Sets width (cannot be used with aspect)
        //"height": 600, // Sets height (cannot be used with aspect)
        //"prepare": true, // Prepare a container before load
        //"muted" : true, // Mutes video
        //"autoplay" : true, // Autoplays
        //"controls": false, // Removes controls
        //"chromecast" : "E14DC85B",
        //"vpaid" : "(vpaid url)"
    },
    "meta": {
        "skipButtons": false, // Show skip buttons
        "showSocial": true, // Show social
        "backButton": true, // Show back button
        "subTitle": "You're watching", // subtitle
        "title": "Codepen Tests", // title
        "para": "Just running some tests..." // Synopsis
    },
    "brand": {
        "controlbar": "#1C2024", // Controlbar background
        "icons": "#FAFAFA", // Icon color
        "sliders": "#FF003A" // Slider color
    }
    //"popit": { // Pop the play out to the bottom right when out of scroll
    //              "width" : 400
    //          },
});

Firing Player Ended Event

Example: OPEN EXAMPLE PLAYGROUND

s3bubble("s3bubble-media").video({
  "codes": ["qPtj41773"],
  "source":{
    "poster": "https://j.gifs.com/2RMZAN.gif"
  },
  "meta": {
    "skipButtons": false, // Show skip buttons
    "showSocial": true, // Show social
    "backButton": true, // Show back button
    'subTitle': "You're watching", // subtitle
    "title": "Using a gif for poster", // title
    "para": "Simply upload you gif through the admin database or add directly like this..." // Synopsis
  }
},
  function(player) {
    player.on("ended", function() {
      alert("do something");
    });
  }
);

Gifs Poster Images

Example: OPEN EXAMPLE PLAYGROUND

s3bubble("s3bubble-media").video({
  "codes": ["qPtj41773"],
  "source":{
    "poster": "https://j.gifs.com/2RMZAN.gif"
  },
  "meta": {
    "skipButtons": false, // Show skip buttons
    "showSocial": true, // Show social
    "backButton": true, // Show back button
    'subTitle': "You're watching", // subtitle
    "title": "Using a gif for poster", // title
    "para": "Simply upload you gif through the admin database or add directly like this..." // Synopsis
  }
});

Video Modal Popup Example

Example: OPEN PLAYGROUND

s3bubble("s3bubble-media").modal({
	"codes": "qPtj41773",
	"options": {
		"muted": true,
		"autoplay": true,
		//"controls": false,
	},
	"modal": {
		"delay": 5000,
		"link": "https://s3bubble.com/documentation/",
		//"title": "Welcome",
		"width": 800,
		"showCancelButton": false,
		"showConfirmButton": false
	}
}, function(player) {

});

Multiple Language Captions

WebVTT files need to be uploaded via the S3Bubble dashboard to add captions below is an explainer video that will guide you through the process.

Video VPaid Example

s3bubble("s3bubble-media").video({
	"codes": ["qPtj41773"],
	"options": {
		"vpaid": "https://googleads.g.doubleclick.net/pagead/ads?ad_type=video&client=ca-video-pub-4968145218643279&videoad_start_delay=0&description_url=http%3A%2F%2Fwww.google.com&max_ad_duration=40000&adtest=on"
	}
});

Video Timed Preview Example

Example: OPEN PLAYGROUND

s3bubble("s3bubble-media").video({
	"codes": ["qPtj41773"],
	"preview": {
		"previewSeconds": 2,
		"previewLink": "",
		"previewTitle": "This is a preview please sign up",
		"previewDescription": "Former CIA Director John Brennan testified before a House intelligence panel that he called the head of Russia's federal intelligence service to warn about Russian interference in the presidential election. He revealed how he called the head of Russia's FSB intelligence service in August. He warned that American voters would be 'outraged' if Russia interfered in the U.S. elections. The information got passed on to Russian president Vladimir Putin."
	}
});

Video Popout Example

Example: OPEN PLAYGROUND

s3bubble("s3bubble-media").video({
	"codes": ["qPtj41773"],
	"options": {
		"prepare": true // !important this needs to be set
	},
	"popit": {
		// Pop the play out to the bottom right when out of scroll
		//"width" : 200
	}
});

Force Highest Quality

Example: OPEN PLAYGROUND

s3bubble("s3bubble-media").video({
	"codes": ["QGQT38553"],
	"options": {
		"forceQuality": true, // this will try to force play the highest quality
	}
});