<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>m3u8 Video with VAST Ads</title>
<script src="https://cdn.jsdelivr.net/npm/video.js/dist/video.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-contrib-ads/dist/videojs.ads.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/videojs-ima/dist/videojs.ima.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/video.js/dist/video-js.min.css" rel="stylesheet">
</head>
<body>
<video id="videoPlayer" class="video-js vjs-default-skin" width="640" height="360" controls>
<source src="your-video.m3u8" type="application/x-mpegURL">
Your browser does not support the video tag.
</video>
<script>
const player = videojs('videoPlayer');
player.ima({
id: 'videoPlayer',
adTagUrl: 'your-vast-ad-tag-url.xml'
});
player.on('adsready', () => {
player.ima.requestAds();
});
player.on('adserror', () => {
console.log('Ad error');
});
</script>
</body>
</html>