Ở bài viết lần trước, mình đã giới thiệu với với các bạn trình phát nhạc HTML5 cực nhẹ và đơn giản rồi, và lần này cũng là HTML5 + với sự kết hợp từ JavaScript, code video HTML5 Blogger/Blogspot, có chèn quảng cáo banner.
Code này khá nhẹ, load ngay lập tức khi tải trang, nếu trang bạn load chậm thì chắn chắn không phải do code này đâu nhé. Code này share lại chứ không phải của mình, vì code gốc cái phần quảng cáo khi dùng banner to hơn thì có hơi lệch, cho nên đã chỉnh sửa vài chỗ. Bên dưới đây là ảnh demo.
Ưu điểm của code video HTML5 cho Blogger/Blogspot, có chèn quảng cáo video và banner 👇
➦ Dễ chỉnh sửa và cài đặt, chỉ việc dán code vào là xong
➦ Giao diện thân thiện, không hề thua kém những trình phát video trên các web phim, mượt hơn hẳn mã nhúng của mấy bên thứ 3
➦ Có phần chèn quảng cáo bằng banner hình ảnh
➦ Có phần chèn quảng cáo bằng video
➦ Có hầu hết mọi chức năng cần thiết của trình phát video như: Ảnh nền mô tả, có thể thiết lập tự động phát hoặc không.
➦ Mặc định code HTML5 có nút tải xuống, chỉnh tốc độ phát, vào xem chế độ hình trong hình.
Và không dài cmn dòng nữa, bắt đầu lun nào.
Bước 1: Chủ đề > Tùy chỉnh > Chỉnh sửa HTML > Thêm đoạn CSS dưới đây vào trong blog bạn. Đoạn CSS này mình có chỉnh đôi chút, do gốc mặc định chiều ngang bị cố định cái kích thước banner.
#ad_area{position:relative;float:center;z-index:99}
#my_ad{position:absolute;width:100%;height:auto;bottom:20px;font-family:Arial;font-size:120%;background-color:#000000;z-index:100;color:#ff0000}
#close a{position:absolute;top:0px;right:20px;z-index:100;font-family:Arial;text-decoration:none;color:#fff}Phần màu xanh trong CSS 100% là chiều ngang banner, nếu muốn tùy chỉnh nhỏ lại hãy thay 100% thành 500px. Tùy theo kích cỡ bạn muốn banner hiển thị trên trình duyệt.
Phần màu hồng: auto là chiều dọc của banner, cái này mình đã sửa thành auto đó. Còn nếu bạn muốn tùy chỉnh thì hãy thay auto thành 200px, nên để chiều dọc dưới 200px để không bị lòi ra khung nhá. Tốt nhất là cứ để im auto cmn cho rồi.
Bước 2: Vào trong bài viết mà bạn cần chèn code video > Chuyển sang tab HTML > Copy và dán đoạn code HTML5 bên dưới.
<span id="seek_status"></span>
<div id="ad_area">
<div id="my_ad">
<!--Đặt quảng cáo của bạn tại đây-->
<div class="separator" style="clear: both; text-align: center;"><a href="https://chitose2d.blogspot.com/" style="margin-left: 1em; margin-right: 1em;" target="_blank"><img alt="Chitose2D" src="Link ảnh.png" /></a></div>
<div id="close" onclick="this.parentNode.parentNode.removeChild(this.parentNode); return false;"><a href="#"><b><span style="color: #004400;">[✘]</span></b></a></div>
</div>
<div>
<video controls="" id="myvideo" play="autoplay" poster="Link ảnh nền video.png" src="Link video.mp4" style="max-height: 720px;" width="100%">
<source src="Link video.mp4" type="video/mp4"></source>
Link hỏng hoặc trình duyệt của bạn không hỗ trợ, báo cáo bằng cách bình luận bên dưới.
</video>
</div>
</div>
<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 >= 5 && t <= 15) {
show_adv();
}else {
hide_adv();
}
}
hide_adv();
v.addEventListener('playing', function() {setInterval(catch_the_frame,500);}, false);
</script>Giải thích vài đoạn quan trọng trong code ↓
Link màu xanh trong code: https://chitose2d.blogspot.com/ Thay bằng link mà bạn muốn chuyển hướng khi click vào banner.
Link màu hồng trong code: Link ảnh.png Thay bằng link banner của bạn.
Màu xanh lục đoạn: #004400 là màu của văn bản dấu [✘] để tắt banner quảng cáo.
Màu đỏ chữ: play thay thành autoplay nếu bạn muốn video tự phát khi tải trang.
Màu tím đoạn: Link ảnh nền video.png là cái ảnh nền chưa play mà bạn thấy trên demo á, thay thành ảnh mà bạn muốn nhé!
Màu xanh da trời trong code: Link video.mp4 là link video, tìm một trang lưu trữ nào đó tải video lên lụm link có đuôi .mp4 nhét vào đây. Có 2 đoạn Link video.mp4 nhưng vẫn dán cùng 1 link giống nhau nha.
Số có màu nâu trong JavaScript: 5 và 15. Trong đó 5 là thời gian bắt đầu hiện banner quảng cáo sau khi play video, 15 là mốc giây sẽ tự động tắt. Túm chym lại là banner hiển thị giây thứ 5 và tự tắt giây thứ 15, tính từ khi play video.
Demo 2: dạng quảng cáo bằng video. Sau khi play đoạn video quảng sẽ hiện trước, qc sẽ tự động tắt sau khi chạy hết video quảng cáo ⇩.
Giải thích ngắn gọn: Khi bạn nhấn play video trên, đoạn video quảng cáo sẽ hiển thị trước, ví dụ đoạn video cú ếch với nụ cười thân thiện bên trên, sau khi hết thời gian sẽ hiện video chính. Nếu muốn bỏ qua quảng cáo, bạn chỉ việc tua hết thời gian là được.
Bước 1: Vào trong bài viết mà bạn cần chèn code video > Chuyển sang tab HTML > Copy và dán đoạn code HTML5 bên dưới.
<video controls="" id="vid123456" play="autoplay" poster="Link ảnh nền video.png" src="Link video.mp4" style="max-height: 720px;" width="100%">
<source src="Link video.mp4" type="video/mp4"></source>
Link hỏng hoặc trình duyệt của bạn không hỗ trợ, báo cáo bằng cách bình luận bên dưới.
</video>
<script type="text/javascript">
$( document ).ready(function() {
var adManager = function () {
var vid = document.getElementById("vid123456"),
adSrc = "Link video quảng cáo.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>Những đoạn có màu cần lưu ý thì cứ làm giống demo 1, riêng đoạn màu xanh nước biển ở trong JavaScript: Link video quảng cáo.mp4, thay thành đoạn video quảng cáo của bạn.
Kết bài: Một vài lưu ý bạn cần phải nhớ ↓
Với dạng quảng cáo banner, hãy dùng banner có chiều dọc dưới 200px, để tối ưu hiển thị trên nhiều loại trình duyệt.
Với dạng quảng cáo video, ưu tiên thời lượng dưới 30 giây cho ngắn gọn nhé!
Hashtag: Code video HTML5 cho Blogger/Blogspot, có chèn quảng cáo video và banner
Không có nhận xét nào
Đăng nhận xét