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.
Đầ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!
kimidev
11/05/2022 lúc 19:12
https://www.kimidev.site/
Minh
11/03/2022 lúc 14:06
Ad cho mình hỏi cái này có chèn cho blogger được không! Làm sao để chèn tự động ?Thanks
Admin
18/03/2022 lúc 22:44
mấy cái miễn phí thì chắc ko có tự động đâu bạn 😀
Quoc
28/02/2022 lúc 14:45
admin có thể cho mình xin thông tin liên hệ không ạ?
nam
20/10/2020 lúc 09:00
đây https://codepen.io/isheikhspear/pen/RjMOgw
Admin
01/11/2020 lúc 18:47
đơn giản là dùng chung tài liệu hướng dẫn của Video.js thôi 😐
nam
20/10/2020 lúc 08:56
bài copy này bữa thấy đâu rồi này. copy mà copy cũng ko chuẩn/ lạy
Quoc
28/02/2022 lúc 13:01
bạn cho mình xin zalo hay tele mình hỏi chút được không ạ?
chu
20/12/2018 lúc 15:15
Bạn hướng dẫn chi tiết hơn mình làm trên blogcủa mình , mình ko hiểu lắm có thể thay <source src=”//file.mp4″ type=”video/mp4″> thành nhúng video trên các website được ko ad?
Admin
20/12/2018 lúc 15:19
đương nhiên là được rồi bạn bạn bỏ đường link video (phải là file video) vào src=”” là được thôi
Thể Hình Channel
26/08/2018 lúc 16:28
Cũng chưa hiểu cho lắm, bạn có thể cho ví dụ cụ thể để dân tay mơ cũng làm được không bạn 🙁
Admin
26/08/2018 lúc 16:34
demo cái video: https://inithtml.com/wp-content/uploads/2018/08/demo-videojs.zip
còn cái bước gắn VAST thì bắt buộc bạn phải hiểu rồi chứ k thì sao kiếm tiền đc…