< See all demos

Audio API

Enable users to stream video as they scroll on the page

Demo Source Code

This demo showcases how to focus on single video player to play audio and/or video while user is scrolling through multiple video players set up on a single page.



setup.js js

var conf = {
    key: '<YOUR PLAYER KEY>'
};

var source1 = {
    hls: 'https://cdn.bitmovin.com/content/assets/blender-4k/38e843e0-1998-11e9-8a92-c734cd79b4dc/manifest.m3u8'
};

var source2 = {
    hls: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
    poster: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/poster.jpg'
};

var playerContainer1 = document.getElementById('player-container-1');
var player1 = new bitmovin.player.Player(playerContainer1, conf);

var playerContainer2 = document.getElementById('player-container-2');
var player2 = new bitmovin.player.Player(playerContainer2, conf);

player1.load(source1);
player2.load(source2)
scrollListener.js js
function adjustPlayer() {
    var p1Container = $('#player-container-1');
    var p2Container = $('#player-container-2');

    // extract constants for better readabilty
    var p1LowerEdge = p1Container.offset().top + p1Container.height();
    var p1SwitchToMinPlayerPos = p1LowerEdge - (window.innerHeight / 3) - 100;
    var p1SwitchToMaxPlayerPos = p1Container.offset().top - 400;

    var p2LowerEdge = p2Container.offset().top + p2Container.height();
    var p2SwitchToMinPlayerPos = p2LowerEdge - (window.innerHeight / 3) - 100;
    var p2SwitchToMaxPlayerPos = p2Container.offset().top - 400;

    var currentScrollPos = document.body.scrollTop || document.documentElement.scrollTop;

    p1Timeout = setTimeout(function () {
        if (currentScrollPos <= p1SwitchToMinPlayerPos && currentScrollPos >= p1SwitchToMaxPlayerPos) {
            clearTimeout(p1Timeout);
            p1Timeout = undefined;
            player1.unmute();
        } else {
            clearTimeout(p1Timeout);
            p1Timeout = undefined;
            player1.mute();
        };
    }, 300);

    p2Timeout = setTimeout(function () {
        if (currentScrollPos <= p2SwitchToMinPlayerPos && currentScrollPos >= p2SwitchToMaxPlayerPos) {
            clearTimeout(p2Timeout);
            p2Timeout = undefined;
            player2.unmute();
        } else {
            clearTimeout(p2Timeout);
            p2Timeout = undefined;
            player2.mute();
        };
    }, 300);
};

// listen to scrolling events
window.onscroll = adjustPlayer;

Ready to get started?

Access your free account today by signing up for a trial

Start your trial