Assalamualaikum !
প্রথমে জানতে হবে এটা কি ? এবং এটা দিয়ে কি হয় !
একটি ওপেন-সোর্স জাভাস্ক্রিপ্ট লাইব্রেরি যা ওয়েবসাইটে ভিডিও প্লেব্যাককে সহজ করে তোলে। এটি ডেভেলপারদের জন্য একটি কাস্টমাইজেবল এবং প্রতিক্রিয়াশীল ভিডিও প্লেয়ার তৈরি করার সুযোগ দেয়।
এটির ব্যবহার খুব সহজ ,
ধাপ ১ঃ- <head>
ট্যাগ এর ভিতরে <link href="https://vjs.zencdn.net/8.16.1/video-js.css" rel="stylesheet" />
add করতে হবে ।
ধাপ২ঃ- <body>
এর ঠিক উপরেই <script src="https://vjs.zencdn.net/8.16.1/video.min.js"></script>
add করতে হবে !
ব্যাস হয়ে গেল ,
আগের default player :-
video.js add করার পর :-
কিন্তু ঠিক হবহু এমন features চোখে পরছে না ? এখন কিছু মশালাদার জিনিস যোগ করার পালা
আসুন এখন কিছু extra funtion add করি !
ধরি আমাদের কোড টি দেখতে এমনঃ-
আমরা যেটি নিয়ে কাজ করব তার একটা উদাহরণঃ-
<video id="my-video"
class="video-js vjs-matrix video-js2"
controls
autoplay
poster="source" // thumbnail এর path
preload="auto"
width = "420"
height="320"
data-setup="{}">
<source src="${Source}" type="video/mp4">
</video>
এখন controlbar এ skip button and playback speed add করার পালাঃ-
প্রথমে একটি file.js create করুন আর তা <script src="path/file.js"></script>
এর মাধ্যমে body
tag এর উপর যোগ করুন ।
videojs('#my-video', { //আপনার id এর নাম
controlBar: {
skipButtons: {
forward: 10,
backward: 10, // এইটা সেকেন্ডে ,
}
},
playbackRates: [0.5, 1, 1.5, 2],
});
আর css এড এর জন্য <style>
tag এর ভিতরে এগুলি লিখুন
.vjs-matrix .vjs-big-play-button {
background: rgba(255, 0, 0, 0.931);
}
.vjs-matrix .vjs-volume-level {
background: hsl(240, 100%, 51%);
}
.vjs-matrix .vjs-play-progress {
background-color: rgb(0, 0, 0);
}
.vjs-matrix .vjs-progress-holder {
background: rgb(0, 255, 238);
border-radius: 5px;
}
.vjs-matrix .vjs-load-progress{
background: red;
}
.vjs-matrix .vjs-slider-bar {
background-color: brown;
}
.vjs-matrix .vjs-play-control {
background-color: red;
box-shadow: 0;
border-radius: 5px;
}
.vjs-matrix .vjs-control-bar {
background-color: transparent;
}
এছাড়া আপনারা চাইলে আলাদা ডিজাইনও যোগ করতে পারবেন ।আরও অসাধারণ জিনিসপত্র এড করতে সময় থাকলে ঘুরে আসতে পারেন videojs !