Brothers, I want someone to help me solve this puzzle. Trying has exhausted me for two days. I almost lost my eye.
I want to incorporate this black magic into my Blogger website
/////////Cloudflare Stream/////////////
<html>
<head>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video-js.min.css"
rel="stylesheet"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/7.10.2/video.min.js"></script>
</head>
<body>
<video-js id="vid1" controls preload="auto">
<source
src="https://customer-m033z5x00ks6nunl.cloudflarestream.com/b236bde30eb07b9d01318940e5fc3eda/manifest/video.m3u8"
type="application/x-mpegURL"
/>
</video-js>
<script>
const vid = document.getElementById('vid1');
const player = videojs(vid);
</script>
</body>
</html>
##############################################
///////////////github///////////
<html>
<head>
<!-- Load dependent stylesheets. -->
<link href="path/to/video-js.css" rel="stylesheet" />
<link rel="stylesheet" href="path/to/videojs-contrib-ads.css" />
<link rel="stylesheet" href="path/to/videojs.ima.css" />
</head>
<body>
<video
id="content_video"
class="video-js vjs-default-skin"
controls
preload="auto"
width="YOUR_VIDEO_WIDTH"
height="YOUR_VIDEO_HEIGHT"
>
<source src="PATH_TO_YOUR_CONTENT_VIDEO" type="YOUR_CONTENT_VIDEO_TYPE" />
</video>
<!-- Load dependent scripts -->
<script src="/path/to/video.js"></script>
<script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script src="/path/to/videojs-contrib-ads.js"></script>
<script src="/path/to/videojs.ima.js"></script>
<script src="player.js"></script>
</body>
</html>
In player.js, load the ads library and set up the IMA plugin: var player =
videojs('content_video'); var options = { adTagUrl: 'YOUR_AD_TAG' };
player.ima(options); // On mobile devices, you must call
initializeAdDisplayContainer as the result // of a user action (e.g. button
click). If you do not make this call, the SDK // will make it for you, but not
as the result of a user action. For more info // see our examples, all of which
are set up to work on mobile devices. //
player.ima.initializeAdDisplayContainer();
#####################################
/////IMA DAI SDK for HTML5//////
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="dai.js"></script>
<link rel="stylesheet" href="dai.css" type="text/css" />
</head>
<body onLoad="initPlayer()">
<h2>IMA SDK DAI Demo (HLS.JS)</h2>
<video id="video"></video>
<div id="ad-ui"></div>
</body>
</html>
dai.css #video, #ad-ui { width: 640px; height: 360px; position: absolute; top:
35px; left: 0; } #ad-ui { cursor: pointer; } dai.js var BACKUP_STREAM =
'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8' // Live
stream asset key. var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA"; // VOD content
source and video IDs. var TEST_CONTENT_SOURCE_ID = "2528370"; var TEST_VIDEO_ID
= "tears-of-steel"; var hls = new Hls(); // hls.js video player var
videoElement; var adUiElement; var isAdBreak; function initPlayer() {
videoElement = document.getElementById('video'); adUiElement =
document.getElementById('adUi'); }