Как подключить Videojs

Videojs — это бесплатный видео плеер, который можно установить на ваш сайт. Сам плеер очень прост в использовании и настройках. К плееру имеется множество плагинов, с помощью которых можно воспроизводить прямую трансляцию, отображать видео рекламу, запускать 3д, воспроизводить видео с youtube и многое другое.

See the Pen VideoJS by Aleksandrs (@CoolS2) on CodePen.0

С чего начать

Подключение скриптов

Т.к мы будем подключать видео рекламные теги, и запускать их на прямой трансляции, нам понадобятся следующие скрипты:

• jquery.min.js
• video.js
• videojs-contrib-hls.min.js
• ima3.js
• videojs-contrib-ads.min.js
• videojs.ima.min.js

Создание переменных

Создадим основные переменные, чтобы было удобно управлять всеми процессами

var url = 'https://58f14b372a413.streamlock.net:444/coastaloutdoorssunrisebeach/coastaloutdoorssunrisebeach.stream/chunklist_w1654376764.m3u8'; // Линк нашей трансляции
var ads = []; // Массив в который мы будем запихивать наши рекламные теги
var player; // для преера
var device = 'desktop';//mobile // Это важно для корректного отображения рекламы
var startTime = 10; // Время запуска рекламы в секундах
var intervalTime = 10; // Промежуток времени между рекламой
var muteTab = 'on';//off // Отключение звука, если человек находиться на другой вкладке и не смотрит видео
var companyName; // Чтобы в логах отображалась название рекламы

Также сразу запихнем в наш массив рекламный тег

ads.push({
            name : 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpremidpost&cmsid=496&vid=short_onecue&correlator=', // Сам рекламный тег
            company : 'Adsense', // название, пример: 'adsense'
            played : 0 // Если у нас несколько тегов, то это важно, чтобы он не повторялся
        });

Зададим настройки нашему videojs

player = videojs('my-video', {
            controls: true, // включить кнопки на плеере
            autoplay: true, // Автозапуск
            preload: 'auto', // Загрузка видео 
            loop: true, // Повтор видео
            sourceOrder: true,
            customControlsOnMobile: false, // Можно использовать свой шаблон кнопок
            nativeControlsForTouch: true, // Использовать родные мобильные кнопки
            hls: {
                withCredentials: true 
            },
            sources: [{
                        src: url,
                        type: 'application/x-mpegurl' 
                    }],
            techOrder: ["html5"]
          
        });
		

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

Настройки для рекламы

Создаем функцию, которая будет запускать после инициализации нашего плеера и назовем ее videoOptions

Для примера, создадим дополнительную кнопку на videojs , которая будет создавать скриншот с видео потока, который можно будет скачать

Кнопка для плеера

var myplay = $(".video-js");   // Наш плеер
    var VjsButton = videojs.getComponent('Button'); // Наша новая кнопка
    var MyNewButton = videojs.extend(VjsButton, {
        constructor: function() {
            VjsButton.call(this, player);
        },

        handleClick: function(){// Если на кнопку нажать то мы создадим скриншот
            var video_s = document.getElementById("my-video");
            var videowd = video_s.offsetWidth;
            var videohg = video_s.offsetHeight;
            var canvas = document.createElement('canvas');
            canvas.width = videowd;
            canvas.height = videohg;
            var video = myplay.find("video").get(0);
            video.setAttribute('crossOrigin', 'anonymous');
            var ctx = canvas.getContext('2d');
            ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            canvas.crossOrigin = "anonymous";
            var dataURI = canvas.toDataURL('image/jpeg');
            GenerateModal(dataURI);
        }
    });
    var buttonInstance = new MyNewButton();
    buttonInstance.addClass("vjs-icon-photo");
    buttonInstance.addClass("fa-camera");
    buttonInstance.addClass("fa");

    player.controlBar.addChild(buttonInstance);

function GenerateModal(dataURI) {
    var modal = $("
" +
        "
Download
" +
        "
");
    var img = $("");
    img.attr("src", dataURI);
    modal.find(".modal-body").prepend(img);
    modal.find(".download-screenshot").click(function () {
        this.href = dataURI;
        this.download = "screenshot.jpg";
    });
    $("body").append(modal);
    $('#snapitmodal').show();

}

Настройки для рекламы

 var options = {
        id: 'my-video', // id нашего плеера
        adTagUrl: nextAds(), // Загружаем рекламный тег с помощью функии nextAds()
        autoPlayAdBreaks: false, // Отключаем автозапуск рекламы
        //debug: true
    };
    player.ima(options); // загружаем настройки
      
        var currentTime = parseInt(startTime); // через какое время запускать рекламу, мы это указывали в нашу переменную startTime
        setTimeout(function(){
        		player.ima.playAdBreak();// Когда наступит нужное время, запускаем рекламу
            //player.ima.requestAds();
            if(device == 'mobile') {
                player.ima.initializeAdDisplayContainer(); // Если мобильный, для отображение рекламы заупускаем эту функцию
            }
      },currentTime+'000');


function nextAds() { // Если у нас несколько рекламных компаний, то эта функция поочередно будет их запускать по кругу.
    var ads_length = ads.length;
    var count = 0;
    var name;
    ads.some(function(item) {
        count++;
        name = item.name;
        companyName = item.company;
        if(item.played == 0){ // if ads not played yet, return name
            item.played = 1;
            return true;
        }
        if(count == ads_length){
            ads.some(function(item) {// start again if all ads played
                item.played = 0;
                count = 0;
            });
        }
    });
    return name;
}

Осталось отслеживать ошибки и эвенты рекламы, чтобы мы могли ее перезапускать при необходимости

player.on('adserror', (function(err) { // Если произошла ошибка
      //$('pre').append('
'+err);
      $('pre').append('
ERROR, adname: ' + companyName); // добавим в лог
        
        if(device == 'mobile'){
            var restTime = intervalTime; //На телефонах лучше запускать реже рекламу
        }else{
            var restTime = 5;если ошибка, запускаем через 5 секунд
        }
        reloadAds(restTime); //функция перезапуска
        player.play();
    }));

function  reloadAds(time) { //Перезапуск рекламы с новым тегом
    var currentTime = parseInt(time);
    $('pre').append("
Load next ADS after " + currentTime + 'sec'); // Для лога
    player.ima.controller.settings.adTagUrl = nextAds(); // Ищем новый тег
    //player.ima.settings.adTagUrl = nextAds(); // Так было на предыдущей версии ima
  
    setTimeout(function(){ // Это мы уже видели
        $('pre').append('
Loading new ads: ' + companyName);
        player.ima.playAdBreak();
      //player.ima.requestAds();
    }, currentTime+'000');
}

Отслеживать процесс рекламы

Важно понимать, закончилась реклама или ее скипнули, для того чтобы определить, через какое время ее запускать снова. Если реклама не запустилась, произошла ошибка, то есть смысл запустить сражу же другой рекламный тег через 5 секунд. Если же реклама прошла успешно, то запускаем новую только через несколько минут.

player.ima.addEventListener(google.ima.AdEvent.Type.STARTED, function(ad) // Реклама успешно запустилась
player.ima.addEventListener(google.ima.AdEvent.Type.COMPLETE, function(ad) // Успешно закончилась
player.ima.addEventListener(google.ima.AdEvent.Type.SKIPPED, function(ad) // скипнули
player.ima.addEventListener(google.ima.AdEvent.Type.CLICK, function(ad) // Кликнули по рекламе

И в зависимости от события, запускаем ту или иную функцию, которые мы расмотрели выше

Отключить звук, если человек в другой вкладке

if(muteTab == 'on'){
                $(window).on("blur focus", function(e) {
                    var prevType = $(this).data("prevType");

                    if (prevType != e.type) {   
                        switch (e.type) {
                            case "blur":
                                if($('#my-video_ima-mute-div').hasClass('ima-non-muted')){
                                    $('#my-video_ima-mute-div').trigger('click');
                                }
                                break;
                            case "focus":
                                if($('#my-video_ima-mute-div').hasClass('ima-muted')){
                                    $('#my-video_ima-mute-div').trigger('click');
                                }
                                break;
                        }
                    }

                    $(this).data("prevType", e.type);
                })
            }

Есть и другие полезные плагины для videojs, которые могут понадобться. К примеру можно запускать ролики с ютуба с помощью плагина videojs youtube и запускать поверх свою рекламу таким же способом, как я описал выше. Самый большой плюс этого плеера, в том что он бесплатный, когда другие плееры за те же функции берут не малые деньги

Надеюсь статья была полезной!