Nếu bạn có nhu cầu kiếm tiền từ quảng cáo video, nhưng giá của các trình phát video có hỗ trợ quảng cáo quá cao, bài viết này sẽ giới thiệu một giải pháp hoàn toàn miễn phí, đó là sử dụng Video.js.

Video.js: Trình phát HTML5 có hỗ trợ quảng cáo miễn phí

Sử dụng Video.js

Mình sử dụng Video.js phiên bản 5 vì phiên bản 6 chưa hoạt động ổn định với quảng cáo. Đầu tiên, nhúng đoạn mã sau vào <head></head>.

<link rel="stylesheet" href="https://vjs.zencdn.net/5.20.3/video-js.min.css">

Và đoạn mã sau trước </body>.

<script src="https://vjs.zencdn.net/5.20.3/video.min.js"></script>

HTML của video như sau.

<div class="single-video">
    <video id="my-video" class="video-js vjs-16-9 vjs-big-play-centered" controls preload="false" width="640" height="264" muted>
        <source src="path/to/video/video.mp4" type="video/mp4">
    </video>
</div>

Với single-video:

.single-video {
    max-width: 640px;
    margin: 0 auto;
}

JavaScript:

vjs = videojs('my-video', {hls: {withCredentials: true}, 'controls': true, 'autoplay': true, 'preload': 'auto'});
vjs.muted(true);
vjs.play();

Quảng cáo

Bạn có thể chạy quảng cáo preroll với Video.js.

Video.js Preroll

Đầu tiên, thêm đoạn mã sau vào <head></head> sau đoạn mã trên.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs.vast.vpaid.min.css">

Và đoạn mã sau vào trước </body> sau Video.js.

<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-vast-vpaid/2.0.2/videojs_5.vast.vpaid.min.js"></script>

JavaScript sẽ như sau.

vjs = videojs('my-video', {hls: {withCredentials: true}, 'controls': true, 'autoplay': true, 'preload': 'auto'});
vjs.vastClient({
    url: 'https://...',
    playAdAlways: true,
    adCancelTimeout: 10000
});
vjs.muted(true);
vjs.play();

Với url là đường dẫn đến VAST. VAST là từ viết tắt của Video Ad Serving Template, VAST là tập tin với phần mở rộng .xml. Bên trong tập tin này sẽ chứa nội dung để hiển thị quảng cáo ra trình phát video.

Tải VAST theo mô hình thác nước

Video.js có thể chạy 2 VAST theo mô hình thác nước, tức là VAST đầu tiên không có quảng cáo thì sẽ gọi VAST thứ 2. Để làm được điều đó, tham khảo đoạn mã sau.

var isError = false;
vjs.on('vast.adError', function() {
    if (!isError) {
        this.pause();
        this.vast.disable();
        this.vastClient({
            url: 'https://...',
            playAdAlways: true,
            adCancelTimeout: 10000 
        });
        this.vast.enable();
        this.muted(true);
        this.play();
        isError = true;
    }
});

Với vast.adError là sự kiện trả về khi VAST đầu tiên không có quảng cáo.

Midroll

Mặc định Video.js không thể chạy quảng cáo midroll (giữa video), nhưng ta có thể tùy biến như sau để chạy thêm một quảng cáo thứ hai sau khi hết preroll. Tham khảo đoạn mã sau.

var isContentStart = false;
vjs.on('vast.contentStart', function() {
    if (!isContentStart) {
        this.pause();
        this.vast.disable();
        this.vastClient({
            url: '...',
            playAdAlways: true,
            adCancelTimeout: 10000 
        });
        this.vast.enable();
        this.muted(true);
        this.play();
        isContentStart = true;
    }
});

Với vast.contentStart là sự kiện trả về khi nội dung được bắt đầu (sau khi chạy xong quảng cáo đầu tiên).

Nhược điểm duy nhất của Video.js là không tự động chạy video trên iOS. Nếu có kinh phí, bạn có thể tham khảo các trình phát JW Player (từ $50/tháng), Radiant Media Player ($80/tháng)…

Chúc các bạn thành công!

Series: Thủ thuật Front-end