Hướng dẫn cách chèn Quảng cáo vào Trình phát Video HTML5 trên website

Insert Ads on HTML5 Video

Bạn làm một website chuyên về video, phim. Bạn muốn kiếm thêm thu nhập từ những video của mình. Vậy bạn hãy thử các cách chèn quảng cáo vào video của Iris Tips ở bài viết bên dưới nhé.

Ở bài viết này Iris Tips sẽ chia sẻ cho các bạn 2 dạng chèn quảng cáo là chèn video quảng cáo trước video chính (khi nhấn nút play) và chèn banner quảng cáo tùy chỉnh trong khi video đang phát.

Cách thực hiện

Dạng 1: Chèn video quảng cáo vào trước video

Dạng này bạn sẽ chèn video quảng cáo vào trước video, tức là khi nhấn nút play sẽ chạy video quảng cáo bạn chèn trước rồi mới chạy video chính.

1Vào mục đăng bài viết mới trên Blogger >> chuyển qua tab HTML >> lần lượt dán đoạn HTML và Javascript bên dưới vào

<video autoplay="autoplay" id="vid123456" src="https://sites.google.com/site/iristipsblogger/file/Marvel%20Studios%20Avengers-%20Infinity%20War%20Official%20Trailer.mp4" width="100%" style="max-height:720px;" poster="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNVoJSI7Wlxa6dZXTnn_DrPDwAhenU9Bwsf0DS6l6wvG7kvksAY0Kssg2miJL10_Zu7C237-BADixnol-uBFNBTO8-E6AibbHJk9NPieSPgLOqjE2JgFniYsHeebjSQGxIS-Ci5uItorzK/s1600/iris-tips-logo-image.png" controls>
<source src="https://sites.google.com/site/iristipsblogger/file/Marvel%20Studios%20Avengers-%20Infinity%20War%20Official%20Trailer.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

Với:
vid123456 là ID của video

https://sites.google.com/site/iristipsblogger/...Trailer.mp4 là đường link đoạn video

https://1.bp.blogspot.com/...iris-tips-logo-image.png là hình nền poster (thumbnail) của video.

<script type='text/javascript'>
$( document ).ready(function() {
var adManager = function () {
    var vid = document.getElementById("vid123456"),
        adSrc = "https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_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>

Với:

vid123456 là ID của video và phải trùng với ID video trong đoạn HTML bên trên.

https://www.sample-videos...big_buck_bunny_720p_1mb.mp4 là đường link đoạn video quảng cáo.

2Thêm thư viện jQuery này vào trước thẻ </head> nếu như website của bạn chưa có

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>

• DEMO

Dạng 2: Chèn banner quảng cáo trong khi phát video

Dạng này bạn sẽ chèn banner quảng cáo trong khi đang phát video có kèm nút đóng, tức là trong khi phát vài giây sẽ hiển thị một banner ở cạnh dưới video và sau đó sẽ tự đóng lại. Bạn có thể tự do điều chỉnh banner sẽ hiện ở giây thứ mấy và tắt ở giây thứ mấy.

1Vào Chủ đề >> Chỉnh sửa HTML và dán đoạn CSS sau đây vào trước thẻ ]]></b:skin>

#ad_area{position:relative;float:left;z-index:99}
#my_ad{position:absolute;width:680px;height:75px;bottom:30px;font-family:Arial;font-size:120%;background-color:rgba(255,0,0,0.2);z-index:100;color:#ff0000}
#close a{position:absolute;top:0px;left:650px;z-index:100;font-family:Arial;text-decoration:none;color:#fff}

2Tiếp theo bạn vào mục đăng bài viết mới trên Blogger >> chuyển qua tab HTML >> lần lượt dán đoạn HTML và Javascript bên dưới vào

<span id="seek_status"></span>  
<div id="ad_area">
<div id="my_ad">
<!-- Đặt quảng cáo tại đây -->


    
<div id='close' onclick='this.parentNode.parentNode.removeChild(this.parentNode); return false;'><a href="#">[x]</a></div>
</div>
<div>
  
<video id="myvideo" src="https://sites.google.com/site/iristipsblogger/file/Marvel%20Studios%20Avengers-%20Infinity%20War%20Official%20Trailer.mp4"  width="100%" style="max-height:720px;" poster="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNVoJSI7Wlxa6dZXTnn_DrPDwAhenU9Bwsf0DS6l6wvG7kvksAY0Kssg2miJL10_Zu7C237-BADixnol-uBFNBTO8-E6AibbHJk9NPieSPgLOqjE2JgFniYsHeebjSQGxIS-Ci5uItorzK/s1600/iris-tips-logo-image.png" controls>
<source src="https://sites.google.com/site/iristipsblogger/file/Marvel%20Studios%20Avengers-%20Infinity%20War%20Official%20Trailer.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>   
</div>
</div>

Với:
https://sites.google.com/site/iristipsblogger/...Trailer.mp4 là đường link đoạn video.

<script type='text/javascript'>
var v=document.getElementById("myvideo");
function show_adv() {    document.getElementById("my_ad").style.visibility="visible";
}
function hide_adv() {    document.getElementById("my_ad").style.visibility="hidden";
}
function catch_the_frame() {
    var t;
    t = Math.round(v.currentTime); 
    document.getElementById("seek_status") 
    if ( t >= 8 && t <= 30) {
        show_adv(); 
    }else {
        hide_adv(); 
    }    
}
hide_adv();
v.addEventListener('playing', function() {setInterval(catch_the_frame,500);}, false);
</script>

Với:
8 là giây bắt đầu hiện banner quảng cáo.

30 là giây banner sẽ tự động tắt.

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by debugpoint/stackoverflow/Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm