ttm

const manifestString = [
    '#EXTM3U',
    '#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=586889,RESOLUTION=640x480',
    'https://example.com/mvsz1vqpyxdh52eogfucnxape5pjnj7b/video/video.mp4/640x480.m3u8',
    '#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=2171914,RESOLUTION=1280x720',
    'https://example.com/mvsz1vqpyxdh52eogfucnxape5pjnj7b/video/video.mp4/1280x720.m3u8',
    '#EXT-X-STREAM-INF:PROGRAM-ID=1,BANDWIDTH=3192876,RESOLUTION=1920x1080',
    'https://example.com/mvsz1vqpyxdh52eogfucnxape5pjnj7b/video/video.mp4/1920x1080.m3u8'
].join('\n');
const url = 'data:application/x-mpegURL;base64,' + btoa(manifestString);
const type = 'application/x-mpegURL'';

Решение, кому интересно

// promise.js
_Promise = require('babel-runtime/core-js/promise').default;

// gulpfile.js
const gulp = require('gulp');
const concat = require('gulp-concat');
const header = require('gulp-header');
const webpack = require('webpack-stream');

gulp.task('build-promise' ,() =>{
    return gulp.src('promise.js')
        .pipe(webpack())
        .pipe(header(`
            let _Promise;
        `))
        // ....
        .pipe(concat('promise.js'))
        .pipe(gulp.dest('dist'));
})

Дальше можно творить с этим js что угодно, можно обернуть например
Есть решение лучше? - Пишите ;)

На скролл страницы, смотрят на позицию нужных блоков, кода блок попадает во вью порт, его показывают, есть модификации с таймерами, то есть, блок показывается спустя 250 мс, для того, что бы если страницу очень быстро прокрутили очистить таймер и не нагружать эту страницу лишней анимацией

Пример: codepen.io/anon/pen/KzcvG?editors=101