Close
Menu

Enable users to stream video as they scroll on the page

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.


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

var source1 = {
    hls: 'https://cdn.bitmovin.com/content/demos/4k/38e843e0-1998-11e9-8a92-c734cd79b4dc/manifest.m3u8',
    poster: 'https://bitmovin-a.akamaihd.net/content/sintel/poster.png'
};

var source2 = {
    hls: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8',
    poster: 'https://bitmovin-a.akamaihd.net/content/MI201109210084_1/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)
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;

Create an account to get started!

No credit card required.