вставить рекламу в видео HTML5

Question

Как вставить рекламу в тег HTML5 перед воспроизведением основного видео? Есть ли инструменты с открытым исходным кодом, чтобы сделать это проще? Есть ли какая-либо ссылка, которая может направить меня туда?

Работает с этим кодом:

<script type="text/javascript">
   // listener function changes src
   function myNewSrc() {
      var myVideo = document.getElementsByTagName('video')[0];
      myVideo.src="../main.webm";
      myVideo.load();
      myVideo.play();
    }

   // function adds listener function to ended event -->

    function myAddListener(){
     var myVideo = document.getElementsByTagName('video')[0];
     myVideo.addEventListener('ended',myNewSrc,false);
    }
</script>

но я не могу, когда он играет второй. Это показывает плакат. Как мне избавиться от плаката?

Answer 1

Это быстрое начало решения, которое должно, по крайней мере, указать вам правильное направление.Это дает вам синглтон с методом init, который при вызове устанавливает предварительный просмотр для конкретного видеоэлемента.

var adManager = function () {
    var vid = document.getElementById("myVid"),
        adSrc = "videos/epic_rap_battles_of_history_16_adolf_hitler_vs_darth_vader_2_1280x720.mp4",
        src;

    var adEnded = function () {
        vid.removeEventListener("ended", adEnded, false);
        vid.src = src;
        vid.load();
        vid.play();
    };

    return {
        init: function () {
            src = vid.src;
            vid.src = adSrc;
            vid.load();
            vid.addEventListener("ended", adEnded, false);
        }
    };
}();

Однако есть ряд вещей, которые здесь не рассматриваются.Например, если вы устанавливаете метод init для вызова при начале воспроизведения видео, вам необходимо сохранить флаг, указывающий, воспроизводится ли реклама, чтобы обработчик воспроизведения ничего не делал при переходе собъявление к контенту (которое требует события play после вызова load (), чтобы получить плавное воспроизведение).

Мы используем нечто подобное в нашем проекте воспроизведения видео и большей части видеообъявления.сервисы там делают что-то подобное для воспроизведения видео на основе HTML (в отличие от воспроизведения видео Flash).

Это относительно просто, но вы просто должны следить за тем, когда должны выполняться обратные вызовы событий и когдадобавить и удалить эти обратные вызовы.

Еще одна вещь, которую следует учитывать, - это ненадежность «завершенного» события.Я еще не выяснил, когда и на каких платформах он постоянно срабатывает, но это довольно известная проблема.Возможное решение - вместо этого использовать timeupdate и проверить, является ли свойство currentTime примерно на секунду меньше, чем свойство duration, чтобы вы знали, что находитесь прямо в конце видео.

Answer 2

Извините, я не могу проверить этот код сейчас, но теоретически это должно работать.

<script>
// you will want to do checking here to see if the browser supports the video element
document.getElementById('video').addEventListener('ended', function()
{
    // the ad finished playing so update the src attribute to the real video
    document.getElementById('video').src = 'mainvideo.webm';
});
</script>

<video id="video" src="ad.webm">
</video>

Answer 3

@ natlee75 Для меня это не сработало Я изменил это на это:

$( document ).ready(function() {
var adManager = function () {
    var vid = document.getElementById("vid1564730217"),
        adSrc = "http://www.sample-videos.com/video/mp4/240/big_buck_bunny_240p_1mb.mp4",
        src;

    var adEnded = function () {
        vid.removeEventListener("ended", adEnded, false);
        vid.src = src;
        vid.load();
        vid.play();
    };
    return {
        init: function () {
            src = vid.src;
            vid.src = adSrc;
            vid.load();
            vid.addEventListener("ended", adEnded, false);
			
        }
    };
}().init();		
		});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<video id="vid1564730217" src="http://techslides.com/demos/sample-videos/small.mp4" width="100%" style="max-height:600px;" poster="http://orperry.com/sample/wp-content/uploads/2015/12/sample-logo.png" controls>
	<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Answer 4

Вы можете посмотреть, что может сделать Popcorn.js.Он позволяет вам взаимодействовать с Html5 видео и оверлейным текстом и множеством других интересных вещей:

http://popcornjs.org/documentation